Day one

Introduction

• Overview of the roles and responsibilities of:

• HTML

• CSS

• Javascript

• PHP/ASP

• From Wireframe to code - review of HTML Structural Elements

• To div or not to div

CSS Essentials

• Cascade and Inheritance

• Locations – where to hold the CSS and why:

• External, Internal, Inline, Imported

• CSS Syntax

• Core Selectors Theory and Practice:

• Tag (Type)

• Class

• ID

• Groups and Descendants

Working with Text

• Font size and family

• System Fonts and Server Fonts

• Text colour and background colour

• Alignment, line spacing and letter spacing

• Styling Links

Layout Fundamentals

• CSS Box Model

• Working with padding, margins and borders

• Longhand and shorthand syntax

• Changing the width of elements

• Understanding the difference between Block and Inline Levels

Image Essentials

• Understanding background images

• Creating tiled backgrounds

• Controlling background repeats

• Controlling background positions

• Using image headers

• Using fixed backgrounds

• Creating Custom Bullet Points

• Controlling Icons

• Working with Unicode

Questions and answers

Day two

Responsive Design

• Mobile first or Desktop first?

• Fixed units versus percentage values

• Applying responsive font size

• Responsive image and video techniques

• Using media queries to create breakpoints

• Using the browser mobile emulator for testing

Practical Layout Techniques

• Styling Data Tables and Forms

• Using Image Floats

• Creating columns with floats

• Understanding box-sizing

• Working with overflows

• Inserting content with :before and :after

• Fixing float issues with overflow hack

• Fixing float issues with clearfix hack

• Modern columns with Flexbox

• Layering content with absolute Positioning

Pseudo Selectors

• Hover effects

• Styling the first letter and first line

• Styling first, last, alternate and nth elements

• Styling by Attribute

• Styling direct descendants

• Using : not to omit elements

• Overview of various other pseudo elements

CSS Effects

• Rounded corners, Box Shadow and Text Shadow

• CSS Transitions

• CSS Animation

Questions and answers