HTML and CSS are the very first languages every web developer learns, and they're the fastest way to see your own code turn into something real on a screen. HTML gives a page its structure and meaning; CSS gives it color, layout, and personality. By the end of this track you'll be able to build and style a complete, responsive website from a blank file.
Beginner FriendlyNo Install Required to StartPortfolio Project Included4 Phases
Mentor TipType every example yourself instead of copy-pasting. Muscle memory for syntax is what makes the next phase feel easy.
The Roadmap
01
The BasicsLearn the skeleton of every web page
Start by understanding how a browser reads a document from top to bottom, and how tags describe meaning rather than just appearance.
01
Set up your workspaceInstall VS Code and a browser dev-tools habit — you'll live in both.
02
Learn the HTML skeleton<!DOCTYPE>, <html>, <head>, <body> — understand what each wrapper is for.
03
Master core elementsHeadings, paragraphs, lists, links, and images — the 90% you'll use daily.
04
Go semanticSwap generic <div>s for <header>, <nav>, <main>, <section>, and <footer>.
Practice ProjectBuild a one-page bio: your photo, a heading, two paragraphs about you, and a list of three goals — plain HTML, no styling yet.
02
Styling With CSSGive your HTML color, type, and rhythm
This phase is where pages start to feel designed. You'll learn how CSS selects elements and how the box model controls every bit of spacing on a page.
01
Selectors & specificityTarget elements by tag, class, and id — and understand which rule wins when two collide.
02
The box modelContent, padding, border, margin — the single most important CSS concept to internalize early.
03
Color & typographyPick a palette and pair a heading font with a body font, the way this site does.
04
Flexbox for one-dimensional layoutRow and column alignment, spacing, and wrapping — used constantly in real sites.
Practice ProjectStyle a recipe card: image, title, ingredient list, and a styled 'Get Cooking' button, laid out with Flexbox.
03
Layout & Responsive DesignMake it work on every screen
Most visitors to any site you build will be on a phone. This phase teaches you to design for small screens first, then scale up.
01
CSS Grid for two-dimensional layoutBuild multi-column page structures — the technique behind most modern homepages.
02
Media queriesChange your layout at defined breakpoints so content reflows instead of breaking.
03
Mobile-first workflowStyle the small screen first, then add rules for larger viewports.
04
Positioning & z-indexSticky navs, overlays, and layered elements without the layout falling apart.
Practice ProjectBuild a fully responsive portfolio landing page with a hero, a 3-card grid section, and a footer — tested at phone, tablet, and desktop widths.
04
Polish & Ship ItAnimation, accessibility, and going live
The final stretch turns a good page into a professional one, and gets it off your laptop and onto the real internet.
01
Transitions & micro-animationsHover states and smooth transitions that make an interface feel alive without being distracting.
02
Accessibility basicsAlt text, color contrast, and keyboard focus states — designing for every visitor.
03
Cross-browser & device testingCheck your site in at least two browsers and on a real phone before calling it done.
04
Deploy with GitHub PagesPush your project live with a free, real URL you can put on your CV.
Practice ProjectCombine everything into one multi-section personal website — home, about, and projects — deployed live with a public link.
Free Video Courses
Curated, highly-rated, and free — pick whichever teaching style matches how you learn best.