Frontend Projects
https://roadmap.sh/frontend/projects • 213 KB fetched
Open original page
Frontend Projects AI Tutor
*
Roadmaps
* AI Tutor
Lesson Packs Newsletters
Partner Get the latest Frontend news from our sister site TheNewStack.io
← All Roadmaps Prefer us on Google Weekly Newsletter Download
Frontend Projects
Project ideas to take you from beginner to advanced in Frontend
Roadmap Roadmap Projects AI Tutor AI
Personalize
beginner intermediate advanced
beginner HTML Single-Page CV Create a single-page HTML CV to showcase your career history beginner HTML Basic HTML Website Create simple HTML only website with multiple pages. beginner CSS Personal Portfolio Convert the previous simple HTML website into a personal portfolio. beginner CSS Changelog Component Create a changelog component for a website using HTML and CSS. beginner CSS Testimonial Cards Create testimonial cards for a website using HTML and CSS. beginner CSS Datepicker UI Create a simple datepicker UI using HTML and CSS. beginner Accessibility Accessible Form UI Create an accessible form UI using HTML and CSS. beginner CSS Image Grid Layout Create a grid layout of images using HTML and CSS. beginner CSS Tooltip UI Create a tooltip for navigation items using only HTML and CSS. beginner JavaScript Tabs Create a simple tabs component using HTML, CSS, and JavaScript. beginner JavaScript Cookie Consent Create a simple cookie consent banner using JavaScript. beginner JavaScript Restricted Textarea Create a textarea with live character count and a max character limit. beginner JavaScript Accordion Create an accordion component using HTML, CSS, and JavaScript. beginner Frontend Age Calculator Create an age calculator using HTML, CSS, and JavaScript. beginner Frontend Flash Cards Create a flash card app using JavaScript frameworks. beginner HTML Pricing Comparison Table Build a single-page pricing comparison using a real, accessible HTML table. beginner HTML Blog Post Page Build a single semantic HTML blog post with proper text elements, links, and a figure. beginner HTML Contact Form Build an accessible HTML contact form with real labels, grouped controls, and browser validation. beginner HTML Photo Showcase Build an HTML photo showcase page with proper alt text, figures with captions, and an embedded video. beginner CSS Pricing Cards Create a row of three pricing cards using HTML and CSS. intermediate Frameworks Quiz App Build a browser-based quiz application to test any knowledge intermediate API Weather Web App Build a weather app that fetches and displays weather for a given location. intermediate API Integration GitHub Random Repository Create a GitHub random repository finder using GitHub API. intermediate JavaScript Custom Dropdown Create a custom dropdown using HTML, CSS, and JavaScript. intermediate JavaScript Task Tracker Create a task tracker with a to-do list using JavaScript. intermediate API Integration Reddit Client Create a Reddit client with customizable subreddit lanes. intermediate JavaScript Temperature Converter Build a temperature converter that converts between different units. intermediate Frameworks Pomodoro Timer Create a pomodoro tracker application for productivity intermediate CSS Theme Switcher with CSS Variables Build a theme switcher that changes a card using CSS variables advanced Frameworks 24hr Story Feature Create a client-side instagram stories feature clone.
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 7th out of 28M!
367K
GitHub Stars
Star us on GitHub
Help us reach #1
+90k every month
+3.2M
Registered Users
Register yourself
Commit to your growth
+2k every month
51K
Discord Members
Join on Discord
Join the community
Roadmaps Guides FAQs YouTube
roadmap.sh by @nilbuild @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 ·
The top DevOps resource for Kubernetes, cloud-native computing, and large-scale development and deployment.
DevOps · Kubernetes · Cloud-Native
Cookie Settings
Links found on this page
- AI Tutor [direct]
- Roadmaps [direct]
- Lesson Packs [direct]
- Newsletters [direct]
- TheNewStack.io [direct]
- Prefer us on Google [direct]
- Download [direct]
- Roadmap Roadmap [direct]
- AI Tutor AI [direct]
- beginner HTML Single-Page CV Create a single-page HTML CV to showcase your career history [direct]
- beginner HTML Basic HTML Website Create simple HTML only website with multiple pages. [direct]
- beginner CSS Personal Portfolio Convert the previous simple HTML website into a personal portfolio. [direct]
- beginner CSS Changelog Component Create a changelog component for a website using HTML and CSS. [direct]
- beginner CSS Testimonial Cards Create testimonial cards for a website using HTML and CSS. [direct]
- beginner CSS Datepicker UI Create a simple datepicker UI using HTML and CSS. [direct]
- beginner Accessibility Accessible Form UI Create an accessible form UI using HTML and CSS. [direct]
- beginner CSS Image Grid Layout Create a grid layout of images using HTML and CSS. [direct]
- beginner CSS Tooltip UI Create a tooltip for navigation items using only HTML and CSS. [direct]
- beginner JavaScript Tabs Create a simple tabs component using HTML, CSS, and JavaScript. [direct]
- beginner JavaScript Cookie Consent Create a simple cookie consent banner using JavaScript. [direct]
- beginner JavaScript Restricted Textarea Create a textarea with live character count and a max character limit. [direct]
- beginner JavaScript Accordion Create an accordion component using HTML, CSS, and JavaScript. [direct]
- beginner Frontend Age Calculator Create an age calculator using HTML, CSS, and JavaScript. [direct]
- beginner Frontend Flash Cards Create a flash card app using JavaScript frameworks. [direct]
- beginner HTML Pricing Comparison Table Build a single-page pricing comparison using a real, accessible HTML table. [direct]
- beginner HTML Blog Post Page Build a single semantic HTML blog post with proper text elements, links, and a figure. [direct]
- beginner HTML Contact Form Build an accessible HTML contact form with real labels, grouped controls, and browser validation. [direct]
- beginner HTML Photo Showcase Build an HTML photo showcase page with proper alt text, figures with captions, and an embedded video. [direct]
- beginner CSS Pricing Cards Create a row of three pricing cards using HTML and CSS. [direct]
- intermediate Frameworks Quiz App Build a browser-based quiz application to test any knowledge [direct]
- intermediate API Weather Web App Build a weather app that fetches and displays weather for a given location. [direct]
- intermediate API Integration GitHub Random Repository Create a GitHub random repository finder using GitHub API. [direct]
- intermediate JavaScript Custom Dropdown Create a custom dropdown using HTML, CSS, and JavaScript. [direct]
- intermediate JavaScript Task Tracker Create a task tracker with a to-do list using JavaScript. [direct]
- intermediate API Integration Reddit Client Create a Reddit client with customizable subreddit lanes. [direct]
- intermediate JavaScript Temperature Converter Build a temperature converter that converts between different units. [direct]
- intermediate Frameworks Pomodoro Timer Create a pomodoro tracker application for productivity [direct]
- intermediate CSS Theme Switcher with CSS Variables Build a theme switcher that changes a card using CSS variables [direct]
- advanced Frameworks 24hr Story Feature Create a client-side instagram stories feature clone. [direct]
- 6th most starred project on GitHub [direct]
- Star us on GitHub Help us reach #1 [direct]
- Register yourself Commit to your growth [direct]
- Join on Discord Join the community [direct]
- Guides [direct]
- FAQs [direct]
- YouTube [direct]
- roadmap.sh [direct]
- @nilbuild @nilbuild [direct]
- Terms [direct]
- Privacy [direct]
- DevOps [direct]
- Kubernetes [direct]
- Cloud-Native [direct]
|
|