# CSS för programmerare

Nivå: beginner | Målgrupp: Web programmerare | Förkunskaper: Erfarenhet av att utveckla webbapplikationer
https://www.ribomation.se/programmerings-kurser/css-for-programmerare/

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.

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 som ger dig en solid grund avseende CSS & HTML, med ett stänk av JavaScript. 
Du får lära dig allt du behöver veta 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.

- 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

#### 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