Kurs om

CSS för programmerare

Kurs för programmerare om hur du tillämpar modern CSS i webb-applikationer

Har du upplevt att du bara skulle göra en liten förändring i en CSS regel och hela webbsidas utseende förvandlades till något som mer liknade en kubist målning? Har du tänkt tanken att CSS snarare är besläktat med alkemi än programmering? Kanske du inte ens känner igen dig i frågeställningarna ovan.

Hursomhelst, så är detta en kurs ger dig en solid grund i CSS & HTML, med ett stänk av JavaScript. Du får lära dig allt du behöver veta om CSS & HTML för att förstå hur CSS regler ska utformas och hur webbläsaren väljer ut vilka regler som ska användas.

Kursen är uppbyggd kring många korta teoriavsnitt, vilka avslutas med praktiska programmeringsövningar. Vi vill understryka att kursen vänder sig till utvecklare som använder CSS som ett programspråk, för att realisera en design. Med andra ord; det är inte en kurs om grafisk web design, utan om att förstå och kunna tillämpa CSS/HTML/JS.

Snabbfakta

Namn
CSS för programmerare
Ämne
Webbapplikationer
URI
web/css-for-programmers
Längd
3 dagar
Nivå
Beginner
Målgrupp
Web-apps programmerare
Förkunskaper
Erfarenhet av att utveckla webbapplikationer
Programvara & Verktyg
  • Node.js && NPM && NPX
  • MS Visual Code || JetBrains IntelliJ IDEA
  • Chrome || Firefox || Edge

Kursdatum

Här ser du vilka kursdatum som är tillgängliga. Klicka på en av datumknapparna för att anmäla dig till ett kurstillfälle. På kursen pratar läraren svenska, medan vårt kursmaterial alltid är författat på engelska.

Fjärrkurs

Du sitter bekvämt framför datorn och deltar i kursen via internet. Vi använder programvaran Zoom för alla våra fjärrkurser.

I priset ingår kursmaterial som PDF.

Pris: 15 000 kr + moms

Klassrumskurs

Du sitter bekvämt i ett av våra klassrum, vilka finns centralt placerade i Stockholms innerstad (Östermalmstorg).

I priset ingår tryckt kursmaterial (och som PDF), samt kaffe/te med smörgås på förmiddagen och kaffe/te med bulle på eftermiddagen.

Pris: 20 000 kr + moms

Just nu finns det inga datum tillgängligt. Titta förbi om några dagar eller kontakta oss.

Företagsanpassad Kurs

Om ni är tre eller fler personer från samma företags, kan ni beställa en företagsanpassad kurs. Då håller vi kursen på ett datum som passar er. Antingen på plats i era lokaler eller som en fjärrkurs. Vi kan också hålla den muntliga framställningen på engelska. Klicka på knappen nedan för att be om en offert.

Företagsanpassad Kurs

Detta får du lära dig

Här är ett sammandrag i punktform av vad du får lära dig på kursen. Eftersom kursmaterialet är författat på engelska, så återger vi sammandraget också på engelska.

  • Be able to formulate powerful CSS rules
  • Be able to design reusable CSS widgets
  • Be able to place elements with flexbox
  • Be able to design page layout with grid
  • Be able to create effective backgrounds with gradients
  • Understand how browsers choose exactly which CSS rules to apply
  • Be able to select and configure construction tools for both pre- and post-processing

Kursinnehåll

Eftersom kursmaterialet är författat på engelska, så återger vi innehållet också på engelska.

Overview & Background

  • Why CSS was invented
  • Version history
  • Browser compatibility

WEB APP BASICS

Laying the foundation for the course

HTTP Overview

  • The HTTP invocation structure
  • Request operations
  • Response codes
  • MIME types
  • Understanding HTTPS
  • Payload encryption
  • Using a non-validated X.509 certificate

HTML Basics

  • Basic syntax
  • HTML page document
  • Lenient HTML
  • Heading tags
  • Paragraph tags
  • List tags
  • Link tags
  • Block vs. inline tags
  • White space
  • Pre-formatted and code tags
  • Presentational tags
  • Semantic tags
  • Grouping tags
  • Common attributes
  • Special attributes
  • Head section tags
  • Meta tags

CSS Syntax

  • Basic syntax
  • Element selector
  • Size units
  • Colour properties
  • Text properties
  • Padding and margin
  • Borders
  • Embedding and linking to CSS code
  • Tag link attributes
  • The default style-sheet

