web-project-ideas

KO | EN

gitlite — search

#javascript #hacktoberfest #ai #machine-learning #deep-learning #linux #macos #java #windows #awesome #cli #awesome-list #vue #pytorch

web-project-ideas

(★ 68)

Web developer real-life projects ideas | devchallenges.io projects descriptions and user stories.

web-project-ideas 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Web Project Ideas | DevChallenges.io
Web developer real-life projects ideas | devchallenges.io project descriptions and user stories.

## Web Development Project Ideas

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.

### Project Ideas

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.

#### Responsive Web Developer Path

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           |

#### JavaScript Developer Path

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          |

#### Frontend Developer Path

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,...                |

#### Fullstack Developer Path

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`

### Getting Started

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.

### Contributing

- 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.

### License

This project is licensed under the Apache License 2.0.

web-project-ideas

web-project-ideas 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

web-project-ideas

web-project-ideas 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README