HTML5 and CSS3 Course

Lesson 1 • Introduction to HTML and CSS Roles

Distinguishes structure (HTML), presentation (CSS), and behaviour (JavaScript) as separate concerns. Sets expectations for the full course arc.

Lesson 2 • How the Web Works

Covers HTTP request-response cycles, DNS resolution, and browser rendering pipelines. Grounds all subsequent HTML/CSS work in real browser behaviour.

Lesson 3 • Setting Up Your Dev Environment

Installs and configures a code editor, browser dev tools, and a local file server. Ensures every student has a consistent, productive workspace.

Lesson 1 • HTML5 Syntax Rules and Anatomy

Explains tags, attributes, nesting rules, and the DOCTYPE declaration. Correct syntax prevents browser quirks-mode rendering issues.

Lesson 2 • Text Content Elements

Teaches headings, paragraphs, lists, blockquotes, and inline text elements. Students structure readable, semantically meaningful body content.

Lesson 3 • Tables and Data Presentation

Builds accessible data tables using thead, tbody, th, and td elements. Reinforces semantic HTML by reserving tables strictly for tabular data.

Lesson 4 • Links and Images

Covers anchor tags, href values, target attributes, and the img element with alt text. These elements form the backbone of navigable, visual web pages.

Lesson 1 • HTML5 Form Basics

Covers the form element, action, method attributes, and core input types. Forms are the primary mechanism for user data submission.

Lesson 2 • Select, Textarea, and Fieldset

Builds dropdown menus, multi-line text areas, and grouped form controls. Fieldset and legend improve form accessibility and logical grouping.

Lesson 3 • Semantic Landmark Elements

Introduces header, nav, main, article, section, aside, and footer. Semantic markup improves accessibility and search engine indexing.

Lesson 4 • Advanced Input Types and Attributes

Explores HTML5 input types: date, range, colour, tel, and number. Native input types reduce JavaScript dependency and improve mobile UX.

Lesson 1 • The CSS Box Model

Defines content, padding, border, and margin areas and their effect on element sizing. Box model mastery is prerequisite to all layout work.

Lesson 2 • Specificity, Inheritance, and Cascade

Explains how browsers resolve conflicting rules using specificity scores and source order. Mastering the cascade prevents unexpected style overrides.

Lesson 3 • CSS Syntax and Linking Methods

Covers rule sets, declarations, inline styles, internal style blocks, and external stylesheets. External stylesheets are established as the professional standard.

Lesson 4 • Colours, Units, and Typography Basics

Covers hex, RGB, HSL colour values and absolute vs. relative CSS units. Consistent use of rem and em units supports scalable, accessible typography.

Lesson 1 • Combining Flexbox and Grid

Demonstrates when to nest Flexbox inside Grid cells and vice versa. Students build a complete page layout using both systems appropriately.

Lesson 2 • Grid Placement and Named Areas

Teaches line-based placement, span syntax, and grid-template-areas for named regions. Named areas make complex layouts readable and maintainable.

Lesson 3 • Flexbox Alignment and Ordering

Covers justify-content, align-items, align-self, and order properties. These properties enable precise control over item distribution and stacking.

Lesson 4 • Flexbox Fundamentals

Introduces the flex container and flex item model, axes, and the flex-direction property. Flexbox solves one-dimensional alignment problems elegantly.

Lesson 1 • Responsive Typography and Spacing

Applies clamp, vw units, and fluid spacing scales to typography and layout gaps. Fluid type eliminates the need for multiple breakpoint overrides.

Lesson 2 • Media Query Syntax and Breakpoints

Teaches @media syntax, media types, and logical operators for defining breakpoints. Breakpoints should reflect content needs, not specific device sizes.

Lesson 3 • Responsive Design Principles

Covers fluid grids, flexible images, and the viewport meta tag as the three pillars of RWD. These principles guide every layout decision in this chapter.

Lesson 4 • Responsive Images and Media

Uses srcset, sizes, and the picture element to serve appropriately sized images. Correct image delivery reduces page weight on mobile networks.

Lesson 1 • Performance and Accessibility of Motion

Identifies composited properties, avoids layout-triggering animations, and respects prefers-reduced-motion. Responsible motion design serves all users.

Lesson 2 • CSS Transforms

Applies translate, rotate, scale, and skew transforms in 2D and 3D space. Transforms are GPU-accelerated and do not trigger layout reflow.

Lesson 3 • CSS Custom Properties

Defines and consumes CSS variables for colours, spacing, and typography tokens. Custom properties enable theme-wide changes from a single declaration.

Lesson 4 • CSS Keyframe Animations

Builds multi-step animations using @keyframes, animation-name, and animation properties. Keyframe animations run independently of user interaction.

Lesson 1 • Applying the CSS Design System

Implements custom properties, typography scale, and component styles across all pages. A shared design system ensures visual consistency site-wide.

Lesson 2 • Project Planning and Wireframing

Defines site goals, content inventory, and low-fidelity wireframes before writing code. Planning prevents structural rewrites and scope creep during development.

Lesson 3 • Responsive Layout Implementation

Applies Grid and Flexbox layouts with mobile-first media queries across all pages. Every page must render correctly from 320px to 1440px viewport widths.

Lesson 4 • Accessibility Audit and Final Polish

Runs automated and manual accessibility checks, fixes contrast issues, and adds motion preferences. The final site meets WCAG AA contrast and keyboard navigation standards.