DEV Community

Cover image for 8 Websites to Practice Your Frontend Development Skills

8 Websites to Practice Your Frontend Development Skills

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. We've made a list of 8 websites that can help you get better at frontend development through practice.

Table of Content:

  1. freeCodeCamp
  2. Codewell
  3. CSSBattle
  4. Treehouse
  5. Coderbyte
  6. CodePen Challenges
  7. Javascript30
  8. Frontend Mentor

1. freeCodeCamp

Screen Shot 2021-06-04 at 8.13.04 PM.png

Inarguably one of the best resources to learn web development. Over 7000+ tutorials and tons of challenges to complete along the way to test what you've learnt.

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

2. Codewell

Screen Shot 2021-06-04 at 7.58.24 PM.png

If you want to level up your HTML, CSS, and Javascript skills, Codewell offers real world Figma templates that you can use to improve. You can even share your solutions and receive feedback on either the website or on the growing Slack community. Here are 5 projects to tackle on Codewell.

Codewell challenges include:

  • Figma Template
  • All assets (images, icons, etc)
  • PNG files for desktop, tablet, and mobile views
  • README.md file with the fonts used and how to deploy

3. CSSBattle

Screen Shot 2021-06-04 at 8.04.34 PM.png

This one is specific to CSS, but its gamification system is a great way to track your progress and continue learning, they even give away some merchandise at the end of some battles, which is always a great motivator.

The battles on there aren't necessarily going to tell you how to create web layouts, but they will definitely help you tackle some of the more intermediate CSS properties.

4. Treehouse

Screen Shot 2021-06-04 at 7.57.55 PM.png

At just $25/mo, Treehouse is a great platform to help you learn certain languages like Javascript, or even backend languages like PHP. You can use their in-demand courses which have a wide variety of quizzes and challenges, or go through a track which has a guided curriculum to teach you something specific.

5. Coderbyte

Screen Shot 2021-06-04 at 7.58.01 PM.png

Coderbyte offer:

  • Coding Challenges
  • Interview Kits
  • Courses

They offer free challenges to get a feel for the platform before subscribing to their plans which start at $35/mo. If you're serious about transitioning to a web development career, Codebyte offers you all the tools you need to accomplish that.

6. CodePen Challenges

Screen Shot 2021-06-04 at 7.58.08 PM.png

The great thing about CodePen challenges is that they provide prompts for nearly a variety of languages and technologies. HTML, CSS, Javascript, Flutter, you name it. What's even better is that you get to share your solutions with everyone who's participated in the challenges, give, and receive feedback on your solution.

This may not be a structured way to learn, but looking at other people's code is a great way to get inspired and perhaps learn something you may have not known.

7. Javascript30

Screen Shot 2021-06-05 at 12.09.51 AM.png

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!

8. Frontend Mentor

Screen Shot 2021-06-05 at 9.06.21 AM.png

Solve real-world HTML, CSS and JavaScript challenges whilst working to professional designs.

If you've enjoyed this article, be sure to follow us on Twitter here for more content like this!

Top comments (12)

Collapse
 
lostgirljourney profile image
Falguni Sarkar

devChallenges.io

This one is also one of the best platform to practice.

Collapse
 
mswat5 profile image
mswat5

it's really gud and curated, tnx falguni

Collapse
 
andrewbrown profile image
Andrew Brown πŸ‡¨πŸ‡¦ • Edited

I like how Codwell didn't put themselves number 1 on the list.
Humility is a good thing.

Collapse
 
lmech profile image
Michael George

Frontend mentor is a good website and provides many projects to work on

Collapse
 
hasnaindev profile image
Muhammad Hasnain

Frontend Mentors deserves a special mention.

Collapse
 
mamdouhmoemin profile image
Moemin Mamdouh πŸ‘¨β€πŸ’»

You're right, completely flew over my head, I just added it! :)

Collapse
 
juanfrank77 profile image
Juan F Gonzalez

Those are some good resources. Great post @mamdouhmoemin

Collapse
 
mamdouhmoemin profile image
Moemin Mamdouh πŸ‘¨β€πŸ’»

Thank you!

Collapse
 
unip profile image
Abdurrahman Al Hanif

Thanks for sharing. I'm currently need these resources ❀️

Collapse
 
mamdouhmoemin profile image
Moemin Mamdouh πŸ‘¨β€πŸ’»

You're welcome, glad you found them useful!

Collapse
 
kyo4311 profile image
guosheng

very nice!

Collapse
 
mardiya profile image
Mardiya Zubairu

So far I have tried frontendmentor and it sure is a great platform to practice coding.