20 small but inspiring web developer calls

The more projects and experience you have, the better you become. Coding is a skill 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 get better? Without further ado, here’s a list of ideas to improve your front-end development skills. Use this article as inspiration for your next project.

The ghost map concept is a flaming skull animated with CSS and JavaScript. Every front-end designer should understand the basics of creating fluid animations and transitions. Recreating this awesome burning skull is your chance to get better.

Ghost card from Yugam

Here’s what you can learn by recreating a ghost map

• Master CSS. To recreate this animation, you need to know how to work with transitions, keyframes, and animations.
• Become a pro in understanding 3D modeling and 3D physics in animation – you will need the latter to understand how to create smooth flame transitions that feel intuitive.

It is a modern, clean job search platform. It includes most of the features that every employer expects from a decent front-end developer.

Job search platform interface from Aysenur Turk

What will you learn

• HTML – You will master the understanding of how to work with a layout.
• CSS – the platform requires a good knowledge of how to style buttons, cards, etc.

JavaScript – when searching for vacancies you need filters. Figure out how to write them using JavaScript.

CSSometric animations can be used as a neat indicator of loading progress. For example, when users upload images, an animation can be shown as they are uploaded to the server.

CSSometric – from Ryan Mulligan

Here’s What You Will Learn

• Master CSS – Learn to work with transitions, keyframes and animations.
• Get experience in 3D modeling and 3D physics in animation.

This is a Halloween themed circle with spinning animation. The circle changes depending on where the black sheen appears on it.

Halloween from Ana tudor

Here’s What You Will Learn

• A good understanding of CSS animations with keyframes, transitions, and timings.
• Basic understanding of HTML. We need to draw the circle using the HTML – canvas element. Be aware that JavaScript can be used to draw the circle.

You can also look to create animation step by step.

Animation 10162020 is colored balls attached to strings falling from the sky.

10162020 from Toshiya Marukubo

Here’s What You Will Learn

• Master CSS – transitions, keyframes, and animations are all required to recreate the 10162020 animation.
• Get experience in 3D modeling and 3D physics in animation.

The next challenge is to draw bones. But not ordinary cubes – your cubes must be controlled, rotated by certain degrees.

Interactive 3D cube with pure CSS from Hunor marton borbely

Here’s what you will master

Basic understanding of 3D effects in CSS. You need to rotate the cubes according to user input.
Understanding JavaScript events. The reason is the same as above – you need to respond to user input.

Meow Meow keyboard is a web piano that plays like any regular piano, but – you guessed it! – sounds are replaced by cat meows. Try it yourself – it’s fun!

Meow Meow keyboard from Lauren wang

Here’s What You Will Learn

• Basic understanding Tone.js – The Meow Meow keyboard actively uses this library to manipulate sounds.

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

• A basic understanding of CSS and HTML to re-create the keyboard and animate it.

Neat rows of overlapping avatars built using Tailwind… Such rows can be found in many nooks and crannies of the Internet. I’m sure you’ve seen them somewhere before, why not write your own?

Tailwind CSS overlay avatars from Rob

Here’s what you will master

• 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 the building blocks you need to create custom designs, without the annoying, headstrong styles that are difficult to override.” Tailwind official website…

The neuromorphic loading animation looks hypnotic. It can be used to load pages as a progress bar. Please note that you can also change the colors and make the animation colorful.

Neuromorphic animation from Ruphaa Ganesh

Here’s What You Will Learn

• Understanding the basics of CSS animation and using CSS keyframes, transitions, and more.
• JavaScript basics for changing animation colors.

A pencil that spins endlessly. This pencil is not a bitmap, but “cut by hand” using CSS. This approach makes it more difficult and more interesting.

A pencil that spins endlessly – from Ruphaa Ganesh

Here’s What You Will Learn

• Master the basics of CSS animation and using CSS keyframes, transitions, and more.
• Learn how to use HTML and CSS to create a pencil.

