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
Glitchy synthwave is exactly what you hoped it to be. A “glitchy” synth-wave looking animation on a 10x10x grid.
“Glitchy Synthwave” by George Francis
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 UI
Job Recruiter Dashboard is a beautiful looking dashboard with all the necessities a tech recruiter might need.
“Job Recruiter Dashboard UI” — By Aybüke Ceylan
What you will learn by building the Job Recruiter Dashboard UI:
How to create beautiful charts with JavaScript and CSS. Pick any charting library you prefer.
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.
Card profile with statistics
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.
Plasma Animation
"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
Source: https://codepen.io/pen?template=jOMRMdQ
What you will learn by building the plasma animation:
- How to create a “gassy” looking animation with CSS or JavaScript.
Interactive pricing component
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.
Source: https://www.frontendmentor.io/challenges/interactive-pricing-component-t0m8PIyY8
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.
Glassmorphism Creative Cloud App Redesign
“Glassmorphism Creative Cloud App Redesign” — By Aysenur Turk
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.
— Source
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.
“Testimonials” with CSS grid
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.
Preview — Code by Vincent Frank
What you will learn by building the “Testimonials” with CSS grid:
How to use the new CSS Grid.
Basic HTML and CSS.
Before you go
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.
Top comments (0)