Here Are 7 Fun, Yet Challenging Front-End Ideas You Can Code

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!

1. "Tabbar animations"- Built with only CSS

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

Source: https://codepen.io/milanraring/pen/qBEPzKB

What you will learn by building the Tabbar animations

How to use advanced CSS concepts such as transforms, animations, transitions, etc.

2. Crowdfunding product page

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"

Source: https://www.frontendmentor.io/challenges/crowdfunding-product-page-7uvcZe7ZR

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.

3. "CSS Adventure Pack"

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

Source: https://codepen.io/braydoncoyer/pen/KKNRaKQ

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.

4. Launch countdown timer

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"

Source: https://www.frontendmentor.io/challenges/launch-countdown-timer-N0XkGfyz-

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.

5. Substack reader clone

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.

6. Football (soccer) match scorecard component

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.