8 Frontend Coding Ideas That Will Inspire You To Code

Indrek here. Mastering programming is hard. There are no shortcuts. It involves putting in tons of work. Youll have to code as often as possible to get good at it.

Use each idea in this article as a source of inspiration. Pick something that makes you excited to code and get on with building it.

Use whatever tools or programming language you prefer. Ill also include what youll learn by building each idea.

Without further ado, here are todays coding ideas.

This article was originally published here: https://thewholesome.dev/p/8-frontend-coding-ideas-that-will

1. Animated Menu Tab Bar

This is a 60 FPS fluid header with animations between switching tabs.

You can either use CSS animations or JavaScript to achieve the smooth 60 FPS animations.

What you will learn by building the animated menu tab bar

• How to use HTML, CSS, and JavaScript in harmony to recreate the menu.

• How to work with SVGs, CSS animations, and combining both.

2. Cyberpunk 2077-Themed Buttons

Beautiful Cyberpunk-style buttons. Notice the hover effect. Try to recreate it. Check out the original if youre unsure how to do that.

What you will learn by building the Cyberpunk 2077 buttons:

• How to use CSS variables, keyframes, and clip-paths.

• How to create complex hover animations.

3. Chessboard With Chess Pieces

Interest in chess has skyrocketed after the success of The Queens Gambit, a drama miniseries based on Walter Teviss 1983 novel. I highly recommend watching it if you havent already!

Bonus points: Make the chessboard interactive.

What you will learn by building the chessboard:

• How to create an 8x8 grid. Try using CSS Grid for that.

• Hand-carving the chess pieces with CSS.

• Bonus: Make it interactive with JavaScript!

4. Project Management Dashboard UI

This is a dashboard for project management purposes. Monitor projects and chat with clients.

What you will learn by building the project management dashboard UI:

• Building clean UIs with CSS and HTML.

• How to use WebSockets to create the chat.

5. Neumorphic Animation

Neumorphism (or Neo-skeuomorphism) is a modern iteration of a style of designing web elements, frames, screens, etc. GitHub

What you will learn by building the neumorphic animation:

• How to create smooth animations with CSS and HTML.

6. HTML Earth

Lets recreate the Earth! By the way, did you notice the moons shadow on the Earths surface when it passes in front of the sun?

What you will learn by building the HTML Earth:

• How to use the LUME library. According to GitHub, LUME is a toolkit that simplifies the creation of rich and interactive 2D or 3D experiences for any device from mobile to desktop to AR/VR.

• How to create 2D and 3D objects with HTML, CSS, and JavaScript.

7. Fluid Tabs With Animations

Just look at this beauty. Notice the small details every time you change tabs.

What you will learn by building the fluid tabs with animations

• CSS transform for 60 FPS animations.

• How to create complex animations with CSS or JavaScript. Its up to you!

8. Cup of Water

This makes me want to drink water. Grab a sip before you start solving this challenge.

What you will learn by building the cup of water

• How to use CSS to create smooth 60FPS animations.

• How to use CSS transform and pseudo-selectors.

Conclusion

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. (-25% off for dev.to users)

Thanks for reading and happy coding!