Practice Projects for Front-End Developers

Front-end development as any other skill requires a ton of work. There are various ways you can tackle this big task, some of which would be:

1. Work in an agency as a front-end developer.
2. Study at your home and build projects on the side.
3. Work as a freelancer for clients.

Each has its own positives and negatives, but one thing remains a constant – the more diverse tasks you get, the faster you will progress.

In this article, we will be looking at a few potential projects that you can work on on the side and by yourself, where you can learn new technologies, approaches, and potentially some “Aha!” moments in your front-end career.

All the tasks below are pretty good repositories to have on your GitHub profile, especially when you decide to apply for a front-end position.

A note! All the examples below are made by designers for real products. We are NOT proposing to you that you grab them, code them and do whatever you want. All of this is an example of UI elements you can work on without distributing them or selling later on.

1 – A Component UI Library

Difficulty: Easy-Medium.

Don’t be misguided by the “easy” though, because as with any project here, both a junior and senior developer can struggle depending on the problems they solve. We’ve put this on the easy scale because it won’t consist of any complex UI elements and everything can be encapsulated.

You can pick an existing design like this, which focuses on dropdowns/buttons:

Or you can go with a more generic one like Bootstrap and Foundation. What to consider:

• Well defined naming convention.
• A presentation of the components.
• Modifiers – Most people like to change minor elements, so consider how to apply that. Example – you want primary, secondary colors; success, error states etc.
• Keep it “plug and play”. Your goal is to allow another developer to use your code without having to write any CSS. You can combine it with a basic grid system too.

A good architecture of such a library is not a trivial matter. You can try this very same task at the beginning of your career as well as a few years down the line and compare what you have learned.

2 – Implement Complex Animations UI

Difficulty: Hard

This task is all about sleek animations and performance. But next to that, you would also have to write down some not-so-generic visuals. See the example below:

 

You can see the full animation here. Once you have the UI down, then it’s time to add the interactivity. Not all animations will look like the design as it’s not made on a browser but in another tool, but that doesn’t mean that you can’t get really close to the original. Of course, we will skip any motion blur effects and strange shape deformations, but much of the rest is something you can do. There are also JS libraries to help you out with keyframing the whole thing.

This task can take just two screen swaps to keep it a bit shorter. No need to work on mobile views here unless you have the energy.

3 – A Game UI

Difficulty: Hard

Another tricky task! Most games have a very unique art style that is not easily translatable on the web. To make things harder, there is another rule here – Don’t use any images/svgs to achieve the shapes on the UI.

We’ve picked StarCraft 2 for this purpose. As you can see, there are a ton of small details here and there that you have to consider in your implementation. Indeed, here the “no assets” rule is what makes this hard. You will have to work with shapes, clipping, shadow magix, gradients, borders and more. Of course, images for the portraits and the marine on the right are needed.

To make things more realistic, the top right portrait border can be exchanged with one of the top row from the next image:

If you’ve managed to make it also look nice on smaller screens and mobile, then you win extra points! This would be a very “Wow!” effect project on your CV.

4 – A Quiz Game

Difficulty: Medium

Quiz games are not too hard to build compared to some of the designs above, but they would require some JS written to make them work. Yep, so far we had just CSS based projects, for this one you would also have to make it interactive, so that people can click, see correct/wrong answers and more.

If you do a search for “Quiz” in Dribbble, you can find a ton of examples, but if you find it hard to pick one then you can take this:

As you can see, there are just two screens, which means that you will have to come up with the rest of them based on the design above.

Features for the quiz:

• Count correct answers
• Answer from N options
• Show correct/wrong answers after clicking
• Report question popup
• Go back to all quizzes, pick a quiz
• Show final score after quiz ends

You can do a lot more than those mentioned above if you want to. This is generally a “one afternoon” type of project.

5 – Pick a Random Site and Make It Printer-Friendly

Difficulty: Easy

Optimizing for print has its quirks. Especially when you hide any existing elements on the site, cleanup backgrounds, improve typography, work with page breaks and format the pages.

For this task, you can pick a site on the web, choose an article page and start working on the printing styles. There are lengthy articles written on the topic, so there is plenty to help you along.

Example websites you can use:

• An Amazon sale page – Focus just on the important information.
• Course sales page – from SitePoint.
• Another course page

Feel free to pick any other site you want, you can make this easy or hard for yourself. If you want to see an example of a good print style, take a look at https://www.smashingmagazine.com/, they really nailed it.

6 – A Complex Magazine Style Layout

Difficulty: Insane

This one, aside from being hard, is also complex. And it takes more time compared to any of the other tasks mentioned above, so you might need to free up more than 20-30 hours for it.

The design above is a redesign of The New York Times by Slava Kornilov. In the link you will see all the designs that he has done including big screens showcasing the whole homepage.

In this project, you will need to think in terms of components, style some complex UI elements like the video going outside of the viewport (that has to continue being responsive), the typography settings, the overlapping elements and more.

Even simply looking at the background behind the large title at the top hides a few tricky parts to its implementation.

He has designed a ton of elements, so you can spend more than a month or two here if you wanted and there would be so much to learn. Maybe you can even make a video in the background as shown below:

For this one, there are also animations happening for the different news articles that can be implemented as well. You should also consider mobile views here.

7 – The Dashboard and Its Charts

Difficulty: Medium-Hard

Dashboards are everywhere. And when designers don’t know what to do in the evening, sometimes they just design another one. Just because.
And thanks to that, there is plenty to choose from. At some point you will probably have to build a real one for a real product. And you might be unlucky enough to get one of these “awesome looking” interfaces with a million animations on load that just don’t make any sense.

To prepare for such a day, here is a challenge for you:

Implement the following design:

What you need to consider here – The charts must be real. They must use real data, and you should try to make them look like the ones you see at the top. There are many libraries you can use, and most likely you will have to extend/modify a lot.

If you decide to incorporate some animations into it it could be even better. This would look so nice on a CV, right?

In the End:

One of the best ways to learn and to become a better developer is to simply start writing code and building sites. Do it on a daily basis, just code a ton! This is helpful especially in the first 3-4 years of your career.

With this experience behind you, you could easily fill a more senior role. There you could make decisions and lead your own team effectively by using the experience gained from all these projects and the problems and issues that you found and overcame along the way And remember, always try to find something hard to work on!