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 SUMMER40 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!
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
API Configuration
UI Rendering
Search Panel
Sorting Functionality
Filters
Pokémons Details
How to create tutorials
Additional resources
Glitch template with project documentation
GitHub template with project documentation
2. Music Player
An awesome way to recreate your favorite music player and learn about audio controls in HTML (and CSS for styling).
You will learn more about UI controls, data handling, event handling, audio playback, and a cool UX/UI Design.
Cards
UI Logic
Play Button
Pause Button
Replay Button
Loop Button
Time Slider
Next Button
Previous Button
Mute Button
Unmute Button
Sound Level Slider
How to create tutorials
Additional resources
Glitch template with project documentation
GitHub template with project documentation
3. Code Editor
Recreate the main functionality of websites like JSFiddle or CodePen. 🤩
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
Navigation Bar
Code Area
Preview of Code
Resizing Vertical Bar
Change View Button
Code Editor Library
Responsive Web Design
Additional Cases
How to create tutorials
YT Video
SmashingMagazine Article
Additional resources
Glitch template with project documentation
GitHub template with project documentation
4. Quiz App
Create a fun quiz app with 10 randomly generated questions from different categories to easily play and test your knowledge.
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
API Configuration
Home Page
Quiz Generation
Questions Logic
Last Question
Results Bar
Results Answers
Sticky Navigation
Tablet Design
Mobile Design
How to create tutorials
YT Video
GeeksForGeeks Article
Additional resources
Glitch template with project documentation
GitHub template with project documentation
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!
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
API Configuration
Search Bar
Featured Today Section
Premieres and Announcements Section
Details Page
Skeleton Animation
Error Handling
Recent Searches
Skeleton Animation
Error Handling
How to create tutorials
Additional resources
Glitch template with project documentation
GitHub template with project documentation
6. Tic Tac Toe
One of the most classic games ever, always fun to work a little bit with game logic.
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
Home Page
Pick Player
Game Board
Gameplay
Game End
Modals
Tablet Design
Mobile Design
How to create tutorials
YT Video
GeeksForGeeks Article
Additional resources
Glitch template with project documentation
GitHub template with project documentation
7. Todo App
Another classic, todo app style, if you haven’t created one yet, it might be a good time now!
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
UI Container
Add Todo
Delete Todo
Mark as Completed
Light Mode Toggle
How to create tutorials
Additional resources
Glitch template with project documentation
GitHub template with project documentation
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.)
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
Content Strategy
Basic Navigation
Hero Section
Blog Posts Section
About Section
Global Footer
Posts Page
Dynamic Search
Blog Post Page
Mobile Design
How to create tutorials
Additional resources
Glitch template with project documentation
GitHub template with project documentation
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.
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
Data Management
Sidebar
Top Navigation
Numbers Cards
Sales Overview Chart
Sales Region Chart
Registered Users Chart
Integration List
Light Dark Mode
How to create tutorials
YT Video
Create with data Article
Additional resources
Glitch template with project documentation
GitHub template with project documentation
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!
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
UI Container
Character Customisation
Random Selection
Save Character
Persist Character
How to create tutorials
Additional resources
Glitch template with project documentation
GitHub template with project documentation
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! 🙇♂️
