https://github.com/davidoadetayo/frontend-roadmap-projects
A collection of 22 frontend projects built as part of my developer roadmap. Each project is deployable and well documented.
https://github.com/davidoadetayo/frontend-roadmap-projects
css frontend-webdevelopment html js projects react-js responsive-website
Last synced: 3 months ago
JSON representation
A collection of 22 frontend projects built as part of my developer roadmap. Each project is deployable and well documented.
- Host: GitHub
- URL: https://github.com/davidoadetayo/frontend-roadmap-projects
- Owner: davidoadetayo
- License: mit
- Created: 2025-06-28T19:25:07.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-08-16T19:10:40.000Z (11 months ago)
- Last Synced: 2025-08-16T21:10:29.415Z (11 months ago)
- Topics: css, frontend-webdevelopment, html, js, projects, react-js, responsive-website
- Language: CSS
- Homepage: https://davidoadetayo.github.io/frontend-roadmap-projects/
- Size: 10.9 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Roadmap: roadmap.md
Awesome Lists containing this project
README
# 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](./projects/html-css/01-personal-bio-page/) |
| 02 | Basic Homepage Layout | [Link](./projects/html-css/02-basic-homepage-layout/) |
| 03 | Responsive Landing Page | [Link](./projects/html-css/03-responsive-landing-page/) |
| 04 | Multi-section Webpage Layout | [Link](./projects/html-css/04-multi-section-webpage-layout/) |
---
### 🧩 Vanilla JavaScript Apps
| # | Project Name | Link |
|----|-----------------------------------|------|
| 05 | Age Calculator | [Link](./projects/js-apps/05-age-calculator/) |
| 06 | Simple Number Guessing Game | [Link](./projects/js-apps/06-number-guessing-game/) |
| 07 | Quiz App | [Link](./projects/js-apps/07-quiz-app/) |
| 08 | Multiplication Table Generator | [Link](./projects/js-apps/08-multiplication-table-generator/) |
| 09 | To-do List | [Link](./projects/js-apps/09-todo-list/) |
| 10 | Theme Switcher (Light/Dark Mode) | [Link](./projects/js-apps/10-theme-switcher/) |
| 11 | Weather App (OpenWeather API) | [Link](./projects/js-apps/11-weather-app/) |
| 12 | Random Quote Generator | [Link](./projects/js-apps/12-random-quote-generator/) |
| 13 | Counter App | [Link](./projects/js-apps/13-counter-app/) |
| 14 | Feedback Form | [Link](./projects/js-apps/14-feedback-form/) |
---
### ⚛️ React Apps
| # | Project Name | Link |
|----|--------------------------------|------|
| 15 | Random Quote React App | [Link](./projects/react-apps/15-random-quote-react-app/) |
| 16 | Task Manager | [Link](./projects/react-apps/16-task-manager/) |
| 17 | Multi-page Site (React Router) | [Link](./projects/react-apps/17-multi-page-site/) |
| 18 | Product Catalog UI with Filter | [Link](./projects/react-apps/18-product-catalog-ui/) |
---
### 🚀 Capstone / Advanced
| # | Project Name | Link |
|----|----------------------------------|------|
| 19 | Final Recipe-sharing App | [Link](./projects/capstone/19-final-recipe-sharing-app/) |
| 20 | Portfolio Website | [Link](./projects/capstone/20-portfolio-website/) |
| 21 | Host All Previous Projects | [Link](./projects/capstone/21-host-all-projects/) |
| 22 | Deploy All Final Projects | [Link](./projects/capstone/22-deploy-all-final-projects/) |
---
## 📜 Roadmap
You can track progress in [roadmap.md](./roadmap.md).
---
## ✅ How to Use
1. **Clone this repo**:
git clone https://github.com/davidoadetayo/frontend-roadmap-projects.git
cd frontend-roadmap-projects
2. **Navigate to any project**:
cd projects/html-css/01-personal-bio-page
3. **Open in your browser or editor.**
---
## ❤️ License
This repository is open source under the [MIT License](LICENSE).