20 Inspirational Front-End Challenges You Can Start Coding Today

Challenge yourself and bring your front-end skills to the next level

Indrek Lasn
Nov 3 · 8 min read
animation of flaming skull on a card with the number 13 in the lower left corner
animation of flaming skull on a card with the number 13 in the lower left corner
Ghost card — By Yugam

As a developer, the more projects and experience you have, the better you become. Coding is a muscle that, like any other, requires constant exercise.

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.

Here’s the full list of challenges you could start coding today.

1. Ghost Card (Expert)

The ghost card concept is a flaming skull that is animated with CSS and JavaScript.

Every front-end developer needs to understand the basics of how to create smooth animations and transitions.

This is your chance to up your game by recreating this awesome burning skull.

animation of flaming skull on a card with the number 13 in the lower left corner
animation of flaming skull on a card with the number 13 in the lower left corner
Ghost card — By Yugam

Here’s what you’ll learn by building the ghost card

  • Mastering CSS — Knowing your way around transitions, keyframes, and animations are all required to recreate this animation
  • Become proficient at understanding 3D modeling and 3D physics for the animations — You’ll need the latter to understand how to create smooth transitions for the flame that feel intuitive.

2. Job Search Platform UI (Intermediate)

Job Search Platform UI is a modern, clean-looking job-seeking platform.

The platform includes most of the features every employer expects from a decent front-end developer.

screenshot of a job search app
screenshot of a job search app
Job Search Platform UI — By Aysenur Turk

Here’s what you’ll learn by building the Job Search Platform UI

  • HTML — You’ll master an understanding of how to work with the layout.
  • CSS — The platform requires a fair bit of knowledge on how to style the buttons, cards, etc.
  • JavaScript — There are filters when it comes to searching for jobs. You’ll need to figure out how to do that with JavaScript.

3. CSSometric Shapeshifting Animation (Expert)

The CSSometric animation could be used as a neat loading indicator for progress.

For example — Users are uploading images? Show the animation while the images are uploading to the server.

animation of a line of white, red, blue, and yellow 3D squares changing shape and color
animation of a line of white, red, blue, and yellow 3D squares changing shape and color
CSSometric — By Ryan Mulligan

Here’s what you’ll learn by building the CSSometric shapeshifting animation

  • Mastering CSS — Knowing your way around transitions, keyframes, and animations are all required to recreate this animation
  • Become proficient at understanding 3D modeling and 3D physics for the animations

4. Halloween-Style Animation (Intermediate)

The Halloween animation is a Halloween-themed circle that has a rotating animation.

The circle changes based on where the black fade appears on the circle.

animation of colored concentric circles with a dark shape suggesting a bat that passes in front
animation of colored concentric circles with a dark shape suggesting a bat that passes in front
Halloween — By Ana Tudor

Here’s what you’ll learn by building the Halloween animation

  • Good understanding of CSS animations with keyframes, transitions, and timings
  • Basic understanding of HTML — You’ll need to draw the circle on a canvas with HTML. Keep in mind, you could use JavaScript for drawing the circle on a canvas.

You can watch the step-by-step tutorial for this animation by Ana Tudor.

5. 10162020 Animation (Expert)

The 10162020 animation has colorful pebbles attached to strings that are falling from the sky.

animation of colored circles that drop down on strings to form a line that then sways and changes color
animation of colored circles that drop down on strings to form a line that then sways and changes color
10162020 — By Toshiya Marukubo

Here’s what you’ll learn by building the 10162020 animation

  • Mastering CSS — Knowing your way around transitions, keyframes, and animations are all required to recreate the 10162020 animation
  • Become proficient at understanding 3D modeling and 3D physics for the animations

6. CSS-Only Interactive 3D Dice (Intermediate)

The following challenge requires you to draw a dice. But not any ordinary dice — this dice needs to be able to rotate degrees, based on the controls.

animation of a 3D die that rotates
animation of a 3D die that rotates
CSS-only interactive 3D dice”— By Hunor Marton Borbely

Here’s what you’ll learn by building the CSS-only interactive 3D dice

  • Basic understanding of 3D effects for CSS. You’ll need to rotate the dice based on the user input.
  • Basic understanding of JavaScript events — When the user clicks on the controls, you have to rotate the dice based on the input.

7. meow meow keyboard (try it with sound)

