DEV Community

Cover image for πŸš€ 10 Projects to skyrocket your coding skills
BigsonDev
BigsonDev

Posted on • Updated on

πŸš€ 10 Projects to skyrocket your coding skills

Introduction

Whenever you're thinking about getting better at coding, there are plenty of options to do so. You can read dev articles or go through an endless loop of tutorials, courses, videos, and books but the actual key is in transitioning from learning to hands-on coding, and trust me, there is no better way than applying all the concepts you've learned so far via project-based learning.

I, myself, am a Software Engineer with 8+ years of experience and I went through sending a crazy amount of CVs, dozens of interviews, and especially now, when getting a job as a Frontend/Web Developer is trickier more than ever, I can't recommend building your own projects enough.

To stand out among the crowd, I'll describe 10 projects, each with a unique design, requirements, and skills you can grasp to build your portfolio and actually build things that can impact your progress as a Dev!

Additionally, each of the projects comes with predefined implementation cards that can help you feel like a real Developer working in an Agile environment with user stories and acceptance criteria while also supporting with planning of the project itself.

Business Card

Good intro warm-up to dive into Web Development.
Image description

You will learn about basic HTML and CSS, responsive design principles, and an introduction to personal branding online.

Cards

  1. UI Container
  2. User Contact Section
  3. User Image
  4. User Info Section
  5. Absolute-Positioned Shapes
  6. Animations

Additional resources

The Veggie King

A classic CSS RWD Landing Page style, feel the media queries!

Image description

You will learn advanced CSS techniques, CSS Flexbox/Grid, and how to create a responsive and attractive landing page.

Cards

  1. Navigation
  2. Hero Section
  3. About Us Section
  4. Menu Section
  5. Gallery Section
  6. Contact Section
  7. Footer
  8. Hover Effects
  9. Mobile Menu
  10. Responsive Web Design
  11. Optimization

Additional resources

Calculator

Let's learn more about JS, logic, pure functions, and a bit of math operations.

Image description

You will learn JavaScript fundamentals, DOM manipulation, and event handling to create interactive web applications.

Cards

  1. UI Container
  2. Input Numbers
  3. Math Operations
  4. Clear and Reset
  5. Previous Operation
  6. Light & Dark Mode
  7. Edge Case Handling

Additional resources

Just Weather

This project type has been used so many times for an interview take-home challenge, worth doing it at least once!

Image description

You will learn to fetch data from external APIs, asynchronous JavaScript (Promises, async/await), and display dynamic data on the web.

Cards

  1. API Configuration
  2. Search Bar
  3. Location and Temperature
  4. Hourly Forecast
  5. Weather Details
  6. Location Access
  7. Temperature Unit Switching
  8. Recent Searches
  9. Skeleton Animation
  10. Error Handling

Additional resources

GifTok

More APIs, pagination, infinity scrolling.

Image description

You will learn how to work with media-rich APIs, implement pagination, and ensure a mobile-friendly UI.

Cards

  1. API Configuration
  2. Display First GIF
  3. Swipe Next
  4. Swipe Back
  5. Infinite Swiping
  6. User Details
  7. Skeleton Loading
  8. Desktop Version
  9. Edge Cases

Additional resources

Notely

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

Image description

You will learn CRUD operations, state management, and the principles of immutable programming in a modern JavaScript framework.

Cards

  1. Navigation Placeholder
  2. New Note
  3. List Notes
  4. Edit Note
  5. Delete Note
  6. Complete Note
  7. Search Notes
  8. Filter Notes
  9. Completed Notes
  10. Empty State
  11. Fields Validation
  12. Persist Storage

Additional resources

Color Memory

Always good to create a game and have a high-level picture for componentization, and structure.

Image description

You will learn logic building in software development, maintaining application state, and user interaction handling.

Cards

  1. Circle-shaped Component
  2. Home Page
  3. Gameplay
  4. Game Over Modal
  5. Best Score
  6. Game Rules Modal
  7. Sound Notifications
  8. Responsive Web Design
  9. Edge Cases

Additional resources

AI Post Generator

Fancy, modern trend with AI, right? Awesome opportunity to understand one of the most popular available APIs.

Image description

You will learn to interact with AI through APIs, understand how prompts work, and build a tool with real-world use cases.

Cards

  1. API Configuration
  2. UI Container
  3. Social Platform Selector
  4. Message Textarea
  5. Tone and Style Selectors
  6. Generate Post Button
  7. Generation Phase
  8. Buttons Logic

Additional resources

Level Editor

It's like your first "mini Photoshop tool" 😁 There are plenty of "no-code" apps these days in a similar style.

Image description

You will learn how to implement drag-and-drop functionality, asset management, and the basics of game-level design and UX/UI considerations.

Cards

  1. UI Container
  2. Asset Drawing Mechanism
  3. Quick Asset
  4. Undo Feature
  5. Eraser Tool
  6. Zoom Capability
  7. Settings and Export
  8. Grid Resizing
  9. Persistence of Level

Additional resources

Any Chat

Mastering the full flow of Frontend and backend, sockets, and broadcasting of events is such a useful skill set.

Image description

You will learn Full-stack development including server-side programming, real-time data handling, and database management.

