frontend-roadmap-projects
Frontend Developer Roadmap Projects
Welcome! This repository contains 22 frontend projects I’ve built as part of my structured learning roadmap.
Each project is:
- 📁 Self-contained in its own folder
- 🌐 Deployed on GitHub Pages
- 📄 Documented with a dedicated README
Frontend Developer Roadmap
Your ultimate guide to becoming a modern, job-ready frontend web developer.
🧭 Overview
This roadmap outlines the skills, tools, and technologies you need to learn to become a professional Frontend Developer in 2025.
Whether you’re a complete beginner or looking to sharpen your skills, follow this structured path with real projects and useful resources.
📌 Topics Covered
- 🧱 HTML, CSS, and Responsive Design
- 🎨 CSS Frameworks (Tailwind, Bootstrap)
- 💡 JavaScript (ES6+)
- ⚙️ Git and GitHub
- 🧰 Developer Tools (VS Code, DevTools)
- 🧠 DOM Manipulation & Events
- 🌐 APIs and JSON
- ⚛️ React Basics
🧠 Learn by Doing (Projects)
-
Projects are grouped into:
-
HTML & CSS
-
Vanilla JavaScript
-
React
-
Capstone / Advanced
📂 Project Index
🖼️ HTML & CSS
| # | Project Name | Link |
|---|---|---|
| 01 | Personal Bio Page | Link |
| 02 | Basic Homepage Layout | Link |
| 03 | Responsive Landing Page | Link |
| 04 | Multi-section Webpage Layout | Link |
🧩 Vanilla JavaScript Apps
| # | Project Name | Link |
|---|---|---|
| 05 | Age Calculator | Link |
| 06 | Simple Number Guessing Game | Link |
| 07 | Quiz App | Link |
| 08 | Multiplication Table Generator | Link |
| 09 | To-do List | Link |
| 10 | Theme Switcher (Light/Dark Mode) | Link |
| 11 | Weather App (OpenWeather API) | Link |
| 12 | Random Quote Generator | Link |
| 13 | Counter App | Link |
| 14 | Feedback Form | Link |
⚛️ React Apps
| # | Project Name | Link |
|---|---|---|
| 15 | Random Quote React App | Link |
| 16 | Task Manager | Link |
| 17 | Multi-page Site (React Router) | Link |
| 18 | Product Catalog UI with Filter | Link |
🚀 Capstone / Advanced
| # | Project Name | Link |
|---|---|---|
| 19 | Final Recipe-sharing App | Link |
| 20 | Portfolio Website | Link |
| 21 | Host All Previous Projects | Link |
| 22 | Deploy All Final Projects | Link |
📜 Roadmap
You can track progress in roadmap.md.
✅ How to Use
- Clone this repo: git clone https://github.com/davidoadetayo/frontend-roadmap-projects.git
cd frontend-roadmap-projects
-
Navigate to any project: cd projects/html-css/01-personal-bio-page
-
Open in your browser or editor.
❤️ License
This repository is open source under the MIT License.