Certification Project
Build a Technical Documentation Page
Responsive navigation and media queries
A responsive JavaScript documentation page with structured content, anchor navigation, and layouts that adapt between mobile and desktop.
Responsive Web Design Journey
CSS Foundations — Complete Project Archive
Learning in public, one project at a time.
A complete archive of my CSS labs, workshops, and certification projects completed during the freeCodeCamp Responsive Web Design curriculum.
38
Projects
16
Labs
18
Workshops
4
Certification Projects
Selected work
Featured Projects
Six projects that show the HTML and CSS techniques practiced across the curriculum.
Certification Project
Build a Product Landing Page
Flexbox, forms, embedded media, and responsive layout
A responsive product page with in-page navigation, a native email form, embedded video, and pricing cards.
Certification Project
Build a Book Inventory App
Attribute selectors, tables, and gradients
A static book inventory table that uses attribute selectors, gradients, status badges, and rating indicators.
Certification Project
Build a Page of Playing Cards
Flexbox alignment and wrapping
A responsive page of playing cards that uses Flexbox to wrap, space, and align each card's value and suit symbols.
Workshop
Build a Magazine
CSS Grid and responsive editorial layout
A responsive magazine-style article that combines nested CSS Grids, multi-column text, editorial typography, and images.
Workshop
Build a City Skyline
CSS custom properties, gradients, and media queries
A CSS-generated city skyline whose reusable color variables switch from a daytime to nighttime theme at a breakpoint.
Complete Curriculum Archive
The Full Learning Journey
Every lab, workshop, and certification project, organized in curriculum order.
Back to RWD OverviewChapter 01
CSS Foundations
Core selectors, typography, color, and reusable card styling.
4 projects
Blog Post Card
Build a Stylized To-Do List
Design a Business Card
Cafe Menu
Chapter 02
Absolute and Relative Units
Sizing and spacing layouts with viewport, percentage, and relative units.
1 project
Build an Event Flyer Page
Chapter 03
Pseudo-classes and Pseudo-elements
Interactive states and generated details for forms and interface elements.
3 projects
Job Application Form
Greeting Card
Greeting Card
Parent Teacher Conference Form
Chapter 04
Colors
Using color formats, combinations, and models to create visual hierarchy.
2 projects
Colored Boxes
CSS Color Markers
Chapter 05
Styling Forms
Building clear, usable forms with thoughtful layout and custom controls.
4 projects
Design a Contact Form
Feature Selection Page
Game Settings Panel
Registration Form
Chapter 06
Box Model
Controlling element dimensions, spacing, borders, and visual effects.
2 projects
Confidential Email Page
Rothko Painting
Chapter 07
Flexbox
Arranging flexible, aligned, and responsive one-dimensional layouts.
3 projects
Pricing Plans Layout Page
Colorful Boxes
CSS Flexbox Photo Gallery
Chapter 08
Typography
Creating readable hierarchy with type scale, spacing, and editorial detail.
2 projects
Build a Newspaper Article
Nutrition Label
Chapter 09
Accessibility
Making content and forms clear for people using different technologies.
2 projects
Build a Tribute Page
Accessibility Quiz
Chapter 10
Positioning
Layering and placing visual elements precisely within a composition.
2 projects
Build a House Painting
Cat Painting
Chapter 11
Attribute Selectors
Selecting and styling elements from their attributes and values.
1 project
Build a Balance Sheet
Chapter 12
Responsive Design
Adapting a layout across screen sizes with media queries.
1 project
Piano
Chapter 13
CSS Variables
Defining reusable values for consistent and adaptable styling.
2 projects
Build an Availability Table
Featured
Build a City Skyline
Chapter 14
Grid
Organizing two-dimensional page layouts with rows, columns, and named areas.
2 projects
Design a Newspaper Layout
Featured
Build a Magazine
Chapter 15
Animations
Bringing CSS illustrations and interfaces to life with transforms and keyframes.
3 projects
Build a Moon Orbit
Build a Flappy Penguin
Build an Animated Ferris Wheel
Milestone
Certification Projects
Combining curriculum techniques into complete, responsive web projects.
4 projects
Featured
Build a Page of Playing Cards
Featured
Build a Book Inventory App
Featured
Build a Technical Documentation Page
Featured
Build a Product Landing Page
Learning reflection
What This Journey Taught Me
This portfolio is the result of structured practice: building small, focused exercises and combining those lessons into complete, responsive pages.
- Semantic HTML
- CSS Fundamentals
- Forms
- Accessibility
- Typography
- Positioning
- Flexbox
- Grid
- Responsive Design
- Custom Properties
- Attribute Selectors
- CSS Animations