en
CBO • Registration Pending Bulenga, Wakiso District, Uganda
"Where Talent Grows Together" Join Community
All Free Courses & Fields
Engineering • Step-by-Step Curriculum

HTML & CSS Mastery

Go deep into semantic HTML5, accessibility, CSS Box Model, Flexbox, CSS Grid, custom properties, and responsive animations.

Track Progress 0/6 Steps (0%)
Sign in to save progress, pass the Mastery Test, and earn a verified MESHLUMA Certificate. Practice Mastery Test (5 Questions)
Practical Equipment & Study Requirements
What laptop, phone, internet, and free tools you need for this field—plus cloud options if your device is low-spec.
Phone Start + Any 4GB+ Laptop
Laptop / PC Specs

Minimum: Any 4GB RAM laptop or Chromebook.

Recommended: 8GB RAM laptop with Chrome/Firefox DevTools.

Free Cloud Option: freeCodeCamp, CodePen, and MDN Playground work 100% in browser.

Phone & Internet

Phone-Friendly Start

Practice Steps 1–2 on phone in freeCodeCamp/CodePen; use a laptop for full multi-page layouts.

Internet: 1–3 Mbps.

Free Software & Hardware Kit
VS Code Chrome / Firefox DevTools CodePen Free

Hardware / Kit: None required.

Best Way to Study This Field Easily: Finish each study step and its hands-on milestone first—your Mastery Test unlocks automatically at the end to qualify for your certificate.
All Levels (1–6) Beginner Intermediate Advanced Expert
Beginner Stage

Zero prior experience required — core concepts & first hands-on builds.

Step 1 beginner ~8 hrs

HTML5 Document Structure, Links, Media & Semantics

Build clean, well-structured webpages that search engines and screen readers love.

What You Will Learn
  • Headings, landmarks & lists
  • Images, SVG & video embeds
Free Public Courses & Official Docs
MDN Learn HTML
Public Free Resource • Free Course / Docs
Open Free
Hands-On Milestone Project: Build a multi-section semantic biography webpage.
Step 2 beginner ~6 hrs

HTML Forms, Tables & Built-In Validation

Create accessible forms with labels, fieldsets, input types, and native validation.

What You Will Learn
  • Form accessibility & labels
  • Pattern, required & ARIA hints
Free Public Courses & Official Docs
web.dev Learn Forms
Public Free Resource • Free Course / Docs
Open Free
Hands-On Milestone Project: Build a clean community registration form with native HTML5 validation.
Intermediate Stage

Build real multi-part projects, tooling fluency, and problem-solving speed.

Step 3 intermediate ~10 hrs

CSS Box Model, Selectors, Specificity & Variables

Master cascade rules, custom properties (--vars), and predictable sizing with border-box.

What You Will Learn
  • Specificity & inheritance
  • CSS Custom Properties & calc()
Free Public Courses & Official Docs
web.dev Learn CSS
Public Free Resource • Free Course / Docs
Open Free
Hands-On Milestone Project: Create a reusable light/dark theme token stylesheet.
Step 4 intermediate ~12 hrs

Flexbox & CSS Grid Responsive Layouts

Build complex navbars, card grids, and magazine layouts without float hacks.

What You Will Learn
  • Flexbox alignment & wrapping
  • CSS Grid auto-fit & template areas
Free Public Courses & Official Docs
CSS-Tricks Complete Guide to Grid
Public Free Resource • Free Course / Docs
Open Free
Hands-On Milestone Project: Build a responsive 3-column dashboard & portfolio grid.
Advanced Stage

Production patterns, architecture, automation, and security rigor.

Step 5 advanced ~10 hrs

Responsive Typography, clamp() & Mobile-First Media Queries

Adapt layouts fluidly across 320px phones to 4K monitors.

What You Will Learn
  • Fluid typography with clamp()
  • Container queries & viewport units
Free Public Courses & Official Docs
freeCodeCamp Responsive Web Design
Public Free Resource • Free Course / Docs
Open Free
Hands-On Milestone Project: Make an entire 4-page site zero-overflow at 320px, 768px, and 1440px.
Expert Stage

Scale, observability, testing, leadership, and real-world deployment.

Step 6 expert ~8 hrs

CSS Transitions, Keyframes & Reduced-Motion Accessibility

Add subtle, 60fps GPU-composited motion while respecting prefers-reduced-motion.

What You Will Learn
  • Transform & opacity animations
  • @media (prefers-reduced-motion)
Free Public Courses & Official Docs
web.dev CSS Animations
Public Free Resource • Free Course / Docs
Open Free
Hands-On Milestone Project: Animate a responsive navbar drawer and hero card with accessible reduced-motion fallbacks.
Field Mastery Assessment

HTML & CSS Mastery — Practical Mastery Assessment

Score 70% or higher (5 questions) to complete this Foundational Skill Badge track.

Sign In & Complete Study Steps to Unlock Test

Tests are given after studying all 6 steps to prove real practical mastery.

Sign In to Track Study & Unlock Test
Explore Other Technology Fields
Software Development & Web Engineering Artificial Intelligence, ML & Data Science Cybersecurity & Networking Hardware, IoT & Robotics Cloud Computing, DevOps & SRE UI/UX Design & Digital Product Engineering Mobile App Development Digital Literacy, Productivity & Tech Foundations Ethical Hacking & Penetration Testing Digital & Online Marketing Sales, Business Development & Client Acquisition Kids & Teens Coding, Robotics & Digital Creativity Leadership & Personal Development Lean & Agile Methodologies Git, GitHub & GitLab Workflows Python Programming Object-Oriented Development (OOP) Human-Centered Design (HCD) Lean Startup Methodologies Django & Django Templating Language (DTL) Application & Software Security (AppSec) APIs & Microservices Architecture Choosing Your Tech Stack & System Architecture Project Planning, Roadmaps & Software Structuring UI Layouts, Page Grids & Responsive Design Systems Laravel & Laravel Herd Full-Stack Engineering AI Video Making with Google Flow, Gemini & Long-Form (>1 Min) Editing AI Image Generation & Logo Design (ChatGPT, Gemini & Vector Branding) AI Tools & Coding with AI Setup (Everything Before Coding & Debugging)