10 Inspiring Ideas for Your Next Front-End Project

A credit card form, a Rubix Cube, and more

Simon Holdorf
Jan 11 · 4 min read
Photo by NeONBRAND on Unsplash

It’s just amazing what one can build by combining web technology with creativity.

Everything you are going to see in this article has been created with just JavaScript, HTML, and CSS. No Photoshop or similar tools have been used and everything runs perfectly fine in the browser.

While it is fun to explore these little showcases and play with them, it’s even better that you can have a look at the source code of every project. This offers great opportunities to learn new things and get a lot of inspiration from awesome creators.

I have chosen 10 great examples that have been published on CodePen.io and are publicly accessible. CodePen is an outstanding platform that has been co-created by Chris Coyier (founder of css-tricks.com).

They call themselves a social development environment where developers and engineers can collaborate on projects, showcase their work, share things with the community and prototype new ideas.

I encourage you to explore all of the examples below, play with them and try to understand how they work. Not only will you have a lot of fun but learn a lot about creativity on the web. And not to forget that we honor the outstanding work of the creators!

1. Click the button!

It’s my favorite Pen on CodePen because it is simple yet impressive, comes with a twist and brightens my mood every time I play with it. I guarantee you won’t regret trying this one out!

2. Credit Card Form

When I discovered “Credit Card Form” by Muhammed Erdem (who was recently announced number 1 most popular creator on CodePen), I was positively surprised and immediately wondered why website creators haven’t been using such a beautiful form yet.

It’s actually fun to give my card details to the form, something every website owner should have the highest interest in!

3. Pure CSS Still Life

And it is a good reminder what we can achieve with CSS! Ben has some more examples of his CSS magic so you should check out his profile on CodePen as well.

4. Color This Sofa!

Furthermore, it’s a good example what you can do with SVGs and Blend Mode.

5. The Cube

This is also one of the most-loved projects on CodePen in 2019 and I can only second this!

6. Face Button

Take a look at what a small amount of code is needed to generate this interactive and fun demonstration. It reminds me of the fact that often times, less is more. Well done, Katherine!

7. Mini Music Player

While we can argue about the music playing in this demonstration, we definitely cannot about the look and feel of the player. Good job, Muhammed.

And to all streaming providers out there: Check this out, maybe you can learn something!

8. Simple CSS Waves

Imagine this on your personal website or landing page — low effort but great visualization. Lightweight yet powerful — I like this combination!

9. CSS Card Hover Effects

10. Clip Clop Clippity Clop

Yes, that’s right, just CSS. Isn’t that awesome?

This always reminds that I have to take CSS more seriously and should invest more time exploring the countless possibilities it offers us. And know enjoy the ride, my fellow readers!

Alright, this is the end of this epic demonstration of the immense creativity engineers have. I got a tremendous amount of inspiration by exploring these pens and I hope that you will too!

Better Programming

Advice for programmers.

Simon Holdorf

Written by

Technologist 🚀 Full-Stack Engineer ⚡ Entrepreneur 🤖 Programming is the best job in the world!

Better Programming

Advice for programmers.

More From Medium

More from Better Programming

More from Better Programming

More from Better Programming

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade