HTML & CSS Web Design
Your guide to what you’ll learn, what you’ll build, and how it all connects to your Knowledge Pillars HCCS certification exam.
What You’ll Accomplish — Unit by Unit
This course builds your skills one layer at a time — first structure (HTML), then style (CSS), then a bonus taste of interactivity (JavaScript). Units 1–5 map one-to-one to the five exam objective domains; Unit 6 is a bonus capstone. Every unit ends with a hands-on project, so you’re always building something real.
HTML Fundamentals
Learn what HTML is, how browsers read it, and how to write a webpage from scratch — tags, nesting, attributes, headings, the document head, hyperlinks, and semantic structure.
Constructing Webpages with HTML
Fill your pages with real content: inline formatting, quotations, comments, ordered & unordered lists, images and media, links to pages and resources, and data tables.
CSS Fundamentals
Make pages look great with CSS — syntax and selectors, the box model, fonts and color, backgrounds and borders, icons, and the three ways to attach stylesheets.
Combining HTML with CSS
Wire HTML and CSS together — linking stylesheets, class & id selectors, inheritance and the cascade, layout, responsive design, Bootstrap, and debugging.
Advanced HTML/CSS Features
Professional polish — advanced data tables, forms, multimedia, APIs, accessibility & ARIA, advanced selectors, animation, CSS Grid & Flexbox, and reusable components.
JavaScript: Bringing It to Life
A friendly first taste of JavaScript — the DOM, the BOM, events and dynamic CSS, and form validation — ending in an interactive capstone that ties the whole course together.
About the Knowledge Pillars HCCS Exam
The HTML/CSS (HCCS) certification exam tests your knowledge across five objective domains. Units 1–5 of this course map one-to-one to those domains, so everything you study connects directly to the exam. The chart below shows exactly which objectives each lesson covers. Objectives marked NEW 26/27 are additions for the 2026–2027 school year. Unit 6 is a bonus JavaScript capstone and is not on the exam.
Lesson-to-Exam Objective Alignment
| Lesson | Topic | Exam Objectives Covered | KP Exam Domain |
|---|---|---|---|
| 🏠 Unit 1 — HTML Fundamentals (Exam Domain 1) | |||
| 1.1 | What Is HTML & How It Powers the Web | 1.1 Purpose of HTML5 & the web | Domain 1 |
| 1.2 | The HTML Document: DOCTYPE, head & body | 1.6 DOCTYPE declaration1.4 Meta info & head tag2.1 Basic HTML document structure | Domain 1 & 2 |
| 1.3 | Tags, Nesting & Attributes | 1.2 HTML tags & nesting1.8 Purpose of HTML attributes | Domain 1 |
| 1.4 | Headings, Paragraphs & Body Text | 1.3 Body, heading & paragraph tags2.12 <br>, <hr>, <pre> NEW 26/27 | Domain 1 & 2 |
| 1.5 | Meta Information & the Head Tag | 1.4 Meta info & the head tag | Domain 1 |
| 1.6 | Hyperlinks Done Right | 1.5 Proper use of hyperlinks2.7 Creating hyperlinks | Domain 1 & 2 |
| 1.7 | Semantic HTML Structure | 1.7 Semantic HTML tags | Domain 1 |
| Project 🏁 | Build a Webpage | 1.1–1.8 All Domain 1 objectives | Domain 1 |
| 📄 Unit 2 — Constructing Webpages with HTML (Exam Domain 2) | |||
| 2.1 | Structuring Content with HTML Elements | 2.1 Basic HTML document structure2.2 HTML elements for structure | Domain 2 |
| 2.2 | Inline Text Formatting | 2.3 Inline text formatting1.10 HTML entities & special characters NEW 26/27 | Domain 1 & 2 |
| 2.3 | Quoting Sources with Blockquote | 2.4 Blockquote for external sources | Domain 2 |
| 2.4 | HTML Comments for Clean Code | 2.5 Adding comments to HTML1.9 HTML comments NEW 26/27 | Domain 1 & 2 |
| 2.5 | Ordered & Unordered Lists | 2.10 Ordered & unordered lists | Domain 2 |
| 2.6 | Adding Images & Media | 2.6 Adding images using <img> & src | Domain 2 |
| 2.7 | Linking to Pages, Email & Resources | 2.7 Creating hyperlinks2.8 mailto:, tel:, download NEW 26/272.9 Relative vs. absolute paths NEW 26/27 | Domain 2 |
| 2.8 | Building HTML Tables | 2.11 HTML table structure | Domain 2 |
| Project 🏁 | Content-Rich Page | 2.1–2.12 All Domain 2 objectives | Domain 2 |
| 🎨 Unit 3 — CSS Fundamentals (Exam Domain 3) | |||
| 3.1 | Why CSS? Purpose & Benefits | 3.1 Purpose & benefits of CSS | Domain 3 |
| 3.2 | CSS Syntax, Selectors & Properties | 3.2 CSS syntax, selectors & declarations | Domain 3 |
| 3.3 | The CSS Box Model | 3.3 CSS box model | Domain 3 |
| 3.4 | Fonts, Text Styling & Color | 3.4 Font styling, colors & font-families3.6 Enhancing text & appearance | Domain 3 |
| 3.5 | Backgrounds, Borders, Margins & Padding | 3.5 Borders, backgrounds, margins & padding3.6 Enhancing appearance with CSS | Domain 3 |
| 3.6 | CSS Icons (Local & External) | 3.7 CSS icons (local & external) | Domain 3 |
| 3.7 | Inline vs Internal vs External Stylesheets | 3.8 Inline / internal / external CSS | Domain 3 |
| Project 🏁 | Style a Page with CSS | 3.1–3.8 All Domain 3 objectives | Domain 3 |
| 🔗 Unit 4 — Combining HTML with CSS (Exam Domain 4) | |||
| 4.1 | Linking Stylesheets to HTML | 4.1 Linking CSS to HTML documents1.11 File organization & paths NEW 26/27 | Domain 4 (+1) |
| 4.2 | Class & ID Selectors | 4.2 Class & id selectors | Domain 4 |
| 4.3 | Inheritance & the Cascade | 4.3 CSS style inheritance | Domain 4 |
| 4.4 | Positioning & the Display Property | 4.4 Box model — positioning & sizing4.5 CSS display property & layout | Domain 4 |
| 4.5 | Responsive Design | 4.6 Responsive designs for all screens | Domain 4 |
| 4.6 | CSS Frameworks: Intro to Bootstrap | 4.7 CSS frameworks & Bootstrap | Domain 4 |
| 4.7 | Debugging & Cross-Browser Troubleshooting | 4.8 Cross-browser debugging1.12 HTML validation & W3C Validator NEW 26/275.12 Browser developer tools NEW 26/275.11 Performance optimization NEW 26/27 | Domain 4 (+1, 5) |
| 4.8 🏁 | Mobile-Friendly Personal Webpage | 4.1–4.8 All Domain 4 objectives | Domain 4 |
| 🚀 Unit 5 — Advanced HTML/CSS Features (Exam Domain 5) | |||
| 5.1 | Advanced Data Tables | 5.1 HTML tables for organizing data | Domain 5 |
| 5.2 | Creating Forms | 5.2 HTML forms & user input | Domain 5 |
| 5.3 | HTML5 Multimedia: Audio & Video | 5.3 HTML5 multimedia elements | Domain 5 |
| 5.4 | HTML APIs (Google Maps Embed) | 5.4 HTML APIs & web services | Domain 5 |
| 5.5 | Accessibility & ARIA Best Practices | 5.5 Accessibility with ARIA attributes1.13 Accessibility basics NEW 26/27 | Domain 5 (+1) |
| 5.6 | Advanced Selectors & Pseudo-classes | 5.6 Advanced CSS selectors & pseudo-classes | Domain 5 |
| 5.7 | CSS Transitions & Animations | 5.7 CSS3 animations & transitions | Domain 5 |
| 5.8 | CSS Grid & Flexbox | 5.8 CSS Grid & Flexbox for layout | Domain 5 |
| 5.9 | Reusable Components: Custom Elements & Shadow DOM | 5.9 Custom elements & DOM interaction | Domain 5 |
| Project 🏁 | Advanced Feature Page | 5.1–5.9 All Domain 5 objectives | Domain 5 |
| ⚡ Unit 6 — JavaScript: Bringing It to Life (Bonus — not on the exam) (Bonus) | |||
| 6.1 | What Is JavaScript & How It Works with HTML/CSS | Bonus — not assessed on the exam | Bonus |
| 6.2 | The DOM: Reading & Changing HTML with JS | 5.9 Custom elements & DOM (reinforced) | Bonus (↔5) |
| 6.3 | The BOM: Interacting with the Browser | Bonus — not assessed on the exam | Bonus |
| 6.4 | Events & Changing CSS with JavaScript | Bonus — not assessed on the exam | Bonus |
| 6.5 | Form Validation with JavaScript | 5.2 HTML forms — validation (reinforced) | Bonus (↔5) |
| 6.6 🏁 | Capstone: Enhanced & Interactive Webpage | 5.10 Web hosting & deployment NEW 26/27Combines HTML, CSS & JavaScript | Bonus (+5) |
Course Content
