Learn by Doing: Best Websites To Help You Learn and Master Frontend Development

Building projects and solving real-world problems is inarguably one of the best ways you can learn how to code. Theoretical is all good, but without applying the knowledge you learn, you will most likely not progress. I've made a list of websites that can help you get better at Frontend Development through practice.

For the things we have to learn before we can do them, we learn by doing them. ― Aristotle, The Nicomachean Ethics

Table of Content:

  1. freeCodeCamp
  2. CSSBattle
  3. Flexbox Froggy
  4. Grid Garden
  5. 100 DAYS CSS CHALLENGE
  6. Frontend Mentor
  7. Daily UI
  8. CodePen Challenges
  9. Javascript30

Let's Go!!

1. freecodecamp

Probably the best resources to learn web development. Over 7000+ tutorials and tons of challenges to complete along the way to test what you've learned. You'll learn to code by completing coding challenges and building projects. You'll also earn verified certifications along the way.

The tracks are straightforward and the best part? It's all free.

2. CSSBattle

CSSBattle is an online CSS Code Golfing game. Here, players from all around the world try to visually replicate "Targets" in the smallest possible CSS code and battle it out to get to the top of the leaderboard.

3. Flexbox Froggy

Flexbox Froggy is a game for learning CSS flexbox. It's completely free. And everyone learning CSS should give it a try.

4. Grid Garden

Grid Gardening is a simple game to learn CSS Grid. This is just like Flexbox Froggy. It's completely free. I myself find CSS Grid very hard and this website has helped me a lot. You should also give it a try.

5. 100 DAYS CSS CHALLENGE

Matthias Martin created 100 days of CSS challenges. The challenge is simple, You code CSS for 100 consecutive days. They send you Gmail each day the problem to solve. I haven't finished all the challenges, but i liked the concept and thought i should share it here.

6. Frontend Mentor

Iet'smake one this clear, there is frontendmasters.com which is a learning platform but here I am talking about frontendmentor.io which has challenges for Frontend Development. It's a great platform to learn or polish your HTML-CSS-JS skills.

7. Daily UI

Daily UI challenges give you a new challenge every day that starts when you sign up (and it’s free). This is very similar to 100 DAYS CSS CHALLENGE.

8. CodePen Challenges

CodePen Challenges run every week are a prompt (along with ideas and resources) for building whatever you like. Also, check out their past challenges and see solutions by others. Highly recommended. To be honest, I find these solutions quite intimidating, but it is a great way to learn.

9. Javascript30

A 30-day vanilla JS coding challenge by Wes Bos. You get to build clocks, drum kits, and so much more using just Javascript. It's also free, so there's no excuse to not sign up and get started right away!

So this is it. I hope you find this helpful. Please leave a comment. Thank You.