Lessons
Course lessons
A guided path through web foundations, accessibility, UX, and systems thinking.
Showing all lessons.
Progress saves in this browser.
Developer Environment Setup
A step-by-step guide to setting up GitHub, GitHub Desktop, Visual Studio Code, the starter repository, and GitHub Pages.
Lesson 02 / Planning Core CompletedWebsite Process
A practical planning process that helps you define the audience, goals, content, structure, and first build steps for a website.
Lesson 03 / Folders Core Completed InteractiveFile Paths
Understand how files are organized on a computer and how browsers find the resources a webpage needs.
Lesson 04 / HTML Core CompletedHTML Structure and Elements
Learn the fundamental building blocks of an HTML document and the elements used to create simple web pages.
Lesson 05 / CSS Core Completed InteractiveCSS Basics
Learn how CSS works with HTML and JavaScript, where styles can live, and how selectors, declarations, the cascade, and inheritance shape a site.
Lesson 06 / Typography Core CompletedCSS Text Styling
Use CSS font and text layout properties to control the appearance, spacing, and alignment of text.
Lesson 07 / Typography Core Completed InteractiveCSS Fonts
Use fonts effectively in CSS, understand their design and performance impact, and apply best practices for selection and implementation.
Lesson 08 / Forms Core Completed InteractiveHTML Forms
Use HTML form elements, input types, attributes, and accessibility practices to create user-friendly interactive interfaces.
Lesson 09 / Layout Core Completed InteractiveBox Model and Layout
Understand how elements are visually rendered, how their dimensions are calculated, and how display, float, flexbox, and grid affect layout.
Lesson 10 / Layout Core Completed InteractiveFlexbox
Use CSS Flexbox to arrange items flexibly within a container for responsive, one-dimensional layouts.
Lesson 11 / Responsive Core Completed InteractiveResponsive Web Design
Build websites that adapt gracefully to different screen sizes and devices for a consistent user experience.
Lesson 12 / JavaScript Core Completed InteractiveJavaScript in the DOM
Use JavaScript and the Document Object Model to select elements, change content, respond to events, and create dynamic interfaces.
Lesson 13 / Design Core CompletedHero Sections
Design responsive hero sections that make a strong first impression, communicate a clear message, and guide users toward action.
Lesson 14 / Layout Core Completed InteractiveCSS Positioning
Use CSS positioning to precisely control element placement, stacking, sticky headers, and layered components.
Lesson 15 / Motion Core Completed InteractiveCSS Transforms and Filters
Use CSS transforms and filters to move, rotate, scale, tilt, and visually adjust elements without disrupting page layout.
Lesson 16 / Motion Core Completed InteractiveCSS Transitions
Use CSS transitions to animate changes between interface states with smooth, accessible feedback.
Lesson 17 / Motion Core Completed InteractiveCSS Animation
Use `@keyframes` and animation properties to create named motion sequences, loading states, and purposeful visual feedback.
Lesson 18 / GSAP Stretch Completed InteractiveGSAP Web Animation
Use GSAP for controlled JavaScript animation, sequenced timelines, staggered motion, and complex interaction patterns.
Lesson 19 / Performance Core Completed InteractiveImage Optimization
Optimize image formats, dimensions, compression, responsive delivery, accessibility, and loading behavior for faster websites.
Lesson 20 / Structure Core Completed InteractivePage Types and Templates
Plan common page types, reusable templates, and content hierarchy so websites feel consistent and purposeful.
Lesson 21 / Navigation Core Completed InteractiveSite Navigation
Design clear, consistent, accessible navigation systems that help users understand where they are and where they can go next.
Lesson 22 / Page Types Core CompletedItem Listing and Details
Design listing pages and detail pages that help users browse, compare, evaluate, and take action.
Lesson 23 / Components Stretch Completed InteractiveCarousels
Design carousels carefully, prioritize manual controls, and build accessible slide navigation when a carousel is truly useful.
Lesson 24 / Accessibility Core Completed InteractiveWeb Accessibility
Run a practical final accessibility pass with semantic HTML, keyboard testing, contrast checks, form labels, useful alt text, and WCAG 2.2 AA guidance.
Lesson 25 / Debugging Studio Support Completed InteractiveDebugging Web Projects
Use a calm debugging playbook to find and fix broken HTML, CSS, JavaScript, images, links, responsive layouts, and published-site problems.
Lesson 26 / DevTools Studio Support Completed InteractiveDevTools for Designers
Use browser DevTools as a live design microscope to inspect layout, spacing, typography, responsive behavior, accessibility, assets, and performance clues.
Lesson 27 / Layout Core Completed InteractiveCSS Grid
Use CSS Grid to build two-dimensional layouts, card grids, page regions, galleries, feature layouts, and responsive structures.
Lesson 28 / Systems Studio Support Completed InteractiveDesign Systems
Create a mini design system with reusable colors, spacing, typography, buttons, cards, forms, navigation, states, and accessibility rules for a consistent project.
Lesson 29 / Planning Studio Support CompletedProject Planning
Create a pre-build planning packet with audience goals, project goals, scope, sitemap, content inventory, navigation plan, and low-fidelity wireframes.
Lesson 30 / Launch Studio Support CompletedDeployment QA
Use a deployment-day checklist to commit, push, verify GitHub Pages, test the live URL, and catch links, paths, mobile, accessibility, metadata, and performance issues.
Lesson 31 / Findability Reference CompletedSEO and Metadata
Use page titles, descriptions, headings, semantic HTML, readable URLs, image text, and social metadata to make pages easier to understand and share.
Lesson 32 / Performance Studio Support Completed InteractivePerformance Basics
Improve how fast a site feels by optimizing images, fonts, scripts, embeds, layout stability, and the amount of work the browser must do.
Lesson 33 / Interaction Studio Support Completed InteractiveUI States and Feedback
Design clear default, hover, focus, active, current, loading, empty, error, success, and disabled states so interfaces communicate what is happening.
Lesson 34 / Capstone Studio Support CompletedPortfolio Polish
Refine a final web project for presentation with stronger hierarchy, consistency, accessibility, responsiveness, performance, storytelling, and live-demo confidence.