DEV Community

Cover image for 10 Projects to master Frontend & Web Development
Adrian | Founder of BigDevSoon
Adrian | Founder of BigDevSoon

Posted on • Updated on

10 Projects to master Frontend & Web Development

Introduction

Learning by hands-on code from day 1 is one of the coolest methods of getting into coding, each time you move a small step, let be fixing a bug or adding a new feature, you can feel that dopamine boost!

You might get stuck quickly by not knowing how to build something or move forward but that is the whole point of coding, when you're blocked, you need to find a way to implement and deliver features, read documentation, learn how to learn and how to google things, but each time you'll be a little better...

...and the moment you complete a whole project is AMAZING! +1 to your portfolio, learning new skills and a feeling of accomplishment are unique.

Let me present 10 more projects you can build to improve your coding skills x10!

Shameless plug ahead but you can get a subscription with the USERS8000 -80% promo code and unleash your coding powers, jump on that code learning train and apply for jobs in 2-3 months if you take the learning seriously.

Let's dive into the projects! 🤿

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

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

Additional resources

2. Music Player

An awesome way to recreate your favorite music player and learn about audio controls in HTML (and CSS for styling).

Image description

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

Additional resources

3. Code Editor

Recreate the main functionality of websites like JSFiddle or CodePen. 🤩

Image description

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

Additional resources

4. Quiz App

Create a fun quiz app with 10 randomly generated questions from different categories to easily play and test your knowledge.

Image description

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

Additional resources

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

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

Additional resources

6. Tic Tac Toe

One of the most classic games ever, always fun to work a little bit with game logic.

Image description

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

Additional resources

7. Todo App

Another classic, todo app style, if you haven't created one yet, it might be a good time now!

Image description

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

Additional resources

8. Blog

One of the best projects to build as it's a dynamic content that often requires a CMS which is one of the common requests from your future clients to build! (e.g. dynamic content web store website, etc.)

Image description

You will learn a lot about page navigation with different routers, SEO optimisation if built e.g. in NextJS as well as dive into various CMS and how to connect it all between Frontend and API. Also RWD is included in this one.

Cards

  1. Content Strategy
  2. Basic Navigation
  3. Hero Section
  4. Blog Posts Section
  5. About Section
  6. Global Footer
  7. Posts Page
  8. Dynamic Search
  9. Blog Post Page
  10. Mobile Design

How to create tutorials

Additional resources

9. Dashboard

Visualisation of different data in charts, tables is a crucial skill that Developers should have these days and especially working with different component & charts libraries.

Image description

You will learn how to build a sidebar with menu items as well as the whole navigation layout starting from top nav and content with grid system. On top of that, you could connect a mock API data to incorporate loading and error states handling.

Cards

  1. Data Management
  2. Sidebar
  3. Top Navigation
  4. Numbers Cards
  5. Sales Overview Chart
  6. Sales Region Chart
  7. Registered Users Chart
  8. Integration List
  9. Light Dark Mode

How to create tutorials

Additional resources

10. Character Generator

Avatar creator with state management is a very common problem, data structure, loading from local storage, changing it in real-time. It's a junior level project but still will be a fun one to complete!

Image description

Learn how to manage state, optimise images/work with SVG's and implement features like random character creation and downloading an image from the canvas.

Cards

  1. UI Container
  2. Character Customisation
  3. Random Selection
  4. Save Character
  5. Persist Character

How to create tutorials

Additional resources

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.

It's been my goal for a long time to spread a project-based learning approach through the community and have BigDevSoon 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! 🙇‍♂️

Top comments (33)

Collapse
 
tomasdevs profile image
Tomas Stveracek

Great selection of projects to enhance frontend skills! 🚀

Collapse
 
bigsondev profile image
Adrian | Founder of BigDevSoon

Awesome, glad to hear you like it! 🙇

Collapse
 
anasizhere profile image
Anas Khan

While they are maybe good for beginners to have hands on but they are not worth it to add to the resume imo.

Collapse
 
bigsondev profile image
Adrian | Founder of BigDevSoon

IMO depends how many cool, unique features you add to them and e.g. cover with e2e testing, units, integration tests, etc. Imagine extending todo app to be realtime app with sign in system where people can share their lists, collaborate in groups, you get the idea. I agree that the „basic version” of these projects might be too little for resume but adding a unique extension can overcome that gap and make it resume worthy.

Collapse
 
anasizhere profile image
Anas Khan

We are talking about resumes right? We won't be mentioning the features that we added to the project. It would be still a Todo list on the resume.

Hope you get my point.

Thread Thread
 
bigsondev profile image
Adrian | Founder of BigDevSoon • Edited

We could, throwing a title and a link to the project only without any additional details seems a bit sus in the resume anyways. Adding quick summary + highlighting unique features, e.g. „Used websockets (socket.io) for real-time collaboration” or mentioning tech. stack which is in demand gives totally different impression than just writing „todo app”, I think we should stop tunnel visioning, emphasizing on what you built can give better results as when recruiter looks up the resume for example they could look for tech. stack you used for a project, so yeah even todo app could stand out. Hope you get my point and just to add up on this, I’ve been a tech. recruiter in many companies so all of this are valid points, trust me. 😀

Collapse
 
oyefolucodewizard profile image
Oyefolu Toyyib Adeyemi

Good timing, this is what I've been looking for. Thanks 👍.

Collapse
 
axorax profile image
Axorax

Great post! Can tell it took a lot of time and effort to make!

Collapse
 
paulsanjay81 profile image
Sanjay Paul

Hey Adrian! This list of projects is awesome! I love how each project covers a different aspect of frontend development while keeping things fun and engaging. I’m especially excited about the Pokedex and Music Player ideas—those sound like great ways to level up my skills and add some cool features to my portfolio. Thanks for sharing these and the helpful resources with us.

Collapse
 
utsav_at_work profile image
Utsav Tayde

I am assuming many people must be doing these same projects as beginners which makes them very common. So, does it really help my resume to stand out?

Collapse
 
bigsondev profile image
Adrian | Founder of BigDevSoon

I’ve seen tons of „todo apps” projects on resumes that were executed poorly but just a few that had a modern in demand tech. stack, tests coverage, smart boilerplate, good README (talking about GH repo in general) and of course the UX/UI of it, RWD, it’s super easy to tell how much effort one puts in their projects, market is tough and sure you can try standing out by building a super unique, niche product/project but if it’s still executed poorly it will make no difference at all. Again, it’s tough but if you execute well, no bugs, perfect it, good documentation, a sharp eye of a recruiter can catch these details IMO. I’m not saying to keep all these projects in resumes as you can just practice on them, add your unique variation and then put something else on your resume but if it’s done well, that will def. help to stand out, does that make sense?

Collapse
 
utsav_at_work profile image
Utsav Tayde

Yeah... It does. Thanks!

Collapse
 
kagayo profile image
Joffrey Kagayo

Thank you.

Collapse
 
danwe_basga_90b02c4bc5d30 profile image
Danwe Basga

Cool. How about a real estate web app like Zillow or RedFin?

Collapse
 
bigsondev profile image
Adrian | Founder of BigDevSoon

Nice idea, will add it to the list for future projects!

Collapse
 
bigsondev profile image
Adrian | Founder of BigDevSoon

And yet another set of 10 projects 🚀 My fav. is Pokedex, it is such a cool project!

Collapse
 
cristiansbardelotto profile image
Cristian Sbardelotto

The last one is such a great and different idea!

Some comments may only be visible to logged-in visitors. Sign in to view all comments.