Online Kurs omCSS/HTML för Programmerare

Overview & Background

• Why CSS was invented
• Version history
• Browser compatibility

WEB APP BASICS

Laying the foundation for the course

HTTP Overview

• HTTP invocation structure
• Request opersations
• 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 place holder 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 bit 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 directiojn
• 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 donwloaded 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
• 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 fieldsets to group fields
• Designing a modal popup form

ADVANCED CSS

Depening 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
• Cubic bezier functions
• 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

TOOLING

Developer support tools

Build Tools

• Do not install NPM packages globally
• Using NPX for CLI tools
• Understanding the scripts section of package.json
• NPM & BASH
• What is GulpJS?
• Sample gulpfile
• HTML minification

Style Docs

• What is a style doc?
• Installation of KSS
• Doc comments syntax
• Defining a start page
• Running KSS

Pre-Processing

• What is a pre-processor?
• What is PUG?
• Sample PUG file
• What is SASS/SCSS?
• Sample SCSS file
• Other CSS languages
• Using Modernizr to even out browser differences

Post-Processing

• What is post-processing?
• Using PostCSS and its CLI
• Sample PostCSS usage
• Sample PostCSS translations
• Using GulpJS as the PostCSS runner
• Minification of HTML, HS and images using GulpJS and PostCSS

Bundlers

• What is a bundler?
• Typical operations of a bundler
• Installing and configuring Parcel
• Using Parcel for development
• Using Parcel for application build
• Hash naming of asset files

BEYOND CSS

What else is it there to grasp

Themes

• What is a theme?
• Popular (open-source) themes
• Overview of Twitter Bootstrap
• Bootstrap widgets

Frameworks

• What is a web framework?
• What is a single-page (web) app (SPA)?
• SPA frameworks
• What is Angular?
• Generating an Angular component
• Angular component anatomy