JavaScript Basics

  • Variables
  • Scalar types
  • Operators
  • Print outs
  • Functions
  • Lambdas
  • Lists
  • Objects
  • JSON
  • Running JS in a browser
  • Understanding DOM
  • Finding DOM nodes
  • Dealing with CSS styles
  • Modifying the DOM tree
  • Event handling
  • Brief about AJAX
  • Embedding and linking to JS code
  • Tag script attributes

Mock/Fake Data

  • What is mock data?
  • Lorem ipsum text
  • Getting filler text from a web service
  • Getting placeholder images from a web service
  • Getting random stock images from a web service
  • Fake personal data
  • Generating mock/fake business data
  • Fake back-end REST-WS server

CSS FUNDAMENTALS

Presenting the corner stones of CSS

Fonts & Size Units

  • Font categories
  • Setting the font
  • What is font-size relative?
  • Using em size
  • Nested elements with em size
  • Using rem size
  • Using viewport units

Colour Expressions

  • Colour expression syntax
  • Understanding RGB
  • Understanding HSL
  • Opacity / transparancy
  • A little of colour theory
  • Combinators & Selectors

Combinator syntax

  • Universal selector
  • Attribute selectors
  • Pseudo classes
  • Pseudo elements
  • Variables
  • The calc() function
  • Special property values

CSS Box Model

  • Block vs. inline elements
  • Element box rendering
  • Box shape structure
  • Border properties
  • Border radius
  • Getting creative with think borders
  • Inline images
  • Floated images
  • Floating around several paragraphs
  • Stop floating
  • Floating block elements
  • The clearfix trick
  • Using floated divs to define a columnar layout
  • Understanding the box-sizing property
  • Always set box-sizing to border-box
  • Box shadows
  • Simple card widget

Text Formatting

  • Alignment
  • Variations
  • Spacing
  • Columns
  • Newspaper format

LAYOUT

Discussion of various ways of place content

Positioning

  • What can property position achieve?
  • Fixed
  • Absolute
  • Relative
  • Sticky
  • Z-index

Flexbox Layout

  • What is flexbox?
  • Terminology
  • Properties
  • Flex direction
  • Justify content
  • Align items
  • Flex wrap
  • Flex basis/grow/shrink

Grid Layout

  • What is grid?
  • Terminology & anatomy of a grid container
  • Container properties
  • Item properties
  • Named grid lines
  • Named grid areas

Page Layouts

  • Base style
  • Even out browser differences
  • CSS concepts
  • Common page layouts
  • Dealing with a wide screen
  • Usage of max-width
  • Dealing with overflow

APPLICATION

Application design aspects

Web Fonts

  • What is a web font?
  • Web font providers
  • Using Google Fonts
  • Using a font link
  • Using a downloaded font

Icon Fonts

  • What is an icon font?
  • Icon font providers
  • Using Font Awesome
  • Linking to and applying Font Awesome
  • Scaling icons
  • Icon variations
  • Combining and mixing icons

Designing Widgets with Module CSS

  • What is modular CSS?
  • Simple Message widget
  • Buttons widget
  • Dealing with button states
  • Button variations
  • A media widget with image
  • Multi-component widget using JS
  • Dropdown widget
  • Menu widget

COMPOSITE ELEMENTS

Styling tables and forms

Tables

  • Basic table tags
  • Cell borders
  • Column formats
  • Striped and hover rows
  • Row groups
  • Unstyled and styled row groups Merged cells

Forms & Fields

  • Basic form tag
  • Basic form field tags
  • Using the input tag
  • Input tag attributes
  • Toggle buttons
  • Item selection fields
  • Multi-line text field
  • Borders & corners of fields
  • Styling labels
  • Using fieldset to group fields
  • Designing a modal popup form

ADVANCED CSS

Deepening the understanding of CSS

Cascading & Specificity

  • Understanding how to browser chooses a CSS rule to apply
  • Different selectors have different specificities
  • Specificity encoding into tuples
  • How to deal with conflicting rules of the same specificity
  • What is a cascaded value
  • Property inheritance

Backgrounds

  • Properties dealing with backgrounds
  • Gradients
  • Linear and radial gradients
  • Repeating gradients
  • Mixing and blending colors
  • Mixing images
  • Cut-out text over an image

Transitions & Transforms

  • What is a transition?
  • Transition properties
  • Fading
  • What is a Cubic Bezier function
  • What is a transform?
  • Rotate, translate, scale and skew

Device Queries

  • Media query by device type
  • Media query by device feature
  • Logical operators of query expressions
  • Using mydevice.io
  • Handling media queries in JS
  • Principles of responsive design
  • Mobile first
  • Fluid layout
  • Size and resolution dependent image selection