Loading repository data…
NarendraKoya999 / repository
This Repository contains a List of the 20 Frontend Development Projects using HTML, CSS provided by freeCodeCamp
A structured, hands-on curriculum covering modern HTML5, CSS3, accessibility standards, and responsive design principles through 20 progressively complex real-world projects.
"Building accessible, responsive, and visually engaging web experiences from first principles — one project at a time."
Overview • Skills • Projects • Certification Projects • Tech Stack
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).
| 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 |
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
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
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
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>
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
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
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
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
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
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
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
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
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
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
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
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.
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
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
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 credit
Selected from shared topics, language and repository description—not editorial ratings.
NarendraKoya999 /
This repository contains a list of the 25 projects using HTML, CSS, JavaScript (ES6+) provided by freeCodeCamp
DurgaPrasadDaddu /
This repository contains a well-structured and responsive HTML-based personal resume for Daddu Veera Venkata Durga Prasad. It is designed using semantic HTML5 elements and external CSS to create a clean, accessible, and visually appealing layout.
devdrop-gc /
This repository contains solutions for the HTML & CSS Comprehensive Assignment, demonstrating proficiency in semantic HTML5, modern CSS3, responsive design, and accessibility best practices.
Rutuja177 /
This repository contains the HTML, CSS, and JavaScript files for my web portfolio, showcasing my skills in front-end development, user interface design, and web accessibility.
mahmoud-mumdouh31 /
This repository contains a collection of front-end projects built using HTML5 and CSS3. The main goal of these projects is to practice and demonstrate web design fundamentals, including: Responsive layouts using Flexbox and Grid Modern UI design principles Reusable CSS components Semantic HTML structure Accessibility and clean code practices
Mahmoud12501 /
This repository contains my solution for the Frontend Mentor "Order Summary Component" challenge. The challenge involved creating a responsive and visually appealing order summary component using HTML and CSS.
