freeCodeCamp-Projects-HTML-CSS-RWD
# Responsive Web Design Certification
### freeCodeCamp · 20 Projects · Fully Certified
A structured, hands-on curriculum covering modern HTML5, CSS3, accessibility standards,
and responsive design principles through 20 progressively complex real-world projects.
[](https://freecodecamp.org/certification/fcc964aaf79-d74f-4a73-a538-bead74ff9282/responsive-web-design) [](/) [](/) [](/) [](/) [](/)
> *"Building accessible, responsive, and visually engaging web experiences* > *from first principles — one project at a time."*
🔗 **[View Live Certification](https://freecodecamp.org/certification/fcc964aaf79-d74f-4a73-a538-bead74ff9282/responsive-web-design)**
[Overview](#overview) • [Skills](#skills-demonstrated) • [Projects](#project-gallery) • [Certification Projects](#-certification-projects) • [Tech Stack](#tech-stack)
Overview
This repository contains all 20 projects completed as part of the freeCodeCamp Responsive Web Design certification — one of the most widely recognized free web development curricula globally.
The curriculum builds competency progressively: from semantic HTML and CSS fundamentals, through layout systems (Flexbox, Grid), animations, accessibility, and culminating in five independently designed certification projects that demonstrate real-world frontend proficiency.
Every project was built from scratch, applying industry-standard practices in semantic markup, visual design, responsive layout, and web accessibility (WCAG guidelines).
Skills Demonstrated
| Category | Skills |
|---|---|
| HTML5 | Semantic structure, forms, accessibility attributes, ARIA roles, media embedding |
| CSS3 | Flexbox, Grid, animations, transitions, pseudo-elements, custom properties, media queries |
| Responsive Design | Mobile-first layouts, fluid typography, viewport units, breakpoint strategy |
| Accessibility | WCAG compliance, ARIA landmarks, keyboard navigation, screen reader compatibility |
| Visual Design | Color theory, typography, spacing, visual hierarchy, layout composition |
| JavaScript | DOM manipulation, dynamic content generation, event handling |
| Forms & Validation | Input types, constraint validation, UX patterns for accessible data collection |
Project Gallery
🎨 Design & Visual Projects
1. Balance Sheet
Financial data table built with semantic HTML and accessible CSS.
Generates and displays a multi-year balance sheet — assets, liabilities, and net worth — for a fictional company. Demonstrates structured tabular data presentation with JavaScript-driven dynamic content.
Key Skills: Semantic tables · CSS typography · JavaScript DOM manipulation · Accessible data tables
2. Cafe Menu
Clean, styled menu layout for a fictional coffee shop.
A visually appealing single-page menu featuring coffee flavors and desserts with prices. An exercise in CSS layout, image handling, and readable typographic hierarchy.
Key Skills: CSS layout · Image accessibility (alt text) · External resource linking · Responsive styling
3. Cat Painting
Pure CSS illustration — a cat face built using only geometric shapes.
A creative exercise in building a recognizable illustration using only HTML div elements and CSS — no images. Demonstrates deep understanding of CSS positioning, sizing, and visual layering.
Key Skills: CSS shapes · position property · Class-based targeting · Design symmetry and alignment
4. CatPhotoApp
Core HTML5 fundamentals — structure, images, links, and forms.
A structured web page featuring image embedding, semantic lists, and a functional photo submission form. Focused on foundational HTML structure and proper document semantics.
Key Skills: Semantic HTML5 · <form> elements · Input validation (required) · Image embedding with <img>
5. City Skyline
CSS art — a responsive cityscape built entirely without images.
Buildings of varying heights and architectural styles constructed using only HTML and CSS. Demonstrates advanced CSS positioning and creative use of pseudo-elements for structural detail.
Key Skills: CSS ::before and ::after · position property · CSS custom properties · Visual depth and layering
6. Colored Markers
CSS color theory applied to styled marker components.
A visual study in CSS color techniques — gradients, linear color blending, and box shadows — applied to marker components with colored caps and sleeves. Explores the full range of CSS color tools.
Key Skills: CSS linear gradients · box-shadow · Color manipulation · Component-based class structure
7. Ferris Wheel
CSS animation — a fully rotating Ferris wheel with counter-rotating cabins.
A continuously animated Ferris wheel built using @keyframes. The wheel rotates while cabins counter-rotate to remain upright — a precisely engineered multi-element animation challenge.
Key Skills: CSS @keyframes · animation timing and delay · transform: rotate() · Synchronized animation chains
8. Magazine Layout
Editorial multi-column layout inspired by modern online publications.
A long-form article page using CSS Grid for editorial layout, Google Fonts for refined typography, Font Awesome for social icons, and responsive breakpoints for cross-device adaptability.
Key Skills: CSS Grid · Google Fonts · Font Awesome · Responsive media queries · Editorial information hierarchy
9. Nutrition Label
Pixel-accurate FDA nutrition facts label recreated in HTML and CSS.
A precision project replicating the standardized nutrition label found on food packaging. Demands meticulous attention to CSS typography, border styling, spacing control, and deeply nested element structure.
Key Skills: CSS typography · Borders and dividers · Nested element hierarchy · font-weight and font-size precision
10. Penguin
Complex CSS character illustration with hover-triggered animation.
An expressive penguin character assembled using CSS shapes, gradients, and positional layering — with hover-triggered scale animation for interactive engagement.
Key Skills: CSS transform and transition · Hover state animations · Complex z-index management · Shape composition
11. Photo Gallery
Responsive image grid using CSS Flexbox — no framework required.
A clean, adaptive photo gallery that reflows gracefully across screen sizes using only Flexbox. Demonstrates modern responsive layout achieved without any external library or framework.
Key Skills: CSS Flexbox · flex-wrap · gap · Responsive image sizing · External stylesheet architecture
12. Piano
Interactive piano keyboard UI styled with HTML and CSS.
A full octave piano keyboard with white and black keys, built using structured HTML and CSS class differentiation. Demonstrates component-based UI design and proportional visual layout.
Key Skills: CSS layout and proportions · Class-based key differentiation · Responsive viewport meta · z-index for key overlap
♿ Accessibility-Focused Projects
13. Accessibility Quiz
WCAG-compliant web form with full ARIA implementation.
A multi-section quiz on HTML and CSS concepts, designed with accessibility as the primary constraint. Proper ARIA roles, semantic form landmarks, required field labeling, and keyboard navigability throughout.
Key Skills: ARIA roles and aria-labelledby · Semantic form elements · Input validation · Accessible landmark structure
14. Registration Form
Production-quality accessible registration form with comprehensive validation.
A complete user registration flow covering personal information, account type, preferences, file upload, and terms acceptance. Implements all major HTML5 input types with proper validation and screen-reader-compatible labeling.
Key Skills: All HTML5 input types · pattern · min / max · fieldset and legend accessibility structure · File upload · Checkbox and radio UX
🖼️ Creative Art Projects
15. Rothko Painting
Abstract CSS art inspired by Mark Rothko’s color field paintings.
Three carefully proportioned rectangles with blurred edges and deliberate color relationships — a minimal recreation of Rothko’s meditative painting style using only the CSS box model.
Key Skills: CSS border-radius · filter: blur() · Box model mastery · Color harmony · Minimalist design principles
🏆 Certification Projects
The following five projects were independently designed and built to satisfy freeCodeCamp’s official certification requirements. Each was submitted against an automated test suite of defined user story specifications.
16. Product Landing Page
Brief: Design and build a complete product landing page for a fictional brand from scratch.
A fully structured marketing page for a handcrafted trombone company — fixed navigation, hero section with email capture, feature highlights, embedded product video, tiered pricing, and complete footer.
| Section | Implementation Detail |
|---|---|
| Fixed navigation bar | position: fixed with smooth scroll anchor links |
| Hero with email form | HTML <form> with type="email" and required validation |
| Embedded product video | <iframe> inside a responsive aspect-ratio CSS wrapper |
| Feature highlights | Icon + heading + description card layout via Flexbox |
| Pricing cards | Three-column card layout with visual hierarchy and CTAs |
| Full responsiveness | Media queries for mobile, tablet, and desktop breakpoints |
Demonstrates: End-to-end landing page architecture · Conversion-focused layout design · Mobile-first responsive marketing page
17. Survey Form
Brief: Build an accessible, structured data collection form for user feedback.
A comprehensive engagement survey covering personal information, professional role, feature preferences, and open-ended commentary. Designed for clarity, accessibility, and friction-free completion on any device.
| Element | Implementation Detail |
|---|---|
| Input variety | text, email, number, radio, checkbox, select, textarea |
| Validation | required, min, max, placeholder on all relevant fields |
| Accessible labels | Every input paired with a visible <label> using for/id |
| Grouping | Related fields wrapped in <fieldset> with <legend> descriptors |
| Responsive layout | Fluid single-column form adapting to all screen sizes |
Demonstrates: Accessible form architecture · Input validation strategy · User-centric form UX
18. Tribute Page — Dr. Norman Borlaug
Brief: Build an informative tribute page for a person of historical or cultural significance.
A respectful, well-structured tribute to Dr. Norman Borlaug — agricultural scientist, Nobel Peace Prize laureate, and the man credited with saving over a billion lives through the Green Revolution. Features a biographical timeline, portrait, inspirational quote, and cited external reference.
| Feature | Implementation Detail |
|---|---|
| Semantic structure | <figure>, <figcaption>, <blockquote>, <time> used throughout |
| Biographical timeline | Chronological <ol> with dated milestones spanning 1914–2009 |
| Responsive portrait | max-width: 100% fluid image with accessible alt description |
| Inspirational quote | Styled <blockquote> with attribution |
| External reference | Verified Wikipedia link in <footer> for further reading |
Demonstrates: Semantic HTML storytelling · Accessible content structure · Information hierarchy and typographic rhythm
19. JavaScript ES6+ Technical Documentation Page
Brief: Build a navigable, multi-section technical reference documentation page.
A comprehensive documentation resource covering JavaScript ES6+ — variable declaration, scope, data types, control flow, functions, and modern JS patterns. Features a fixed sidebar for rapid section access and responsive collapse on small screens.
| Feature | Implementation Detail |
|---|---|
| Fixed sidebar navigation | position: fixed with anchor links; highlights active section |
| Semantic document structure | <nav>, <main>, <section>, <article> throughout |
| Code presentation | <code> inline and <pre><code> blocks with monospace formatting |
| Responsive behavior | Sidebar collapses to a top navigation bar on mobile screens |
Topics covered: Variable declaration · Scope (var, let, const) · Data types · if...else · while loops · Function declarations · Arrow functions · ES6+ modern patterns
Demonstrates: Technical writing and content structuring · Multi-section navigation architecture · Code documentation UX
20. Personal Portfolio Webpage (In Progress)
Brief: Design and build a professional portfolio page to showcase skills, projects, and experience.
A personal portfolio webpage serving as an interactive online resume and project showcase for potential employers and international clients.
| Section | Content |
|---|---|
| About Me | Professional introduction and personal brand statement |
| Skills | Technology stack with visual proficiency indicators |
| Projects | Featured work with live demo and repository links |
| Experience | Career timeline and key professional achievements |
| Education | Certifications, courses, and academic background |
| Contact | Accessible contact form and professional profile links |
Planned stack: HTML5 · CSS3 (Grid + Flexbox) · JavaScript · Optional: React.js · Deployment: GitHub Pages / Netlify
Status:
🔄 In Progress— actively under development
Tech Stack
Certification Details
What This Certification Proves
The freeCodeCamp Responsive Web Design certification is globally recognized and demonstrates practical competency in:
- Semantic HTML5 — writing meaningful, accessible markup that both humans and machines understand clearly
- Modern CSS — mastery of layout, animation, and responsive techniques actively used in production today
- Accessibility — building for everyone, including users of assistive technologies, in compliance with WCAG 2.1
- Responsive design — interfaces that function flawlessly from 320px mobile screens to 4K displays
- Visual design fundamentals — color, typography, spacing, hierarchy, and purposeful composition
- Project delivery — five independently scoped and built projects meeting defined technical specifications
Repository Structure
responsive-web-design-certification/
│
├── 01-balance-sheet/
├── 02-cafe-menu/
├── 03-cat-painting/
├── 04-cat-photo-app/
├── 05-city-skyline/
├── 06-colored-markers/
├── 07-ferris-wheel/
├── 08-magazine/
├── 09-nutrition-label/
├── 10-penguin/
├── 11-photo-gallery/
├── 12-piano/
├── 13-accessibility-quiz/
├── 14-registration-form/
├── 15-rothko-painting/
│
├── 16-product-landing-page/ ← Certification Project
├── 17-survey-form/ ← Certification Project
├── 18-tribute-page/ ← Certification Project
├── 19-technical-documentation/ ← Certification Project
├── 20-personal-portfolio/ ← Certification Project (In Progress)
│
└── README.md
Each folder contains an index.html and styles.css. Projects are self-contained with no build tools, package managers, or external dependencies.
Running Locally
# Clone this repository
git clone https://github.com/your-username/responsive-web-design-certification.git
# Open any project directly in your browser
cd responsive-web-design-certification/01-balance-sheet
open index.html
# Recommended: use VS Code Live Server extension for live reload during development
Connect With Me
⭐ If this work resonated with you, a star on the repository is always appreciated.