Meow Meow keyboard is a web-based piano that plays like any regular piano, but — you guessed it! The sounds are replaced with cats meowing.

It’s a fun project — Try it out yourself!

piano keyboard with cat’s paw on one key
piano keyboard with cat’s paw on one key
Meow Meow keyboard”— By Lauren Wang

Here’s what you’ll learn by building the Meow Meow keyboard

  • Basic understanding of Tone.js — The Meow Meow keyboard makes heavy use of the Tone library to manipulate the sounds.

“Tone.js is a Web Audio framework for creating interactive music in the browser.”— official Tone.js website.

  • Basic understanding of CSS and HTML for re-creating the keyboard and the animations it includes

8. Lo-Fi Tailwind CSS User Avatar Stacks (Beginner)

This produces neat-looking avatar stacks built using Tailwind. These common avatar stacks are found in many alleys of the internet. I’m sure you’ve seen them before somewhere already — why not create your own?

three rows of overlapping circular profile pictures
three rows of overlapping circular profile pictures
Lo-fi Tailwind CSS User Avatar Stacks — By Rob

Here’s what you’ll learn by building the Lo-Fi Tailwind CSS User Avatar Stacks

  • Basic understanding of HTML and CSS
  • Basic understanding of how to use the Tailwind library

“Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.” — official Tailwind website.

9. Neumorphic Loading Animation (Intermediate)

The Neumorphic loading animation is neat and hypnotic looking. It can be used for various loading pages as a progress indicator.

Notice: You can also change the colors of the loading animation, making it multicolored.

animation of concentric circles whose color changes when an arrow clicks on different color dots at the bottom of the screen
animation of concentric circles whose color changes when an arrow clicks on different color dots at the bottom of the screen
Neumorphic Loading Animation — By Ruphaa Ganesh

Here’s what you’ll learn by building the Neumorphic Loading Animation

  • Comprehending the basics of CSS animations and using CSS keyframes, transitions, etc.
  • JavaScript basics for changing the color of the animation.

10. Infinity Pencil Spin (Beginner)

A pencil that spins, infinitely. The pencil is not an image, but it’s “hand-carved” with CSS. This makes it more challenging and interesting.

animation of spinning pencil simultaneously drawing and erasing a black line
animation of spinning pencil simultaneously drawing and erasing a black line
Infinity pencil spin — By Ruphaa Ganesh

Here’s what you’ll learn by building the Infinity Pencil Spin

  • Comprehend the basics of CSS animations and using CSS keyframes, transitions, etc.
  • How to use HTML and CSS to create the pencil

11. Mini Insta-Friends List Layout (Beginner)

The Mini Insta-Friends List Layout concept is heavily inspired by the original Instagram stories feature.

a horizontal line of circles, each containing the photo of a person with their name underneath
a horizontal line of circles, each containing the photo of a person with their name underneath
Mini Insta-Friends Scrolling List Layout — By Adam Argyle

Here’s what you’ll learn by building the Mini Insta-Friends List Layout

  • How to use HTML and create a fluid layout
  • Basics of CSS and styling the layout

12. Link Hover Animation (Beginner)

The Link Hover Animation produces a neat-looking hover animation whenever you hover over a link. The animation draws a circle around the link.

The words “check out the link here” with a moving arrow that draws a blue line around the words “the link”
The words “check out the link here” with a moving arrow that draws a blue line around the words “the link”
Link hover animation — By Aaron Iker

Here’s what you’ll learn by building the Link Hover Animation

  • Basics of working with HTML and CSS
  • Understanding hover animations for CSS

13. Quick Details With Zoom View (Beginner)

The Quick Details With Zoom View is a shop-like overview of products. You usually see similar layouts when you’re shopping online.

Animation of an online catalogue showing photos of products with prices and descriptions beneath
Animation of an online catalogue showing photos of products with prices and descriptions beneath
Quick Details With Zoom View — By Jorge Aguilar

Here’s what you’ll learn by building the Quick Details With Zoom View

  • Basics of working with HTML and CSS.
  • Understanding the hover animations for CSS. In this case, you’ll have the show and hide elements, based on where the cursor is.

14. CSS-Only Ghost (Beginner)

Yikes! A ghost!

The ghost is not an image. It’s “hand-drawn” with CSS only. Challenge your CSS skills and try to code a ghost with only CSS.

