Table of contents

1. Overview

Module 1

Step 1 | Overview

Step 2 | Course material for each component

Step 3 | Avoiding distractions from the past, present, and future

Step 4 | What to expect

2. Elements

Module 2

Step 1 | Marking up a page

Step 2 | Representing structure as a picture

Step 3 | Exercise: Children

Step 4 | Exercise: Parent

Step 5 | Exercise: Siblings

Step 6 | Exercise: Ancestors

Step 7 | Exercise: Descendants

Step 8 | Exercise: Trees

Step 9 | Introducing elements

Step 10 | Example: A simple web page

Step 11 | Basic elements

Step 12 | Using basic elements

Step 13 | Example: Basic elements

Step 14 | Exercise: Basic elements

Step 15 | Exercise: Headings

Step 16 | Division elements

Step 17 | Example: Division elements

Step 18 | Empty elements

Step 19 | Using entities

Step 20 | Exercise: Page with title

Step 21 | Exercise: Page with head and body

Step 22 | Exercise: Tree representation

3. Attributes

Module 3

Step 1 | Introduction to attributes

Step 2 | Attributes for hyperlink and image elements

Step 3 | Example: Displaying an image

Step 4 | Creating a minimal web page

Step 5 | Exercise: Attributes

Step 6 | ID attributes

Step 7 | Exercise: Using ID attributes

Step 8 | Class attributes

Step 9 | Exercise: Using ID and class attributes

4. CSS basics

Module 4

Step 1 | How to specify style

Step 2 | Using a style attribute

Step 3 | Using an internal style sheet

Step 4 | Using an external style sheet

Step 5 | Example: Using an external style sheet

Step 6 | Exercise: External style sheet

Step 7 | Selectors

Step 8 | Example: Selectors

Step 9 | Exercise: Selectors

Step 10 | Properties used in styling text

Step 11 | Example: Styling text

Step 12 | Exercise: Errors in CSS

Step 13 | Exercise: Using semicolons

Step 14 | Specifying colours

Step 15 | Hexadecimal numbers

Step 16 | Exercise: From hexadecimal to decimal

Step 17 | Exercise: About hexadecimal numbers

Step 18 | Exercise: Using colours

Step 19 | Specifying sizes

5. More elements

Module 5

Step 1 | More elements

Step 2 | Ordered and unordered lists

Step 3 | Example: Ordered and unordered lists

Step 4 | Exercise: About lists

Step 5 | Styling lists

Step 6 | Exercise: A list of list styles

Step 7 | Tables

Step 8 | Exercise: About tables

Step 9 | Exercise: A table

Step 10 | Exercise: A table of lists

Step 11 | Semantic elements

Step 12 | Breaking the rhubarb example into pieces

Step 13 | Example: Using semantic elements

Step 14 | Exercise: About semantic elements

Step 15 | Exercise: Semantic elements

Step 16 | Example: Ruminating about RHUBARB

6. Layout

Module 6

Step 1 | Page layout

Step 2 | Block-level and inline elements

Step 3 | Example: Block-level and inline elements

Step 4 | The role of content

Step 5 | Example: Sizing content

Step 6 | Example: Fine-tuned sizing

Step 7 | The role of padding

Step 8 | Exercise: Layout of a table

Step 9 | The role of borders

Step 10 | Example: Borders

Step 11 | Box-sizing

Step 12 | The role of margins

Step 13 | Exercise: Margins

Step 14 | Styling the four sides

Step 15 | Example: Styling the four sides

Step 16 | Exercise: Four matching sides

Step 17 | Exercise: Two matching sides

Step 18 | Exercise: Tic tac toe

7. Selectors

Module 7

Step 1 | Selectors

Step 2 | Combining selectors

Step 3 | Example: Combining selectors

Step 4 | Exercise: Combining selectors

Step 5 | Selecting children or descendants

Step 6 | Example: Selecting children or descendants

Step 7 | Exercise: Selecting descendants

Step 8 | Exercise: Selecting children

Step 9 | Selecting siblings

Step 10 | Example: Selecting siblings

Step 11 | Exercise: Selecting siblings

Step 12 | Exercise: Using selectors

Step 13 | Attribute selectors

Step 14 | More attribute selectors

Step 15 | Example: More attribute selectors

Step 16 | Exercise: Attribute selectors

Step 17 | Pseudo-elements

Step 18 | Pseudo-classes

8. Position

Module 8

Step 1 | Position

Step 2 | Absolute positioning

Step 3 | Relative positioning

Step 4 | Fixed positioning

Step 5 | Float

Step 6 | Example: Float

Step 7 | Exercise: Using float

Step 8 | Clear

Step 9 | Example: Clear

Step 10 | Exercise: Clear

Step 11 | Exercise: Using float for an aside

Step 12 | Flexible box layout

Step 13 | Using the justify-content property

Step 14 | Using the align-items property

Step 15 | Extended exercise using positioning

Step 16 | Exercise: positioning articles

Step 17 | Exercise: positioning various elements

9. Forms

Module 9

Step 1 | Forms

Step 2 | Text entry

Step 3 | Checkboxes and buttons

Step 4 | Radio buttons

Step 5 | Dropdown menu

Step 6 | Exercise: Controls

Step 7 | Exercise: Design your own form

10. Cascading

Module 10

Step 1 | Cascading

Step 2 | Example: Inline styles and style sheets

Step 3 | Example: Styling borders

Step 4 | Exercise: Styling borders 1

Step 5 | Exercise: Styling borders 2

Step 6 | Inheritance

Step 7 | Exercise: Ancestors

Step 8 | Example: Inheritance

Step 9 | Exercise: Inheritance

Step 10 | Specificity

Step 11 | Exercise: Specificity

Step 12 | Exercise: Priority

Step 13 | Exercise: Selectors that apply

Step 14 | Example: Specificity

Step 15 | Handling specificity

Step 16 | Exercise: Cascading

Step 17 | Choosing the right set of rules

Step 18 | Exercise: Using cascading to style a document

11. More to explore

Module 11

Step 1 | More to explore

Step 2 | More than you need to know about lists

Step 3 | Description lists

Step 4 | More than you need to know about tables

Step 5 | Example: Tables

Step 6 | More than you need to know about style