Frontend Projects

Project ideas to take you from beginner to advanced in Frontend

RoadmapProjectsAI
beginnerHTMLSingle-Page CVCreate a single-page HTML CV to showcase your career history beginnerHTMLBasic HTML WebsiteCreate simple HTML only website with multiple pages. beginnerCSSPersonal PortfolioConvert the previous simple HTML website into a personal portfolio. beginnerCSSChangelog ComponentCreate a changelog component for a website using HTML and CSS. beginnerCSSTestimonial CardsCreate testimonial cards for a website using HTML and CSS. beginnerCSSDatepicker UICreate a simple datepicker UI using HTML and CSS. beginnerAccessibilityAccessible Form UICreate an accessible form UI using HTML and CSS. beginnerCSSImage Grid LayoutCreate a grid layout of images using HTML and CSS. beginnerCSSTooltip UICreate a tooltip for navigation items using only HTML and CSS. beginnerJavaScriptTabsCreate a simple tabs component using HTML, CSS, and JavaScript. beginnerJavaScriptCookie ConsentCreate a simple cookie consent banner using JavaScript. beginnerJavaScriptRestricted TextareaCreate a textarea with live character count and a max character limit. beginnerJavaScriptAccordionCreate an accordion component using HTML, CSS, and JavaScript. beginnerFrontendAge CalculatorCreate an age calculator using HTML, CSS, and JavaScript. beginnerFrontendFlash CardsCreate a flash card app using JavaScript frameworks. beginnerHTMLPricing Comparison TableBuild a single-page pricing comparison using a real, accessible HTML table. beginnerHTMLBlog Post PageBuild a single semantic HTML blog post with proper text elements, links, and a figure. beginnerHTMLContact FormBuild an accessible HTML contact form with real labels, grouped controls, and browser validation. beginnerHTMLPhoto ShowcaseBuild an HTML photo showcase page with proper alt text, figures with captions, and an embedded video.

Join the Community

roadmap.sh is the 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

Rank  out of 28M!

356K

GitHub Stars

Star us on GitHub
Help us reach #1

+90kevery month

+2.8M

Registered Users

Register yourself
Commit to your growth

+2kevery month

48K

Discord Members

Join on Discord
Join the community

RoadmapsGuidesFAQsYouTube

roadmap.shby@nilbuild

Community created roadmaps, best practices, projects, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·Terms·Privacy·

ThewNewStack

The top DevOps resource for Kubernetes, cloud-native computing, and large-scale development and deployment.

DevOps·Kubernetes·Cloud-Native