DEV Community

loading...
Cover image for 8 Frontend Coding Ideas That Will Inspire You To Code

8 Frontend Coding Ideas That Will Inspire You To Code

Trevor Lasn
Free Newsletter: https://thewholesome.dev/
Originally published at thewholesome.dev Updated on ・3 min read

Indrek here. Mastering programming is hard. There are no shortcuts. It involves putting in tons of work. You’ll 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. I’ll also include what you’ll learn by building each idea.

Check out my profile for previous challenges. Or 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.

Without further ado, here are today’s 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.

Alt Text

Animated Tab Bar by abxlfazl khxrshidi.

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

Alt Text

Pure CSS Cyberpunk 2077 Buttons 😎 by Jhey.

Beautiful Cyberpunk-style buttons. Notice the hover effect. Try to recreate it. Check out the original if you’re 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

Alt Text

Cheap AI Chess! by Jake Albaugh.

Interest in chess has skyrocketed after the success of The Queen’s Gambit, a drama miniseries based on Walter Tevis’s 1983 novel. I highly recommend watching it if you haven’t 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

Alt Text

Project Management Dashboard UI by Aybüke Ceylan.

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

Alt Text

Neumorphism_animation by masuwa.

“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

Alt Text

HTML Earth (Made with LUME) by Joe Pea.

Let’s recreate the Earth! By the way, did you notice the moon’s shadow on the Earth’s 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.

Alt Text

Tabbar by Aaron Iker.

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. It’s up to you!


8. Cup of Water

Alt Text

A cup of Water by Zane Wesley

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!

Discussion (17)

Collapse
imprimph profile image
Jaswanth

These are from codepen🙄

Collapse
trevorlasn profile image
Trevor Lasn Author

Yes, they are! Check out the original article where I give props/credits to the authors.

Collapse
dewaldels profile image
Dewald Els

You should post the credits here too. You’re implying it’s yours by not adding credit.

Thread Thread
trevorlasn profile image
Trevor Lasn Author

I love giving credit where it's due. Do you know how I can have captions for the images for markdown?

Thread Thread
dewaldels profile image
Dewald Els

Yep :) you can use the link syntax along with the figcaption

Collapse
imprimph profile image
Jaswanth

Cool

Collapse
michaeltharrington profile image
Michael Tharrington (he/him) • Edited

Very cool! Also, just to note that it's nice to see everyone hopping on here to suggest adding credit, and to hear your willingness to do so and eagerness to do it in the smoothest way possible!

Something particularly cool about CodePen, you can actually embed pens on DEV. This image should help! 👇

Liquid tag for Codepen

If you want to learn more about liquid tags and the quirks of the DEV editor, check out this guide.

Thanks for sharing this post!

Collapse
trevorlasn profile image
Trevor Lasn Author

Sweet! I'll definitely make use of that in the future.

Collapse
brendamichellle profile image
Brenda Michelle

Thanks for sharing this list definitely going to try some out. To give credit you can add a link under the image to the original codepen. 👍😊

Collapse
theelitegentleman profile image
Buhake Sindi

Please post the full link to the resource for 4. Project Management Dashboard UI.

Collapse
mattymaloney profile image
mattymaloney

You're charging $9 for a list of links to other devs' codepens? Please tell me I misunderstand.

Collapse
gilfewster profile image
Gil Fewster

So, you’re charging people for a list of links to publicly available work by other developers?

Unless I’m misunderstanding something about what you’re selling, this is totally unethical.

Collapse
trevorlasn profile image
Trevor Lasn Author

I think you misunderstood.

Collapse
jack_garrus profile image
Nadia G.

Nice findings! These make me want to start right now!

Collapse
inigogb profile image
BaronVonHex

Awesome examples! Thx

Collapse
bacloud14 profile image
bacloud14

oh, that's just huge !

Collapse
dewaldels profile image
Dewald Els

I meant to say as well, nice choice of examples! The blog site you have is also very responsive. Scrolling is silky smooth ✌️