HTML5 and CSS3 Course for Beginners

Lesson 1 • Writing and Saving Your First Web Page

Guides students through creating, saving, and opening an HTML file in a browser. Reinforces the full authoring workflow introduced in this chapter.

Lesson 2 • How the Web Works

Covers the client-server model, HTTP requests, and browser rendering. Grounds all subsequent HTML and CSS work in real browser behaviour.

Lesson 3 • Anatomy of an HTML5 Document

Explains the DOCTYPE declaration, html, head, and body elements. Students write a minimal valid page that passes HTML5 validation.

Lesson 4 • Setting Up Your Development Environment

Installs and configures a code editor, file manager, and local browser preview. Ensures every student has a consistent workspace before writing code.

Lesson 1 • HTML5 Semantic Sectioning Elements

Introduces header, nav, main, article, section, aside, and footer. Semantic structure improves accessibility and prepares pages for CSS layout in Chapter 4.

Lesson 2 • Images and Multimedia Elements

Covers img, figure, figcaption, audio, and video elements with attributes. Accessible alt text and media formats are introduced as professional standards.

Lesson 3 • Hyperlinks and Navigation

Explains the anchor element, href, target, and relative vs. absolute URLs. Link skills are prerequisite for multi-page site projects in later chapters.

Lesson 4 • Lists: Ordered, Unordered, and Description

Teaches ol, ul, li, dl, dt, and dd elements with correct nesting. Lists appear in navigation menus and content structures used throughout the course.

Lesson 1 • The CSS Box Model

Explains content, padding, border, and margin as the foundation of element sizing. Box model mastery is required before tackling layout techniques in Chapter 4.

Lesson 2 • Selectors, Properties, and Values

Covers element, class, ID, and attribute selectors with correct syntax. Selector precision directly controls which elements receive styles throughout the course.

Lesson 3 • How CSS Works with HTML

Explains inline, internal, and external stylesheets and the cascade order. External stylesheets become the standard method used for all remaining chapters.

Lesson 4 • Colour and Background Styling

Teaches colour keywords, hex, RGB, and HSL values for text and backgrounds. Colour consistency skills apply directly to the design projects in later chapters.

Lesson 1 • Normal Flow and Display Properties

Covers block, inline, and inline-block display values and document flow. Understanding normal flow is essential before overriding it with Flexbox or Grid.

Lesson 2 • Two-Dimensional Layouts with CSS Grid

Introduces grid-template-columns, rows, areas, and gap for page-level layouts. Grid and Flexbox together cover the full range of modern layout requirements.

Lesson 3 • Positioning Elements with CSS

Teaches static, relative, absolute, fixed, and sticky positioning with offsets. Positioning complements Flexbox and Grid for overlays and fixed navigation bars.

Lesson 4 • Flexible Layouts with Flexbox

Covers flex container and flex item properties for one-dimensional layouts. Flexbox is used for navigation bars, card rows, and form layouts throughout the course.

Lesson 1 • Labels, Placeholders, and Accessibility

Explains label association, placeholder text, and ARIA attributes for screen readers. Accessible forms are a professional requirement covered throughout this section.

Lesson 2 • HTML5 Built-In Form Validation

Covers required, pattern, min, max, and minlength attributes for client-side validation. Built-in validation reduces errors before data reaches a server.

Lesson 3 • Form Structure and Core Attributes

Covers the form element, action, method, and enctype attributes. Correct form structure is required before adding input elements or client-side validation.

Lesson 4 • Input Types and Form Controls

Teaches text, email, password, number, date, checkbox, radio, and select inputs. HTML5 input types provide built-in validation and mobile keyboard optimisation.

Lesson 1 • CSS Transforms

Covers translate, rotate, scale, and skew transforms in 2D and 3D space. Transforms are combined with transitions to create interactive hover effects.

Lesson 2 • CSS3 Gradients

Teaches linear-gradient, radial-gradient, and conic-gradient for backgrounds and overlays. Gradients replace image assets and reduce page load time.

Lesson 3 • Shadows and Border Effects

Covers box-shadow, text-shadow, border-radius, and outline properties. These effects add depth and polish to cards, buttons, and form elements.

Lesson 4 • CSS Animations with Keyframes

Introduces @keyframes, animation-name, iteration-count, and direction for looping effects. Animations extend transitions for loading indicators and attention-drawing UI elements.

Lesson 1 • Colour Contrast and Visual Accessibility

Applies contrast ratio requirements to text, UI components, and graphical elements. Colour contrast tools are used to audit and fix the student project page.

Lesson 2 • On-Page SEO with HTML5

Covers title, meta description, canonical links, Open Graph tags, and structured heading hierarchy. SEO markup builds on semantic HTML skills from Chapters 2 and 3.

Lesson 3 • Keyboard Navigation and Focus Management

Teaches tabindex, focus styles, skip links, and logical tab order for keyboard users. Keyboard accessibility is tested with browser-only navigation throughout this section.

Lesson 4 • Web Accessibility Principles

Introduces the four core accessibility principles: perceivable, operable, understandable, and robust. These principles guide every markup and styling decision in this chapter.

Lesson 1 • Planning and Wireframing the Site

Defines site goals, page structure, content hierarchy, and low-fidelity wireframes. Planning before coding reduces rework and reinforces professional workflow habits.

Lesson 2 • Adding Visual Effects and Interactivity

Integrates transitions, animations, and transforms from Chapter 6 into navigation and UI components. Effects are tested for performance and reduced-motion compliance.

Lesson 3 • Building the HTML Structure

Constructs semantic HTML for all pages using elements from Chapters 2 and 5. Consistent structure across pages ensures CSS reuse and maintainability.

Lesson 4 • Applying CSS Layout and Styling

Implements the full visual design using Flexbox, Grid, typography, and colour from Chapters 3 and 4. A single external stylesheet governs all pages for consistency.