Instagram’s scrolling friends list layout concept is heavily inspired by Instagram’s “Stories” feature.

Instagram friends scrolling mockup – from Adam argyle

Here’s What You Will Learn

• How to apply HTML and create a stretchable layout.
• Learn the basics of CSS and layout styling.

Link hover animation creates a neat hover animation whenever you hover over a link. An oval is drawn around the link like a ballpoint pen.

Link hover animation from Aaron iker

Here’s What You Will Learn

• Basics of working with HTML and CSS.
• Understanding CSS hover animation.

The Quick Details With Zoom View is a store-like overview of products. You usually see layouts like this in online stores.

Product details and zoom from Jorge aguilar

Here’s What You Will Learn

• The basics of working with HTML and CSS.
• Understanding CSS hover animation. Items are shown and hidden depending on where the cursor is.

Oh! Ghost! This ghost is not an image. This is “hand-drawn” with CSS only. Challenge your CSS skills and try writing a ghost using only CSS.

Ghost from Håvard Brynjulfsen

Here’s What You Will Learn

• A solid understanding of CSS and HTML.

Search button – The hot dog fits perfectly into a food delivery or ordering application. Why not do something that users will remember?

Hot dog animation button from Sarah drasner

Here’s What You Will Learn

• Have a good understanding of CSS and HTML.
• Good understanding of how to use CSS animations.

Who doesn’t love avocado? They are good for you and make breakfast great. Look carefully: there are many details about this call. Note the soft gradients and rough edges around the avocado.

Developer Avocadofrom Sarah drasner

Here’s What You Will Learn

• Master drawing complex objects with CSS.
• Captivate eyes with extraordinary details.

This is a burst of light on a bright background for a dark theme. Please note: there are several shades of colors and different coordination with the animation.

Gray explosion from Chris coyier

Here’s What You Will Learn

• Master CSS animation combined with JavaScript.
• You will gain in-depth knowledge of working with scalable vector graphics – SVG.

This is a modern city. The image is not rasterized, it is drawn using CSS and JavaScript. Pay attention to the small details in the background.

City illustration in pure CSS from Lisi

Here’s What You Will Learn

• You will gain deep knowledge of CSS.
• And a solid understanding of JavaScript in the interaction of CSS and HTML.

Switch animations with your voice or mouse. Animation works with speech recognition. By allowing the use of a microphone, you can change the animation depending on the input signal.

SVG animation with speech recognition from Lisi

Here’s What You Will Learn

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

SpeechRecognition – interface Web Speech API, the speech recognition service controller, processes the event SpeechRecognitionEventsent from this service “- Mozilla documentation…

• Deep knowledge of SVG, CSS and HTML.

We all know and love this feature. Today, every app lets you switch between a dark or light theme. Why not find out how it works?

Toggle from Joe

Here’s What You Will Learn

• Understanding the basics of CSS Variables.
• Work with JavaScript events.

You made it to the end! Thanks for reading! Hope you feel inspired. Happy programming!

And it is much more profitable to develop in the frontend with a promo code HABRadding 10% to the banner discount.

• Frontend Developer Specialization
• “Mathematics and Machine Learning for Data Science”
• Advanced Course “Machine Learning Pro + Deep Learning”
• Python for Web Development Course
• Data Science profession training
• Data Analyst training
• Data Analytics Online Bootcamp

More courses

• Machine Learning Course
• JavaScript course
• Profession Web developer
• Java developer profession
• C ++ developer
• Data Analytics Course
• DevOps course
• Unity Game Developer
• The profession of iOS developer from scratch
• Profession Android developer from scratch

Recommended articles

• How to Become a Data Scientist Without Online Courses
• 450 free courses from the Ivy League
• How to learn Machine Learning 5 days a week for 9 months in a row
• How much does a data analyst make: an overview of salaries and vacancies in Russia and abroad in 2020
• Machine Learning and Computer Vision in the Mining Industry