Kurs om
CSS för programmerare

Overview & Background

• Why CSS was invented
• Version history
• Browser compatibility

Web App Basics

Laying the foundation for the course

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

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

Layouts

Discussion of various ways of placing 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

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

Fonts

Discussion of web fonts and icon fonts

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

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

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.

Missa inte vår samfaktureringsrabatt! Är ni fler personer från samma företag/organisation som går på samma kurs och kurstillfälle, rabatteras tillkommande personer med 25%. Ni kan anmäla er till kursen en och en, men uppger då samma företag, så ordnar vi resten. Samtliga deltagare från samma företag ingår då på samma faktura, den första till fullt pris och resterande till rabatterat pris.

Boka din plats på vår fjärrkurs, via Zoom

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: 10 000 kr + moms

28 nov. 2024 12 dec. 2024