6 Projects You Can Build Today to Level Up Your Front-End Coding Skills

A list of inspiring ideas for your next project to stretch your skills

One of the best ways to improve at coding is to spend as much time coding as possible. The more projects and experience you have under your coding belt, the better you become. Simple as that.

Why not spend a couple of evenings on a side project and put in the extra effort to become exceptionally better at coding.

Without further ado, here’s the list of coding ideas for boosting your front-end development skills. Use this article as a source of inspiration for your next project.


3D Spinning Triangle (Expert Level)

Start your morning, lunch, or afternoon off by re-creating and coding this complex 3D spinning triangle.

By default, the spinning triangle is only using CSS for animations, but you’re more than welcome to use JavaScript also.

Here’s what you’ll learn by building the spinning 3D triangle

  • Master CSS transitions, keyframes, and animations.

  • Become proficient at understanding 3D modeling and 3D physics.


Neumorphic Light Switch (Intermediate Level)

As you slide the switch, the screen and the switch get dimmer. Cool concept, beautiful design, and brilliant idea overall.

The deeper the slider, the darker the screen gets. It basically acts like an “off” switch when it’s at the bottom position and an “on” switch when it’s at the top position.

Note: Notice there’s a third state as well that results in the switch becoming a yellowish color.

Here’s what you’ll learn by building the neumorphic light switch

  • Handling different states based on where the switch is. There are three states — “on,” “neutral,” and “off” — in this demo.

  • How to animate objects using CSS or JavaScript.

  • How to handle user input, such as sliding the switch in this case.


CSS Folder + Hover Interaction (Beginner Level)

As you hover over the folder, it opens up. Neat, clean, and stylish design.

Here’s what you’ll learn by building the CSS Folder with hover interactions

  • How to use HTML and CSS to create clean-looking designs.

  • Handling mouse hovering and chancing between different states. When the user hovers over the folder, show the open folder, or else show the regular closed version folder.

  • Smooth CSS transitions when opening and closing the folder.

Animated Drone (Intermediate Level)

Create an animated drone using HTML, JavaScript, and CSS. You can either use just CSS or draw it all with SVG — the choice is up to you.

Bonus points: Make the drone controllable and accessible using the keyboard, mouse, or both.

Here’s what you’ll learn by building the animated drone

  • Advanced HTML and CSS concepts, such as CSS animations, positioning, and structuring semantic HTML.

  • How to animate objects with CSS transitions, transforms, and keyframes.

Note: Be sure to check out the animated drone solution by Nick Argyle.


Material Design Card (Beginner Level)

Recreate the material design card. Make it more interesting by introducing transitions, hover effects, and click events. Make it interactive.

Here’s what you’ll learn by building the simple card component

  • How to use HTML, CSS, and Javascript to create professional-looking designs.

  • How to handle click, mouse, and keyboard events with JavaScript.

  • How to make your page responsive on mobile by using CSS.

Animated Clip-Path Slider Concept (Intermediate Level)

Re-create this conceptual yet impressive stylish slider. The slider has beautiful fade-ins, fade-outs, and other cool animations.

This slick approach to sliders gives the design a breath of fresh air.

Here’s what you’ll learn by building the animated clip-path slider

  • How to use CSS for positioning, animations, and clip-paths.

  • How to handle user events with JavaScript. The events are such as hovering over elements with the mouse or clicking on the slider arrows.


Conclusion

Thanks for reading. I hope you gained some inspiration for your next project. Sign up for more. It’s free.

Happy coding!