Website Designer Course

Lesson 1 • Essential Design Tools Overview

Surveys industry-standard tools for wireframing, prototyping, and asset creation. Students select appropriate tools for each phase of the design process.

Lesson 2 • Design Workflow and Process

Introduces discovery, ideation, design, and handoff stages. Establishes a repeatable process students apply throughout the course.

Lesson 3 • How the Web Works

Covers browsers, servers, DNS, and HTTP to explain how pages are requested and delivered. Grounds all future design decisions in technical reality.

Lesson 1 • Color Theory for Web

Teaches hue, saturation, contrast, and color harmony models. Students build accessible palettes that reinforce brand identity and guide user attention.

Lesson 2 • Typography Fundamentals

Covers typeface classification, hierarchy, and readability on screens. Students set type that communicates clearly across device sizes.

Lesson 3 • Layout and Composition

Applies grid systems, alignment, and white space to organize page content. Students produce balanced, scannable layouts using proven compositional rules.

Lesson 4 • Imagery and Iconography

Guides selection, cropping, and styling of photos, illustrations, and icons. Students match visual assets to brand tone and functional context.

Lesson 1 • Text, Links, and Lists

Covers paragraphs, inline elements, anchor tags, and list types. Students mark up rich text content correctly for both display and assistive technology.

Lesson 2 • HTML Document Anatomy

Explains doctype, head, and body elements and their roles. Students write valid HTML documents from scratch using correct nesting and syntax.

Lesson 3 • Images, Media, and Embeds

Teaches img, figure, video, audio, and iframe elements with proper attributes. Students embed media accessibly using alt text and captions.

Lesson 4 • Forms and Input Elements

Builds accessible forms using labels, fieldsets, and input types. Students create contact and data-entry forms with correct semantic structure.

Lesson 1 • CSS Syntax and the Cascade

Explains selectors, properties, specificity, and inheritance. Students debug style conflicts by understanding how the cascade resolves competing rules.

Lesson 2 • Box Model and Spacing

Covers margin, border, padding, and content dimensions. Students control spacing precisely and avoid common layout bugs caused by box model misunderstandings.

Lesson 3 • CSS Grid for Two-Dimensional Layouts

Introduces grid tracks, areas, and placement for complex page layouts. Students recreate multi-column designs using Grid without relying on floats.

Lesson 4 • Flexbox for One-Dimensional Layouts

Teaches flex container and item properties for row and column arrangements. Students build navigation bars, card rows, and centered layouts with Flexbox.

Lesson 1 • Testing and Debugging Responsiveness

Uses browser developer tools and real devices to find and fix layout issues. Students build a testing checklist applied to every project going forward.

Lesson 2 • Fluid Grids and Flexible Images

Converts fixed-pixel layouts to percentage-based and fluid units. Students use relative units and max-width to prevent overflow on any screen.

Lesson 3 • Media Queries and Breakpoints

Teaches min-width and max-width queries and how to choose breakpoints. Students write media queries that respond to content needs rather than device names.

Lesson 4 • Mobile-First Design Strategy

Establishes the mobile-first philosophy and its performance benefits. Students restructure existing designs to start from the smallest viewport and scale up.

Lesson 1 • Information Architecture

Covers site maps, card sorting, and navigation labeling to organize content logically. Students create an IA that reduces cognitive load and supports findability.

Lesson 2 • Wireframing and Low-Fidelity Prototyping

Produces sketches and digital wireframes to explore layout before visual design. Students iterate rapidly based on peer and stakeholder feedback.

Lesson 3 • User Personas and Journey Maps

Builds evidence-based personas and maps user journeys to identify pain points. Students use these artifacts to justify design decisions throughout a project.

Lesson 4 • Usability Testing Fundamentals

Plans and conducts moderated usability tests to validate design decisions. Students analyze findings and prioritize fixes using severity ratings.

Lesson 1 • Maintaining and Scaling the System

Covers versioning, contribution workflows, and governance for growing design systems. Students establish processes that keep the system consistent as teams expand.

Lesson 2 • Component Documentation and Handoff

Writes usage guidelines, do-and-don't examples, and code annotations for each component. Students prepare handoff files that developers can implement without ambiguity.

Lesson 3 • Core UI Component Patterns

Designs buttons, cards, modals, alerts, and form controls to consistent standards. Students document component states including default, hover, focus, and disabled.

Lesson 4 • Design Tokens and Style Guides

Creates named tokens for color, spacing, and typography that drive the entire system. Students produce a style guide that serves as the single source of truth.

Lesson 1 • Performance Measurement and Core Web Vitals

Uses performance auditing tools to measure loading, interactivity, and visual stability. Students interpret scores and prioritize fixes that most impact user experience.

Lesson 2 • Image and Asset Optimization

Compresses images, chooses modern formats, and lazy-loads off-screen assets. Students reduce page weight without visible quality loss.

Lesson 3 • Accessibility Auditing and Remediation

Runs automated and manual audits against web content accessibility guidelines. Students fix contrast, keyboard navigation, and ARIA issues found in their projects.

Lesson 4 • Deployment and Go-Live Checklist

Covers hosting options, domain setup, SSL, and pre-launch quality checks. Students complete a go-live checklist before publishing their capstone project.