Cards

  1. Onboarding Page
  2. Enter Chat Page
  3. Node.js Server
  4. Chat Page Header
  5. Chat Window
  6. Chat Page Footer
  7. Message Sending
  8. Emoji Support
  9. Connections and Disconnections
  10. Edge Cases

Additional resources

Summary

Experiment with technologies, frameworks, and libraries, create your own creative variations and see what clicks for you the most. I'd definitely recommend expanding your skills beyond HTML/CSS, adding more JS, and logic, working with API as well, some popular frameworks like React/Vue/Svelte, and diving into Node.js/Express to understand how the full Frontend <-> Backend flow works.

Create outstanding projects and I keep my fingers crossed for incoming successful interviews, just keep coding BIG.

It's been my goal for a long time to spread a project-based learning approach through the community and having BigDevSoon up and running, an app we've been working on for the last 2 years is a great achievement to us.

If you enjoyed the writing, feel free to spread the word! ❀️

Top comments (23)

Collapse
 
quanla profile image
Quan Le

Please check out my build of the MacOS on the web
quanla.github.io/macos-demo/

Collapse
 
kwikirizadan profile image
KwikirizaDan

Really nice wish you add full screen mode

Collapse
 
quanla profile image
Quan Le

You can always run your browser in fullscreen mode by yourself. But yeah, that is a nice suggestion. Also, while running the demo, you can run the apps in fullscreen mode

Collapse
 
iamspathan profile image
Sohail Pathan

I built Netflix Clone and honestly, I was able to learn a lot from it.

Collapse
 
russoboy profile image
Daniel Adigun

Wow that's beautiful, was it a fullstack or only frontend, you can send the GitHub repo to me because that will be amazing bro πŸ‘

Collapse
 
iamspathan profile image
Sohail Pathan

Sure :)

Collapse
 
dsaga profile image
Dusan Petkovic

Very interesting, tempted to pick a project and start on it, but not quite sure about the benefits, speaking as an experienced developer that is interested in side projects to expand the skills - but also don't want to waist time on things that have no real use...

Collapse
 
chrischism8063 profile image
chrischism8063 • Edited

Well look at it this way, it never hurts to look at others perspective when building apps.

No one is saying this is the ONLY way, just an interesting thread imo.

Collapse
 
bigsondev profile image
BigsonDev

That’s true in general. Projects are more targeted to Aspiring Developers hence the β€ž#beginners” tag, they can overcome that fear of procrastination and transform collected knowledge in the project-based approach to feel a sense of achievement. As per Experienced Developers benefits go, at this point I’d say it could be mentoring/coaching/reviewing solutions e.g. on Discord and showcasing your own high-quality code as a solution, creative variations, implementing e2e tests, or anything to put in the portfolio and stand out for the employers. ☺️

Collapse
 
ianfrye0818 profile image
Ian Frye

I have done a lot of these and struggled through them. I hate it at the time, but when I go to the next project I can at least remember how to google the problem I was stuck on. Learning by doing really is the best way!

Collapse
 
lalami profile image
Salah Eddine Lalami

Thanks for sharing ,
here another project you can learn from it's Mern-stack React.js Redux Node.js :
github.com/idurar/idurar-erp-crm

open source erp

Collapse
 
artxe2 profile image
Yeom suyun

I looked over the list, and while there are only a few items on it, it is quite interesting.
I think there will be demand for coding tests from companies as traffic increases.

Collapse
 
chrischism8063 profile image
chrischism8063

Hey, great call out here. Definetly some projects I'd love to work through as a refresher!!

Great job!!

Collapse
 
brandonwallace profile image
brandon_wallace

Those are all great projects.

Collapse
 
gulshan212 profile image
Gulshan Negi

Thanks a lot for sharing such information here with us. Well, in my opinion there can be few more in this list such as social media platform, blog platform and to-do list application.
Thanks

Collapse
 
bigsondev profile image
BigsonDev

You're welcome! Yeah, we have a social media platform and a blog platform on our list. The to-do list is kinda the Notely project already so we most likely will skip that one but the other two are definitely great projects to build your coding skills.

Collapse
 
narrinddhar_52 profile image
Narendra gorantla

πŸ‘‹

Collapse
 
kagayo profile image
Joffrey Kagayo

Thank you for sharing. It's a great article.

Collapse
 
pinky057 profile image
ishrat

Thank you for sharing.

Collapse
 
anumber8 profile image
anumber8

Wonderful article πŸ‘πŸ‘πŸ‘πŸ‘, most of the time devs only need a reminder that coding is the best way to standout from crowd.

Collapse
 
manchicken profile image
Mike Stemle • Edited

I really wish this list were more helpful than it is. It doesn’t really cover any of the items on the list, it just mentions them.

Collapse
 
bigsondev profile image
BigsonDev

Hey Mike, would you like to see a more of proposed technology stack for each item or anything else for them? πŸ‘€

Collapse
 
manchicken profile image
Mike Stemle

I’d just like some depth to the coverage. Lists are hard because you aim to cover a lot. It’s frustrating to see so many lists, they’re frequently not very helpful. A reader needs to go somewhere else to learn about the material being covered, and it often feels like a waste of time.

To me, these lists frequently feel more like self-promotion than interesting information.