Responsive Web Design Journey

Kevin — Front-End Developer

Learning in public, one project at a time.

This site brings together my freeCodeCamp Responsive Web Design coursework: a growing collection of HTML foundations, CSS practice, and certification projects that document how I build for the web.

Start with HTML Continue with CSS

Learning progress

The building blocks behind the journey

HTML Foundations

Structure, content hierarchy, and semantic building blocks.

CSS Foundations

Color, typography, layout, and component-level styling.

Accessibility

Meaningful markup, keyboard focus, and inclusive interfaces.

Responsive Design

Layouts that adapt thoughtfully across screen sizes.

Archive statistics

  • 28 HTML projects — 12 labs, 15 workshops, 1 certification project
  • 38 CSS projects — 16 labs, 18 workshops, 4 certification projects

First chapter

HTML: turning ideas into meaningful structure

The HTML archive follows my work from foundational page structure through semantic content, forms and tables, and accessibility. Each project is a small, inspectable step in learning to make content clear to people and browsers alike.

Explore HTML Journey

Second chapter

CSS: shaping responsive, expressive interfaces

The CSS archive expands from core styling into layout systems, responsive techniques, custom properties, and animation. It is a detailed record of experiments with the visual and spatial side of front-end work.

Explore CSS Journey

Selected work

Six projects that mark the path

Small labs and larger certification projects that represent key learning moments.

Preview of the chocolate chip cookie recipe page

Lab

Build a Recipe Page

Semantic HTML and structured lists

A recipe for mini chocolate chip cookies built with headings, sections, an image, and ordered steps.

View Project Read Case Study
Preview of the Event Hub page

Lab

Build an Event Hub

Semantic layout and internal navigation

An event listing page that uses header, navigation, sections, articles, and descriptive event images.

View Project Read Case Study
Preview of three styled playing cards

Certification Project

Build a Page of Playing Cards

Flexbox layout

A responsive set of playing cards that practices wrapping, alignment, spacing, and transforms.

View Project Read Case Study
Desktop preview of the JavaScript technical documentation page

Certification Project

Build a Technical Documentation Page

Responsive navigation and accessibility

A JavaScript documentation layout with matching anchor navigation and a native mobile popover menu.

View Project Read Case Study
Desktop preview of the Original Trombones product landing page

Certification Project

Build a Product Landing Page

Grid, Flexbox, and responsive components

A trombone landing page with a native email form, embedded video, features, and responsive pricing cards.

View Project Read Case Study
Preview of a responsive magazine article about freeCodeCamp's curriculum

Workshop

Build a Magazine

CSS Grid and editorial layout

A responsive magazine article built with nested grids, multi-column text, and editorial typography.

View Project Read Case Study

Reflection

What I am carrying forward

I am using this journey to make my front-end practice visible and deliberate. Each project gives me a concrete way to improve how I structure content, build layouts, test responsive decisions, and account for the people who will use the result.

  • Semantic HTML
  • Forms
  • Accessibility
  • Flexbox
  • Grid
  • Responsive design
  • Custom properties
  • CSS animations