7 Projects With Resources to Learn Web Development
Tags: webdev, javascript, react, beginners
Published: 2024-01-09 10:41:57

## Introduction
Based on feedback from my [previous post](https://dev.to/bigsondev/10-projects-to-skyrocket-your-coding-skills-19hl) we created a few more projects to help you improve Frontend/Web Development skills. This time I also researched similar projects to link a few resources for easier learning. 😊

As the dev.to community is so heartwarming to us we decided to offer a unique promo code **BDSDEVTO30** for our [subscriptions](https://bigdevsoon.me/unlock-big/), while most of the content is free in our app, we're always happy to see that you guys are supporting our hard work ❤️.

Let's dive into the projects! 🤿 

## 1. [Pokedex](https://app.bigdevsoon.me/projects/pokedex) 

Catch them all! Ah, this one is bringing back a lot of memories, let's create your own Pokémon dictionary with all the species!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/la5ai7r96ojcgre42zwu.png)

You will learn more about Pokémons, obviously... and more about API integration with infinite loading, dynamic rendering and RWD, interactive search panel, sorting, filtering and a detailed view with data handling!

### Cards

1. API Configuration
2. UI Rendering
3. Search Panel
4. Sorting Functionality
5. Filters
6. Pokémons Details

### How to create tutorials
- [YT Video](https://www.youtube.com/watch?v=56VjdqcdakQ)
- [HackerNoon Article](https://hackernoon.com/how-to-build-a-pokedex-app-with-react-and-a-slash-graphql-backend-8t3i3t0j)

### Additional resources

- [Glitch template with project documentation](https://glitch.com/edit/#!/big-dev-soon-pokedex)
- [GitHub template with project documentation](https://github.com/elise-bigdevsoon/big-dev-soon-pokedex)

## 2. [Music Player](https://app.bigdevsoon.me/projects/music-player)
An awesome way to recreate your favorite music player and learn about audio controls in HTML (and CSS for styling).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yp3g21t88rvb4j4140kc.png)

You will learn more about UI controls, data handling, event handling, audio playback, and a cool UX/UI Design.

### Cards

1. UI Logic
2. Play Button
3. Pause Button
4. Replay Button
5. Loop Button
6. Time Slider
7. Next Button
8. Previous Button
9. Mute Button
10. Unmute Button
11. Sound Level Slider

### How to create tutorials
- [YT Video](https://www.youtube.com/watch?v=JtrFzoL1joI)
- [Medium Article](https://medium.com/@cwrworksite/create-music-player-with-playlist-using-html-css-and-javascript-10c8d7cef1c6)

### Additional resources

- [Glitch template with project documentation](https://glitch.com/edit/#!/big-dev-soon-music-player)
- [GitHub template with project documentation](https://github.com/elise-bigdevsoon/big-dev-soon-music-player)

## 3. [Code Editor](https://app.bigdevsoon.me/projects/code-editor) 
Recreate the main functionality of websites like JSFiddle or CodePen. 🤩

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8h7cdi1xceaeseed9c4t.png)

You will learn about JavaScript interactivity, CSS Flexibility (flexbox/grid layout), 3rd party library integration, e.g. CodeMirror, and some local storage to persist the code between user sessions.

### Cards

1. Navigation Bar
2. Code Area
3. Preview of Code
4. Resizing Vertical Bar
5. Change View Button
6. Code Editor Library
7. Responsive Web Design
8. Additional Cases

### How to create tutorials
- [YT Video](https://www.youtube.com/watch?v=tupa5BRHK4Q)
- [SmashingMagazine Article](https://www.smashingmagazine.com/2022/01/building-web-code-editor/)

### Additional resources

- [Glitch template with project documentation](https://glitch.com/edit/#!/big-dev-soon-code-editor)
- [GitHub template with project documentation](https://github.com/elise-bigdevsoon/big-dev-soon-code-editor)

## 4. [Quiz App](https://app.bigdevsoon.me/projects/quiz-app)
Create a fun quiz app with 10 randomly generated questions from different categories to easily play and test your knowledge.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ad7wj1n42vypc2im9tyw.png)

You will learn about API Integration (Open Trivia DB API), interactive UI Development, state management to transition between questions and results page, as well as Responsive Design (RWD).

### Cards

1. API Configuration
2. Home Page
3. Quiz Generation
4. Questions Logic
5. Last Question
6. Results Bar
7. Results Answers
8. Sticky Navigation
9. Tablet Design
10. Mobile Design

### How to create tutorials
- [YT Video](https://www.youtube.com/watch?v=PBcqGxrr9g8)
- [GeeksForGeeks Article](https://www.geeksforgeeks.org/how-to-create-a-simple-javascript-quiz/)

### Additional resources

- [Glitch template with project documentation](https://glitch.com/edit/#!/big-dev-soon-quiz-app)
- [GitHub template with project documentation](https://github.com/elise-bigdevsoon/big-dev-soon-quiz-app)

## 5. [Find Movies](https://app.bigdevsoon.me/projects/find-movies)
Create your app for quickly previewing featured Movies and TV Series, search your favorite movies, and see the details page of it!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f504dnvhnpsp9tjh9l93.png)

You will learn to fetch data from external APIs, dynamic search techniques with debouncing, modern UX/UI design, and infinite scrolling with data pagination.

### Cards

1. API Configuration
2. Search Bar
3. Featured Today Section
4. Premieres and Announcements Section
5. Details Page
6. Skeleton Animation
7. Error Handling
8. Recent Searches
9. Skeleton Animation
10. Error Handling

### How to create tutorials
- [YT Video](https://www.youtube.com/watch?v=_DaH6PIn0Ak)
- [Medium Article](https://enlear.academy/create-a-simple-movie-app-in-vanilla-javascript-5811bad69e09)

### Additional resources

- [Glitch template with project documentation](https://glitch.com/edit/#!/big-dev-soon-find-movies)
- [GitHub template with project documentation](https://github.com/elise-bigdevsoon/big-dev-soon-find-movies)

## 6. [Tic Tac Toe](https://app.bigdevsoon.me/projects/tic-tac-toe)
One of the most classic games ever, always fun to work a little bit with game logic.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kb8vmn0js1mq2zl4gtx1.png)

You will learn a bit more about interactive, modern Frontend development, game logic implementation, RWD, modals, event handling with state management, and basic routing.

### Cards

1. Home Page
2. Pick Player
3. Game Board
4. Gameplay
5. Game End
6. Modals
7. Tablet Design
8. Mobile Design

### How to create tutorials
- [YT Video](https://www.youtube.com/watch?v=Y-GkMjUZsmM)
- [GeeksForGeeks Article](https://www.geeksforgeeks.org/simple-tic-tac-toe-game-using-javascript/)

### Additional resources

- [Glitch template with project documentation](https://glitch.com/edit/#!/big-dev-soon-tic-tac-toe)
- [GitHub template with project documentation](https://github.com/elise-bigdevsoon/big-dev-soon-tic-tac-toe)

## 7. [Todo App](https://app.bigdevsoon.me/projects/todo-app) 
Another classic, todo app style, if you haven't created one yet, it might be a good time now!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijd1472kcjsfg3jo4gpi.png)

You will learn interactive UI Design with dynamic JavaScript content management, CSS and theming, and event handling with state management for operations like creating a todo, marking it as completed, or deleting it.

### Cards

1. UI Container
2. Add Todo
3. Delete Todo
4. Mark as Completed
5. Light Mode Toggle

### How to create tutorials
- [YT Video](https://www.youtube.com/watch?v=G0jO8kUrg-I)
- [W3Schools Article](https://www.w3schools.com/howto/howto_js_todolist.asp)

### Additional resources

- [Glitch template with project documentation](https://glitch.com/edit/#!/big-dev-soon-todo-app)
- [GitHub template with project documentation](https://github.com/elise-bigdevsoon/big-dev-soon-todo-app)

## Summary
And that's it! There's a ton to learn from these projects each of them being unique and a nice addition to your portfolio.

We're adding projects every 2nd week and our next big feature we plan to release in January 2024 is Daily Challenges - you'll get a simple design to practice each day for 100 days for the #100DaysCodeChallenge journey.

On top of that, we're adding an integrated Code Editor with AI support so you can speed up your learning curve even more!

It's been my goal for a long time to spread a project-based learning approach through the community and have [BigDevSoon](https://bigdevsoon.me/) up and running, an app we've been working on for the last 2 years. It's a great achievement for us.

Keep codin' BIG! 🙇‍♂️