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 CompletedWebsite Process
A thoughtful and systematic approach that aligns user needs, business goals, and technical execution.
Lesson 03 / Folders CompletedUnderstanding File Paths
Understand how files are organized on a computer and how browsers find the resources a webpage needs.
Lesson 04 / HTML CompletedBasic HTML Structure and Elements
Learn the fundamental building blocks of an HTML document and the elements used to create simple web pages.
Lesson 05 / CSS Completed InteractiveIntro to CSS
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 CompletedStyling Text With CSS
Use CSS font and text layout properties to control the appearance, spacing, and alignment of text.
Lesson 07 / Typography CompletedCSS - Working with Fonts
Use fonts effectively in CSS, understand their design and performance impact, and apply best practices for selection and implementation.
Lesson 08 / Forms Completed InteractiveHTML Forms: Building Interactive User Interfaces
Use HTML form elements, input types, attributes, and accessibility practices to create user-friendly interactive interfaces.
Lesson 09 / Layout Completed InteractiveCSS Box Model and Layout Techniques
Understand how elements are visually rendered, how their dimensions are calculated, and how display, float, flexbox, and grid affect layout.
Lesson 10 / Layout Completed InteractiveFlexbox: Mastering One-Dimensional Layouts
Use CSS Flexbox to arrange items flexibly within a container for responsive, one-dimensional layouts.
Lesson 11 / Responsive Completed InteractiveResponsive Web Design
Build websites that adapt gracefully to different screen sizes and devices for a consistent user experience.
Lesson 12 / JavaScript 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 CompletedCrafting Captivating Hero Sections
Design responsive hero sections that make a strong first impression, communicate a clear message, and guide users toward action.
Lesson 14 / Layout CompletedCSS Positioning
Use CSS positioning to precisely control element placement, stacking, sticky headers, and layered components.
Lesson 15 / Motion CompletedCSS Transforms
Use CSS transforms and filters to create dynamic visual effects without disrupting page layout.
Lesson 16 / Motion Completed InteractiveCSS Transitions
Use CSS transitions to create smooth state changes, hover effects, menu movement, and polished interface feedback.
Lesson 17 / Motion Completed InteractiveCSS Animation
Use keyframes and animation properties to create smooth visual effects without JavaScript.
Lesson 18 / GSAP Completed InteractiveGSAP: Web Animation
Use GSAP for performant tweens, timelines, easing, plugins, and more sophisticated web animation.
Lesson 19 / Performance Completed InteractiveImage Optimization
Optimize image formats, sizes, compression, responsive delivery, and lazy loading for faster websites.
Lesson 20 / Structure CompletedPage Types and Template
Understand common page types and how templates create consistent, efficient web experiences.
Lesson 21 / Navigation Completed InteractiveBuilding Effective Site Navigation
Design clear, consistent, accessible navigation systems that help users move through a website with confidence.
Lesson 22 / Page Types CompletedItem Listing and Details
Design item listing pages and detail pages that help users compare, evaluate, and act.
Lesson 23 / Components Completed InteractiveMastering Carousels
Understand carousel structure, Slick setup, fading transitions, and a simple vanilla JavaScript carousel.
Lesson 24 / Accessibility Completed InteractiveWeb Accessibility
Apply accessibility principles, semantic HTML, keyboard support, contrast, ARIA, and testing practices to build inclusive websites.