Web developer real-life projects ideas | devchallenges.io project descriptions and user stories.
This repository contains a list of web development project ideas for devchallenges.io. These projects are designed to help you practice your Web development skills and build your portfolio.
All projects are divided into:
- 5 levels: Beginner, Junior, Mid-level, Upper-mid, Senior
- Different paths: e.g. Responsive Web Developer, JavaScript Developer, Frontend Developer,...
Each project is designed to practice a recommended tech stack, but you can choose to work with anything.
Link/Status: If the project is ready in devchallenges.io, you should see a link to the project with designs, and resources to help you get started. Otherwise, In Progress means the project is being designed, empty means it has not been created.
This path is designed for you to practice HTML, CSS, and basic JavaScript. You can practice with frameworks like Tailwind CSS, Bootstrap,... based on your needs.
| Project Name | Level | Recommended Tech | Link/Status |
|---|---|---|---|
| Simple Card Component | Beginner | HTML, CSS | In Progress |
| Simple Homepage | Beginner | HTML, CSS | In Progress |
| Login Form | Beginner | HTML, CSS, JS | In Progress |
| About Page | Beginner | HTML, CSS | In Progress |
| Blog Page | Beginner | HTML, CSS | In Progress |
| Portfolio Webpage | Junior | HTML, CSS | In Progress |
| E-commerce Listing Page | Junior | HTML, CSS | In Progress |
| Advanced Homepage | Junior | HTML, CSS, JS | |
| Pricing Page | Beginner | HTML, CSS | |
| Survey Form | Beginner | HTML, CSS | |
| Testimonials Page | Beginner | HTML, CSS | |
| eBook Landing Page | Junior | HTML, CSS | |
| Responsive Navigation | Beginner | HTML, CSS, JS | |
| Responsive Dashboard | Beginner | HTML, CSS, JS | |
| Light/Dark Theme Homepage | Junior | HTML, CSS, JS | |
| Music Player | Junior | HTML, CSS, JavaScript |
In this path, it's not yet recommended to use any Frontend libraries like React, but instead, you should practice the fundamentals of JavaScipt like Document Object Model (DOM), Algorithms, Events, and Fetch API,..
| Project Name | Level | Recommended Tech | Link/Status |
|---|---|---|---|
| Multi Step Form | Junior | JavaScript, HTML, CSS | In Progress |
| Guess The Word | Mid-level | JavaScript, HTML, CSS | |
| Gradient generator | Junior | JavaScript, HTML, CSS | |
| Text to Speech | Junior | JavaScript, HTML, CSS | |
| GitHub Profile | Mid-level | JavaScript, API, HTML, CSS | |
| Movie Search App | Mid-level | JavaScript, API, HTML, CSS | |
| Random Quote | Mid-level | JavaScript, API, HTML, CSS | |
| Recipe App | Mid-level | JavaScript, API, HTML, CSS | |
| Password Check | Mid-level | JavaScript, HTML, CSS | |
| Check system battery | Mid-level | JavaScript, HTML, CSS | |
| QA code generator | Mid-level | JavaScript, HTML, CSS | |
| Spin the wheel guesser | Mid-level | JavaScript, HTML, CSS | |
| Dictionary App | Mid-level | JavaScript, HTML, CSS | |
| Flip a coin Game | Mid-level | JavaScript, API, HTML, CSS | |
| Snake Game | Mid-level | JavaScript, API, HTML, CSS | |
| Image Editor | Junior | JavaScript, HTML, CSS | |
| Product Selector | Junior | JavaScript, HTML, CSS |
This path is the place where you practice popular frameworks that are required in almost every Frontend job like React, Vue.js, and Svelte,...
| Project Name | Level | Recommended Tech | Link/Status |
|---|---|---|---|
| Budget App | Upper-mid | React/Vue/Svelte,... | In Progress |
| Weather App | Upper-mid | React/Vue/Svelte,... | |
| Movie Listing | Upper-mid | React/Vue/Svelte,... | |
| Stock Tracker App | Upper-mid | React/Vue/Svelte,... | |
| Github History | Upper-mid | React/Vue/Svelte,... | |
| Translate App | Upper-mid | React/Vue/Svelte,... | |
| Pixel Drawer | Upper-mid | React/Vue/Svelte,... | |
| ChatGPT Bot | Upper-mid | React/Vue/Svelte,... | |
| Currency Converter | Upper-mid | React/Vue/Svelte,... | |
| Property Listing page with filters | Upper-mid | React/Vue/Svelte,... | |
| Quizz App | Upper-mid | React/Vue/Svelte,... | |
| Calendar/Event App | Upper-mid | React/Vue/Svelte,... | |
| Task manager | Upper-mid | React/Vue/Svelte,... | |
| Codepen clone | Upper-mid | React/Vue/Svelte,... |
In this path, you are expected to implement your own backend services, for example, using MEAN Stack (MongoDB, Express.js, AngularJS, Node.js) or LAMP Stack (Linux, Apache, MySQL, PHP),... You can also use tools like Supabse, Firebase,.. to speed up.
| Project Name | Level | Recommended Tech | Link/Status |
|---|---|---|---|
| User management | Beginner | Open | In Progress |
| Slack clone | Beginner | Open | In Progress |
| User management | Beginner | Open | In Progress |
To get started, go to devchallenges.io, and choose a project that matches your needs. You will be given the needed resources and instructions to start.
- If you have a project idea that you would like to add to the list, feel free to submit a pull request, alternatively, you can open an issue that explains the idea in more detail. Please ensure that your project idea is appropriate for the skill level.
- If you find any typo, free feel to submit a pull request.
This project is licensed under the Apache License 2.0.