simple line drawing of ghost
simple line drawing of ghost
Ghost 👻 — By Håvard Brynjulfsen

Here’s what you’ll learn by building the CSS-Only Ghost

  • Solid understanding of CSS and HTML

15. Hot Dog Button (Beginner)

The hot-dog looking button fits neatly into a food-delivery or food-ordering application. Why not create something that the users will remember?

Animation of a hot dog being drawn. When complete, the drawing turns into an oblong with the words “Food ordered” on it.
Animation of a hot dog being drawn. When complete, the drawing turns into an oblong with the words “Food ordered” on it.
Hot Dog Button — By Sarah Drasner

Here’s what you’ll learn by building the Hot Dog Button

  • Solid understanding of CSS and HTML.
  • Solid understanding of how to use CSS animations.

16. CSS-Only Developer Avocado (Intermediate)

Who doesn’t love avocados? They’re good for you and make a great breakfast.

Look closely — There are numerous details about this challenge. Notice the mild gradients and the rough edges around the avocado.

drawing of half an avocado
drawing of half an avocado
Developer Avocado— By Sarah Drasner

Here’s what you’ll learn by building the CSS-Only Developer Avocado

  • Mastering CSS and how to draw complicated objects.
  • Having an eye for extraordinary detail.

17. Gray Burst Abstraction Animation (Expert)

The Gray Burst Animation is a dark-theme-based burst of light on a bright background.

Notice: There are multiple shades of colors and different coordinations with the animation.

animation showing lines in different shades of gray and black being emitted from a central point
animation showing lines in different shades of gray and black being emitted from a central point
Gray Burst — By Chris Coyier

Here’s what you’ll learn by building the Gray Burst Abstraction Animation

  • Mastering CSS animations, combined with JavaScript
  • In-depth knowledge working with scalable vector graphics, also known as SVGs

18. City CSS-Only Illustration (Intermediate)

The city background illustration is a modern city. This is not an image but drawn by using CSS and JavaScript.

Notice all the small details in the background. Those are all drawn with CSS and JavaScript.

line drawing of different city buildings and some trees against a backdrop of sky with clouds and a hot air balloon
line drawing of different city buildings and some trees against a backdrop of sky with clouds and a hot air balloon
City Illustration— By Lisi

Here’s what you’ll learn by building the City CSS-Only Illustration

  • In-depth knowledge of CSS and how to code complex
  • Solid understanding of JavaScript and combining it with CSS and HTML

19. SVG Animation With Speech Recognition (Expert)

Toggle animations with your voice or mouse. The animations are working with speech recognition. By allowing the use of your microphone, you can change the animation based on the input.

animation of a simple drawing changing color as an arrow selects a new color from a palette
animation of a simple drawing changing color as an arrow selects a new color from a palette
SVG Animation With Speech Recognition— By Lisi

Here’s what you’ll learn by building the SVG Animation With Speech Recognition

  • Usage of the experimental (as of late 2020) Speech Recognition API

“The SpeechRecognition interface of the Web Speech API is the controller interface for the recognition service; this also handles the SpeechRecognitionEvent sent from the recognition service.” — Mozilla documentation.

  • Deep knowledge of working with SVGS, CSS, and HTML

20. Smooth Dark and Light Theme Toggle (Beginner)

We all know and love this feature. Nowadays, every application allows us to toggle between a dark or a bright theme. Why not learn how it works?

animation of text changing from black letters on a white background to white letters on a black background
animation of text changing from black letters on a white background to white letters on a black background
Toggle — By Joe

Here’s what you’ll learn by building the Smooth Dark and Light Theme Toggle

  • Basics understanding of CSS variables
  • How to work with JavaScript and events

Conclusion

You made it to the end! Thanks for reading. I hope you feel inspired. Happy coding!

Better Programming

Advice for programmers.

Thanks to Zack Shapiro

Indrek Lasn

Written by

I develop the internet. Discover tomorrow’s winning startups today → https://crushingit.substack.com/ — Connect with me on Twitter @ https://twitter.

Better Programming

Advice for programmers.

Indrek Lasn

Written by

I develop the internet. Discover tomorrow’s winning startups today → https://crushingit.substack.com/ — Connect with me on Twitter @ https://twitter.

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store