5 Free Resources to Learn Frontend Development (+ Extras)
Tags: career, beginners, frontend
Published: 2022-11-27 18:28:47

Although there are so many options out there, learning by yourself can be overwhelming. You don’t know which ones are worth your time - and we all know how important that is.

During my own learning path, I have discovered some interesting resources, ready to boost your skills in the frontend development field. From videos to reading, exercises and even games, this article will cover all your needs so you can start your stress-free learning today.
<br>

### 1. [**W3Schools**](https://www.w3schools.com/html/default.asp)

On this free-to-use website, there are pleeeeeenty of tutorials - HTML, CSS, JavaScript, Bootstrap etc. -, which take you from 0 to intermediate in a couple of lessons. You can create an account and even track your progress on each tutorial. I suggest doing that to be able to see how far you’ve come and see which exercises you want to practice again.


![HTML page of W3Schools](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qp5cxfc4myw8z54nigv3.png)<br>

### 2. [Flexbox Froggy](https://flexboxfroggy.com/) & [Grid Garden](https://cssgridgarden.com/)

Learning CSS you probably noticed that knowing how flexbox and grid work is essential. If you are more of a visual person, as I am, playing these two games will not feel like learning at all. But guess what? The notions will stick with you!


![Flexbox Froggy game](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wporfirf9y04q92x2sc0.png)


![Grid Garden game](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fpbvnnzycuovudx72u44.png)<br>


### 3. **[Programming with Mosh](https://www.youtube.com/c/programmingwithmosh/featured)**

Even if you learn by yourself, having someone to guide you through some notions comes in handy from time to time. This YouTube channel will walk you through the basics of programming and it also comes with a Front-end Development playlist.

![Youtube channel Programming with Mosh](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u1t2746griift55gaz5q.png)<br>


### 4. [MDN Web Docs](https://developer.mozilla.org/en-US/)

Although some games and visual aid is the extra help you need, it is important to take your time to read and understand programming to its core. This site provides you with information about different technologies, including HTML, CSS, JavaScript and DOM - and yes, you also have practical examples and exercises to solidify your knowledge.

![CSS web page on MDN Web Docs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/av3kisz9sfd55qim8qsp.png)<br>

### 5. Open Source Contributions

After getting some basics in, you need to start practicing in real life. There is no better way to do that than contributing to open-source projects on GitHub like [this one](https://github.com/firstcontributions/first-contributions) for example. You can also cement some of your knowledge by explaining basic concepts to others or trying to fix some minor issues for practice using [StackOverflow](https://stackoverflow.com/).

![Tags page on Stackoverflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yvzita8a47tqpg119ki9.png)<br>


### Extra resources

- Florin’s YouTube [channel](https://www.youtube.com/c/FlorinPop)
- FreeCodeCamp [website](https://www.freecodecamp.org/)
- Open-source free CSS framework [Bootstrap](https://getbootstrap.com/)

Take your time in learning all of this - it is a lot of information, but stay consistent. You’ll thank yourself later **🤭.**

What other resources have you discovered and would recommend to others?

---
_Cover photo by <a href="https://unsplash.com/@chiklad?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Ochir-Erdene Oyunmedeg</a> on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>_