Programming is a difficult thing to master. I found one of the best ways to master programming is simply building as much as you can. Hard work pays off - especially with programming.
If you're new to these articles, they serve more or less as a source of inspiration. Pick a challenge that makes you excited to code and get on with building it.
You can use any tools you like for the challenges. So if you've got something you'd like to practice, feel free to give it a go.
If you're in a hurry and never want to run out of coding ideas - I've compiled a list of over 100 challenges here.
Note: Please check out the original sources for the challenges as well.
Without further ado, here are the challenges!
A beautiful-looking tab that animates the icons when you hover or click them. Pay extra attention to the small animations.
"Tabbar animation - Only CSS" - By Milan Raring
What you will learn by building the Tabbar animations
- How to use advanced CSS concepts such as transforms, animations, transitions, etc.
Code the crowdfunding product page and get it looking as close to the design as possible. Check out the challenge page here for more details and instructions.
"Crowdfunding product page"
What you will learn by building the crowdfunding product page
- See the number of total backers increment by one after confirming a pledge.
- Toggle if the product is bookmarked or not.
- CSS hover states for interactive components.
- CSS and HTML for creating a silky smooth layout.
We're headed back to school - Coding school that is. Check out this awesome adventure pack Braydon Coyer made with only using CSS.
"CSS Adventure Pack" - By Braydon Coyer
What you will learn by building the CSS adventure pack
- How to use HTML and CSS to draw real-life objects.
- How to use CSS variables.
We've all seen countdown timers. Why not build your own? Try building out the countdown timer and get it looking as close to the design as possible.
"Launch countdown timer"
What you will learn by building the launch countdown timer
Countdown timer that ticks down every second
Bonus Points: When a number changes, make the card flip from the middle.
Any Substack newsletter you subscribe to will automatically show up in the reader. If you want, you can add third-party RSS feeds, too.
Note: The challenge is to only re-create the front-end layout. Use any dummy data as you see fit.
Substack reader - https://reader.substack.com/inbox
What you will learn by building the Substack reader clone
- How to use CSS and HTML to re-create a modern-looking app.
- Bonus points: You can use any newsletter aggregator API to make it functional.
Try building out the football match scorecard and get it looking as close to the design as possible. Don't skip on the small details, such as CSS shadows and icons.
"Football (soccer) match score component" - By Håvard Brynjulfsen
What you will learn by building the Football (soccer) match scorecard component
- How to use CSS and HTML in harmony to create a beautiful-looking card.
- Advanced CSS features such as shadows and variables.
Look at the beauty. Don't you wish all apps look as sweet as this one? Check out the working version here.
"Task Management UI" - By Aaron McGuire
What you will learn by building the task management UI
Thanks for reading. Happy coding!
Looking for more coding ideas? Never run out of coding ideas, ever again. Get access here to a bunch of front-end challenges by me.