CSS för programmerare

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