20 small but inspiring web developer calls

Especially for the start of a new course stream “Frontend Developer” we share the translation of a collection of 20 projects for mastering the frontend. This collection is well suited if you are familiar with some area of ​​software development and want to dig deeper into the frontend. It is also perfect for people who do not want to start their acquaintance with the frontend with standard projects. The projects are fairly small and each has a difficulty level indicated. With the help of these projects, you will become familiar with Tone.js – a wrapper over Web Audio, master the unusually soft theme change from light to dark, and vice versa, and almost at the end, the most delicious awaits – voice-controlled vector SVG graphics.


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.

1. Map with a ghost (high level of difficulty)

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.

2.UI of the job search platform (intermediate level)

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.

3. CSSometric – shape-shifting animation (high difficulty)

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.

4. Animation in the style of Halloween (intermediate)

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.

5. Animation 10162020 (high difficulty level)

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.

6. Interactive 3D cube with pure CSS (intermediate level)

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.

7. Meow Meow keyboard (turn on the sound first)

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.

8. Tailwind CSS Overlay Avatars (Beginner)

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

“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…

9. Neuromorphic loading animation (intermediate)

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.

10. Infinitely rotating pencil (beginner level)

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.

11. Scrollable Instagram Friends List Layout (Beginner)

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.

12. Animation on hovering over a link (beginner level)

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.

13. Product details and click-to-zoom – fast (entry level)

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.

14. Pure CSS Ghost (Beginner)

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.

15. Hot dog animation button (beginner level)

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.

16. Pure CSS avocado (medium)

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.

17. Abstract animation “gray explosion” (high difficulty level)

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.

18. City illustration in pure CSS (medium)

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.

19. SVG animation with speech recognition (high difficulty level)

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.

20. Smooth theme switching (beginner level)

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.

Conclusion

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.

image

More courses

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

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *