Learn how to build modern websites from the ground up with HTML & CSS for Beginners.
This course is designed for complete beginners and does not require any previous coding experience. You will start by learning how websites work and how HTML and CSS are used to create and style webpages. Step by step, you will build the practical skills needed to create well-structured, accessible, and responsive websites.
You will learn how to work with text, links, images, multimedia, tables, forms, colours, typography, spacing, layouts, Flexbox, CSS Grid, and responsive design. You will also learn important website-development skills such as accessibility, testing, validation, performance basics, and publishing a website online.
The course includes 12 modules, 72 lessons, and 5 practical assessed projects, allowing you to apply what you learn to realistic website-building tasks.
During the course, you will create projects including a personal website, an educational article, an accessible form, a responsive product landing page, and a complete multipage business website.
By the end of the course, you will have the foundation needed to independently build, test, and publish clean, semantic, accessible, and responsive websites using HTML and CSS.
No previous coding experience is required.
Curriculum
- 12 Sections
- 72 Lessons
- Lifetime
Expand all sectionsCollapse all sections
- 1. How Websites Work and Workspace Setup7
- 1.11.1 Websites, Webpages, Web Applications, and Static versus Dynamic Content
- 1.21.2 FrontEnd, BackEnd, Databases, APIs
- 1.31.3 Browsers, Rendering, DOM
- 1.41.4 Clients, Servers, Domains, HTTP
- 1.51.5 Editor, Folders, Filenames
- 1.61.6 First Page, Local Server, DevTools
- 1.7Module 1 Quiz – How Websites Work and Workspace Setup3 Questions
- 2. HTML Syntax and Document Structure7
- 2.12.1 Elements, Tags, Attributes, Values, Void Elements, and Nesting
- 2.22.2 Indentation, Whitespace, Character References, Comments, and Readable Source
- 2.32.3 The Doctype, `html`, `head`, and `body`
- 2.42.4 Character Encoding, Document Language, Text Direction, and Viewport Metadata
- 2.52.5 Page Titles, Descriptions, Favicons, Stylesheet Links, and Essential Head Content
- 2.62.6 HTML Validation, Nesting Errors, Obsolete Markup, and a Correction Workflow
- 2.7Module 2 Quiz – HTML Syntax and Document Structure3 Questions
- 3. Text, Lists, and Semantic Content7
- 3.13.1 Headings, Paragraphs, Thematic Breaks, and Content Hierarchy
- 3.23.2 Meaningful Inline Text
- 3.33.3 Ordered, Unordered, Description, and Nested Lists
- 3.43.4 Quotations, Citations, Abbreviations, Dates, and Contact Information
- 3.53.5 Code, Preformatted Text, User Input, Sample Output, and Variables
- 3.63.6 Semantic Page Regions, Generic Containers, and Global Attributes
- 3.7Module 3 Quiz — Text, Lists, and Semantic Content3 Questions
- 4. Links, Navigation, and Multipage Websites7
- 4.14.1 Anchors, Destinations, Fragments, and Meaningful Link Text
- 4.24.2 Absolute, Relative, Root-Relative, and Parent-Directory Paths
- 4.34.3 Linking Pages, Folders, Files, and Sections
- 4.44.4 Email, Telephone, Download, and External Links
- 4.54.5 Primary and Secondary Navigation, Breadcrumbs, Skip Links, and the Current Page
- 4.64.6 Building and Testing a Multipage Structure
- 4.7Module 4 Quiz – Links, Navigation, and Multipage Websites3 Questions
- 5. Images, Graphics, Audio, Video, and Embeds7
- 5.15.1 Raster and Vector Graphics and Web Image Formats
- 5.25.2 The `img` Element, Source, Alternative Text, and Dimensions
- 5.35.3 Alternative Text for Different Image Purposes
- 5.45.4 Figures, Image Links, Licensing, and Attribution
- 5.55.5 Responsive Images with `srcset`, `sizes`, and `picture`; Basic SVG Use
- 5.65.6 Accessible Audio, Video, Text Tracks, Iframes, and Privacy
- 5.7Module 5 Quiz – Images, Graphics, Audio, Video, and Embeds3 Questions
- 6. Tables and Forms7
- 6.16.1 Recognising Tabular Data and Avoiding Layout Tables
- 6.26.2 Rows, Cells, Headers, Captions, Table Sections, and Scope
- 6.36.3 Complex and Large Tables: Spans, Readability, and Responsive Testing
- 6.46.4 Form Purpose, Submission, GET, POST, Labels, and Buttons
- 6.56.5 Text Fields, Specialised Inputs, Textareas, Lists, Choices, and Files
- 6.66.6 Groups, Input Assistance, Validation, Errors, Privacy, and the Server Boundary
- 6.7Module 6 Quiz – Tables and Forms3 Questions
- 7. CSS Syntax, Selectors, and the Cascade7
- 7.17.1 CSS Rules, Selectors, Declarations, Properties, Values, and Comments
- 7.27.2 External, Internal, and Inline CSS
- 7.37.3 Type, Class, ID, Universal, Grouped, Combinator, and Attribute Selectors
- 7.47.4 Pseudo-classes, Pseudo-elements, Inheritance, and Browser Default Styles
- 7.57.5 Cascade Order, Specificity, Source Order, IDs, and `!important`
- 7.67.6 Inspecting Computed Styles, Finding Conflicts, and Writing Readable Selectors
- 7.7Module 7 Quiz – CSS Syntax, Selectors, and the Cascade3 Questions
- 8. Colours, Units, Sizing, and the Box Model7
- 8.18.1 CSS Value Types, Keywords, Numbers, Strings, URLs, Percentages, and Invalid Declarations
- 8.28.2 Pixels, Percentages, `em`, `rem`, `ch`, and Viewport Units
- 8.38.3 Hex, RGB, HSL, Alpha, `currentColor`, and CSS Math Functions
- 8.48.4 Content, Padding, Borders, Margins, Collapse, `gap`, and `box-sizing`
- 8.58.5 Width, Height, Intrinsic Sizing, `aspect-ratio`, and Object Fitting
- 8.68.6 Overflow, Scrolling, Clipping, Custom Properties, and Box Debugging
- 8.7Module 8 Quiz – Colours, Units, Sizing, and the Box Model3 Questions
- 9. Typography and Visual Styling7
- 9.19.1 Typeface Categories, System Font Stacks, Fallbacks, and Responsible Selection
- 9.29.2 Font Family, Size, Weight, Style, Line Height, Measure, Spacing, Alignment, and Rhythm
- 9.39.3 Web Fonts, `@font-face`, WOFF2, Fallbacks, and `font-display`
- 9.49.4 Backgrounds, Borders, Outlines, Radii, Separators, and Focus Rings
- 9.59.5 Linear and Radial Gradients, Shadows, Opacity, and Restrained Effects
- 9.69.6 Styling Lists, Tables, Buttons, and Form Controls Without Removing Usability
- 9.7Module 9 Quiz – Typography and Visual Styling3 Questions
- 10. Flexbox and CSS Grid7
- 10.110.1 Normal Flow, Block and Inline Behaviour, Display Roles, Wrappers, and Content-Driven Layout
- 10.210.2 Flex Containers, Items, Axes, Direction, and Wrapping
- 10.310.3 Flex Basis, Growth, Shrinkage, Gaps, Alignment, Auto Margins, and Common Patterns
- 10.410.4 Grid Containers, Lines, Tracks, Cells, Areas, and Explicit and Implicit Grids
- 10.510.5 fr, repeat(), minmax(), Automatic Placement, and Introductory Responsive Grids
- 10.610.6 Choosing Normal Flow, Flexbox, or Grid; Introductory Positioning and z-index
- 10.7Module 10 Quiz – Flexbox and CSS Grid3 Questions
- 11. Responsive web design7
- 11.111.1 Viewports, Mobile Browser Behaviour, Mobile-First Design, and Responsive versus Adaptive Layouts
- 11.211.2 Fluid Containers, Flexible Media, Intrinsic Design, and Content-Based Breakpoints
- 11.311.3 Media Queries, Range Syntax, Orientation, Pointer and Hover Capabilities, and Short Screens
- 11.411.4 Fluid Typography and Spacing with Relative Units and CSS Functions
- 11.511.5 Responsive Navigation, Cards, Tables, Forms, Videos, and Embeds
- 11.611.6 Testing Narrow and Wide Viewports, Zoom, Reflow, Touch Targets, Source Order, and Real Content Extremes
- 11.7Module 11 Quiz – Responsive Web Design3 Questions
- 12. Accessibility, testing, performance basics, and publishing7
- 12.112.1 Accessibility Principles, Semantic HTML, Landmarks, Headings, Names, and Descriptions
- 12.212.2 Keyboard Navigation, Focus Order, Visible Focus, and Component Auditing
- 12.312.3 Contrast, Colour Independence, Zoom, Reflow, Orientation, Target Size, and User Preferences
- 12.412.4 Validation, Manual Checks, Automated Tools, Screen Readers, and Cross-Browser Testing
- 12.512.5 Image, Font, Stylesheet, and Layout-Shift Performance Basics
- 12.612.6 Hosting, Domains, HTTPS, Deployment, 404 Pages, Release Checks, and a README
- 12.7Module 12 Quiz – Accessibility, Testing, Performance, and Publishing3 Questions
