227 reads

The 10 Projects That Will Help You Git Gud at Coding 👩‍💻🧑‍💻

by AdrianNovember 13th, 2023

Too Long; Didn't Read

Elevate your coding journey from theory to practice with 10 diverse projects, from a basic HTML/CSS business card to full-stack chat apps. Gain real-world skills in JavaScript, APIs, and modern frameworks to enhance your portfolio and ace your tech interviews. Ready, set, code!

featured image - The 10 Projects That Will Help You Git Gud at Coding 👩‍💻🧑‍💻

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 the planning of the project itself.

1. Business Card

Good intro warm-up to dive into Web Development.

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

Cards

UI Container
User Contact Section
User Image
User Info Section
Absolute-Positioned Shapes
Animations

Additional resources

2. The Veggie King

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

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

Cards

Navigation
Hero Section
About Us Section
Menu Section
Gallery Section
Contact Section
Footer
Hover Effects
Mobile Menu
Responsive Web Design
Optimization

Additional resources

3. Calculator

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

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

Cards

UI Container
Input Numbers
Math Operations
Clear and Reset
Previous Operation
Light & Dark Mode
Edge Case Handling

Additional resources

4. Just Weather

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

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

Cards

API Configuration
Search Bar
Location and Temperature
Hourly Forecast
Weather Details
Location Access
Temperature Unit Switching
Recent Searches
Skeleton Animation
Error Handling

Additional resources

5. GifTok

More APIs, pagination, infinity scrolling.

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

Cards

API Configuration
Display First GIF
Swipe Next
Swipe Back
Infinite Swiping
User Details
Skeleton Loading
Desktop Version
Edge Cases

Additional resources

6. Notely

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

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

Cards

Navigation Placeholder
New Note
List Notes
Edit Note
Delete Note
Complete Note
Search Notes
Filter Notes
Completed Notes
Empty State
Fields Validation
Persist Storage

Additional resources

7. Color Memory

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

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

Cards

Circle-shaped Component
Home Page
Gameplay
Game Over Modal
Best Score
Game Rules Modal
Sound Notifications
Responsive Web Design
Edge Cases

Additional resources

8. AI Post Generator

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

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

Cards

API Configuration
UI Container
Social Platform Selector
Message Textarea
Tone and Style Selectors
Generate Post Button
Generation Phase
Buttons Logic

Additional resources

9. Level Editor

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

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

Cards

UI Container
Asset Drawing Mechanism
Quick Asset
Undo Feature
Eraser Tool
Zoom Capability
Settings and Export
Grid Resizing
Persistence of Level

Additional resources

10. Any Chat

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

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

Cards

Onboarding Page
Enter Chat Page
Node.js Server
Chat Page Header
Chat Window
Chat Page Footer
Message Sending
Emoji Support
Connections and Disconnections
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! ❤️