🚀 10 Projects to skyrocket your coding skills
Tags: webdev, javascript, react, beginners
Published: 2023-11-08 11:18:10

## 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](https://www.linkedin.com/in/adrian-bigaj-282277130/) 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](https://app.bigdevsoon.me/projects/business-card)
Good intro warm-up to dive into Web Development.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/naebo2g2thxvabzqyu0h.png)

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

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

## [The Veggie King](https://app.bigdevsoon.me/projects/the-veggie-king) 
A classic CSS RWD Landing Page style, feel the media queries!

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

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

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

## [Calculator](https://app.bigdevsoon.me/projects/calculator)
Let's learn more about JS, logic, pure functions, and a bit of math operations.

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

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

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

## [Just Weather](https://app.bigdevsoon.me/projects/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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dyhh9offr1n7qlbi3372.png)

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

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

## [GifTok](https://app.bigdevsoon.me/projects/giftok)
More APIs, pagination, infinity scrolling.

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

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

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

## [Notely](https://app.bigdevsoon.me/projects/notely) 
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/xqxbj0wc699ysm9kauyx.png)

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

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

## [Color Memory](https://app.bigdevsoon.me/projects/color-memory) 

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

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

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

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

## [AI Post Generator](https://app.bigdevsoon.me/projects/ai-post-generator)
Fancy, modern trend with AI, right? Awesome opportunity to understand one of the most popular available APIs.

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

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

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

## [Level Editor](https://app.bigdevsoon.me/projects/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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5kqkhjhpwyc6h2jc10ug.png)

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

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

## [Any Chat](https://app.bigdevsoon.me/projects/any-chat)
Mastering the full flow of Frontend and backend, sockets, and broadcasting of events is such a useful skill set.

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

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

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

## 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](https://bigdevsoon.me/) 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!** ❤️