You are currently viewing 5 Best Websites to Improve Your Frontend Developer Skills in 2023

5 Best Websites to Improve Your Frontend Developer Skills in 2023

Often times we hear people say, the best way to learn how to code is by building projects. But what if you don’t know where to start? One tip would be to build something you could personally use everyday. But what if this still draws a blank for you?

I have personally struggled a lot with coming up with projects to build to help me practice and apply all the things I have learned. I don’t have design skills and always spend too much time trying to come up with design concepts in my head. This in turn creates a block for me and prevents me from completing the most important task which is to just build something!

If anything above sounds like you or something you have struggled with, this blog post is for you. I’m going to cover my favorites websites to practice your front-end development skills and why I like them.

TL;DR

Mentioned in this post are the following website:

  1. frontendpractice.com
  2. frontendmentor.io
  3. Flexbox Froggy
  4. freeCodeCamp.org
  5. W3Schools Quizzes

Each of these websites provide resources that will help you practice coding. Practicing when learning how to code is easily one of the most important things you will need to do. It’s not enough to simply read documentation and articles or watch YouTube tutorials or Udemy courses. You have to put your hands on the keyboard and make mistakes to really learn.

If you would rather watch and listen to my take on this topic instead of reading, be sure to check out the video I posted on my YouTube channel “5 best websites to improve your frontend development skills in 2023”.

Let’s jump into the 5 best websites to practice your front-end development skills in 2023.

frontendpractice.com homescreen
frontendpractice.com homepage

frontendpractice.com

Frontend Practice is a free online resource to practice your development skills. Here, you can choose your level of difficulty (level 1–3) and build out web pages that are actually live meaning you can visit them to see the full functionality.

Level one of course will be best for beginners. With level one projects you will be expected to probably only need HTML and CSS. This level, in my experience is good for developers looking to get css layout practice and practice implementing assets such as photos and other media.

Why I like this platform:

  • It’s free!
  • They provide resources such as links to get icons, hex codes, and resources to learn more about the skills you may need to complete the project.
  • The option to choose a project based on its level of difficulty
  • The option to choose a different project if you find a project is too hard or too easy
  • Bonus challenges once you complete the main project to push yourself even more
frontendmentor.io homepage
frontendmentor.io homepage

frontendmentor.io

Frontend Mentor is similar to our first website, Frontend Practice, but with some added benefits. The platform is free but there are paid options that give you valuable benefits that we will get into shortly.

On this platform, you also choose your challenge by difficulty level. The difficulty levels include newbie, junior, intermediate, and advanced. Once you choose your challenge (project), you can download a zip file that will include the assets, readme, and style guide that will help you complete your project. The free version does not include the Figma and Sketch files.

One of the main reasons I love Frontend Mentor is because you can submit your code to be reviewed and get feedback from a real person. In order to submit your code, you must use GitHub. This is a huge plus over Frontend Practice in my opinion because you get practice using the biggest platform used for version control and collaboration.

At the time of writing this blog post, the paid tiers include an $8 a month option and a $12 a month option. You can learn more about the paid version and all of its benefits here.

As you submit challenges, you earn points. Once you hit 150 points, you will unlock the ability to change your work status to allow recruiters who use this platform to hire developers to see you are open for them to reach out to. Thats right! You can actually use this platform as a kind of portfolio to showcase what you can do while also increasing your Github graph and experience. These are two big things hiring managers might want to see. What you are able to develop and how often you code.

Why I like this platform:

  • It’s free!
  • Choose your challenge by level of difficulty
  • Gain practice using Github and get code feedback from real developers
  • Possibility to get hired by simply completing coding challenges and earning points
  • Some of my favorite YouTubers such as Coder CoderTraversy Media, and Kevin Powell have used this platform to teach people how to code on their channel so I trust it.
Flexbox Froggy Homepage
flexboxfroggy.com homepage

flexboxfroggy.com

Flexbox Froggy is one of my favorite ways to practice using CSS flexbox. This website is cute, fun, and you learn by doing. The way to use the website is similar to freeCodeCamp if you are familiar with that (we will be covering this website next). You learn about a topic and in order to move on to the next topic, you must complete a challenge. The idea is to get the frog from its starting position to the lily pads based on the provided instructions. You get the frog to move using the proper css properties and values.

Why I like this platform:

  • It’s free! (Are you starting to see a theme here?)
  • You gain knowledge and practice of CSS flexbox by doing
  • You’ll learn about the position and display properties and how they can be used to position things perfectly on screen while also being responsive
  • It’s fun and gives you a break from the typical reading and listening ways of learning
free code camp homepage
freecodecamp.org homepage

freeCodeCamp

freeCodeCamp is one of my favorite coding resources for so many reasons. For the sake of this blog post, let’s talk about why I recommend it as it pertains to practicing what you learn. If you’ve been watching my YouTube videos for a while, you would have noticed my frequent mention of this website. It is one of the first resources I’ve ever used on my coding journey.

By using freeCodeCamp you’ll gain free access to not only their online curriculum and courses, but also tons of YouTube videos, forums, and a weekly newsletter that I highly recommend signing up for.

As it relates to practicing your coding skills, you are learning by doing. As you learn about topics you immediately apply them and must get the code right to move on to the next topic. This means you are in a constant state of practicing what you learn. At the end of each course, there is a challenge you must complete by putting together all the concepts and creating a mini project.

Why I like this platform:

  • It’s free!
  • The only way to progress is to apply what you learn and get the code right
  • You build mini projects throughout the curriculum that you can put on a portfolio once you start building it
  • You build a portfolio at the end of the curriculum
w3schools.com homepage

W3Schools

W3 Schools is a website I normally used for help when looking for solutions to coding problems. While looking for a solution to a JavaScript issue, I stumbled across the quiz section of the website. This aspect isn’t necessarily a way to practice coding but rather a way to recall and understand what you remember from your learning. Being able to understand concepts, why they are necessary, and how to apply them is just as important as practicing. I highly recommend learning more about active recall as a way of learning.

Why I like this platform:

  • You guessed it. It’s free!
  • You recall what you have learned by quizzing yourself
  • There are quizzes for many topics such as HTML, CSS, and JavaScript
  • There are also exercises you can complete to further your learning for free before taking the quizzes

Conclusion

In conclusion you want to practice what you learn to really solidify your skills and become a better programmer. Don’t let the fact that you aren’t good at designing stop you. There are many free ways to implement your skills and show potential clients and employers that you are capable of completing any task they may need you to do.

Reading documentation, watching tutorials, and taking courses is great but the only way you’ll actually learn is by getting in there and coding yourself!

I hope you enjoyed this reading. If you also want to watch and listen to my take on this topic, be sure to check out the video I posted on my YouTube channel “5 best websites to improve your frontend development skills in 2023”.

I also posted this blog on my website theminimaljess.com if you would like to check out my personal space and take a look around at some of the services I offer.

Thank you so much for your support!

Until next time…

Jess