I find front-end development a lot tougher than back-end development. Generally, in backend development, I know what I’m doing and how everything is interacting with each other, whether the code will run or not. But, when it comes to the front-end the whole story is different.

It is countless hours of googling, trying different things, and experimenting.

I’m not a great front-end developer. So, I decided to improve my skills and went out to find resources from where I can practice.

Learning front-end frameworks like React, Angular is well and good. But, I am more focused on developing my web design skills and my fundamentals of HTML, CSS, and JS.

After spending a lot of hours in research and diving deep into the big world of the internet, I shortlisted these 7 websites that I think are best to practice your front-end skills. These websites will take your front-end skills to a whole new level.

1. Frontend Mentor

Frontend Mentor is a community-based challenges platform. You are given boilerplate codes and resources and then, you are supposed to make the website as per the requirements.

There is no rule that the website should look exactly like the sample. So, you can play around let your creativity run wild.

The barrier to entry to Frontend mentor is almost zero and anyone at any level can come to have a good challenge for himself. It features challenges from the newbie to the guru level so that there is something for everyone.

The best part about frontend mentors is that after you solve a challenge, you upload it to the community and interact with people to earn points. It is not a test, but, a learn, grow and share with others type of platform.

The way to leverage frontend masters is to participate in the community as often as you can and rather than being a perfectionist, put your work out there.

2. 100DaysCSS Challenge

100DaysCSS challenge is focused to drill down on your CSS skills. You will rise up to be a CSS Guru after taking up this challenge (that’s what I have heard).

Every day you are given a new challenge to complete and you have to create or something similar using the same concepts. Creativity is appreciated a lot, especially in CSS communities.

You submit your solution in codepens. If you don’t know what a codepen is, it is an online code-editor tool that lets you write code in the browser and see live results as you build. I would recommend checking it out once.

#100DaysChallenge is a very popular tag on Twitter. You can document your journey there and gain a lot along with the community there. I have seen a great number of experts helping there, too.

3. Dribbble

Dribbble features one of the greatest collections of designs over the internet. You can leverage these already built designs to code their clones.

As a front-end developer, a majority of your job would be to code the designs and not make the web designs yourself. The designs are usually provided by UI/UX designers.

In dribble, you can pick any design you may want to code and start making it.

I would recommend having a buddy programmer with you and you both can challenge each other as to who can clone a design faster. In a way, it would be a healthy competition and would motivate both of you to push your limits.

A great feature of having a buddy programmer is that you both can brainstorm solutions to solve some hard problems together.

4. CodePen Challenges

I mentioned codepen earlier that it is an online editor for you to code. But, it is much more than that. Codepen also offers a community where you can share your work and have a look at other people’s work. The great thing about it is that you can see the codes and how someone made a particular design.

I like spending time on codepen to get a glimpse of some of the best designers and developers out there. It is a luxury that we get to watch and learn from the best.

Codepen also offers a lot of challenges that help you to level up your skills by building things. They have a monthly theme and each week you will be prompted with a new challenge.

There is a huge number of participants and a majority of them share their codepen with others. So, you’ll never feel like you are doing it alone. The community is there to lift you up.

5. Daily UI

Daily UI challenge is also the same as 100DaysCSS where you are required to solve a challenge every single day.

But, daily UI works a little differently from 100DaysCSS. Every challenge is delivered to your mail and you can complete your challenges anytime as you may want.

Daily UI also takes care of weekends and doesn’t send you a challenge at the end of the week. Along, with this, it gives you free templates and resources as a surprise reward.

I feel that Daily UI is a great resource and one should take up this challenge. I know I’ll be starting with this.

Front-end development is hard and a lot of times frustrating. The best way to get good at it is by practicing a lot. So, let’s make some beautiful websites for people to use.