Indrek here, and I’m back with another list of exciting challenges for all sorts of front-end developers.
This article is more or less a source of inspiration. Pick something that makes you excited to code and get on with building it.
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 the challenges.
Glitchy synthwave is exactly what you hoped it to be. A “glitchy” synth-wave looking animation on a 10x10x grid.
What you will learn by building the Glitchy Synthwave:
How to draw a 10x0 grid. Try using the new CSS grid for this.
How to use CSS transforms, transitions, and animations.
Check out the original code by George Francis if you’re unsure how to do this.
Job Recruiter Dashboard is a beautiful looking dashboard with all the necessities a tech recruiter might need.
What you will learn by building the Job Recruiter Dashboard UI:
How to fetch data from API. Every dashboard has some data to display. You can use whatever source for your “dummy data”.
How to put together a layout with CSS and HTML. Every application needs a base layout.
A simple, yet modern looking profile card with social media statistics, such as followers, likes, and photos. You can use “dummy” or hard-code the data for the profile card.
Card Original Source: https://profile-card-component-main-liart-omega.vercel.app/
What you will learn by building the card profile:
How to create modern-looking social media cards.
Basic HTML & CSS.
Challenge by Frontend Mentor. Code by David Ruiz.
"When energy is added to gas — you get plasma, ionized gas. It is the most common state of matter in the universe!
Found in stars, interstellar nebulae, solar winds, fluorescent lamps, neon signs, lighting, and more! The electric glows and colors plasma often produces are awe-inspiring." — Codepen.io
What you will learn by building the plasma animation:
A craft looking slider you can drag around. Depending on the pageviews, the price reflects that.
Notice the beautiful gradient background and shadows for the slider.
What you will learn by building the Interactive pricing component:
How to create custom sliders. Notice the slider also makes use of box-shadows.
How to use linear-gradients for creating beautiful and modern-looking backgrounds.
There is a new style and it’s gaining traction in popularity. Glassmorphism most defining characteristics are the following:
Transparency (frosted-glass effect using a Background Blur)
Multi-layered approach with objects floating in space
Vivid colors to highlight the blurred transparency
A subtle, light border on the translucent objects.
What you will learn by building the Glassmorphism Creative Cloud App Redesign:
How to create Glassmorphismic style backgrounds.
CSS and & HTMl for creating the layout.
We see this type of testimonials often on websites. Testimonials are a fun way to acquire trust with users, and possibly convert them into paying users.
What you will learn by building the “Testimonials” with CSS grid:
How to use the new CSS Grid.
Basic HTML and CSS.
Thanks for reading! Happy coding. I’m always ready to have fun conversations on Twitter.
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.
Keep me in the loop about how you’re doing with the coding challenges — Maybe I can offer some help or advice.