10+ Free And Affordable Resources To Learn Frontend Web Development

Hello Fellow Codenewbies 👋,

When it comes to learning, what type are you?
Do you like to read, watch tutorials, or combine both?
I am a combination of both, but more to the audio-visual side. I can absorb more information through watching and coding along with tutorials.

In this post, I will share some recommended resources for learning to code. Specifically in learning front-end development.
So here they are in no particular order.
PS: Click on the link to get you to the website.

📺 Watch And Learn

Udemy

Udemy is a paid online learning platform. It often gives deals to buy a course starting from USD 9.99.
You can get a refund within 30 days of purchasing if the course doesn't suit you.
And when you finish a course, you will get a completion certificate.

Tips for choosing a course on Udemy:

• Take your time to look at the curriculum. Watch the course previews that interest you to give you a sense of the instructor's teaching style.
• Take a look at how many students enroll in the course, the course ratings, and the instructors. These would be the indications of how good the course is.

There are many great instructors on Udemy, but my favorites are Colt Steele, Andrew Mead, Angela Yu, and Andrei Neagoie.

YouTube

You can find plenty of tutorials and crash courses on YouTube, especially if you want a quick pick-up on a topic.
A few front-end developers' channels that I follow:
Traversy Media, Web Dev Simplified, The Net Ninja, Dev Ed, Kevin Powell, Code with Ania Kubów.

Watch And Code

Watch And Code is a course by Gordon Zhu. The introductory course, Programming Foundations, is free.
Gordon brilliantly walks you through the basics of programming and Javascript by building a to-do list app.
I personally only took the introductory course, and I've learned a lot from it.

Later, if you like, you can subscribe to its premium version after passing the entrance exam.

CSS Grids

This free course by Wes Bos will guide you to learn CSS grids in 25 tutorial videos.

Javascript30

Javascript30 is another free course by Wes Bos. In this course, he will guide you to build 30 things for 30 days in vanilla Javascript.

📚 Let's Read

MDN Web Docs

It is the go-to resource for all web developers.

CSS-Tricks

It provides articles, guides, and more for anything related to CSS and front-end development in general.

Javascript Info

Javascript Info is an open-source for modern Javascript tutorials.

Frontend Mentor

Do you want to build a project but don't have any idea?

Frontend Mentor provides 30+ free project challenges for you to build from scratch.
The challenge is to build the projects as close as possible to the provided designs.
You can use frameworks or vanilla CSS and Javascript to do the challenges. The choice is yours.

With the premium version, you can unlock more challenges and features.

⌨ Interactive & Game-Based Learning

freeCodeCamp

freeCodeCamp is a free platform to learn to code.
The tutorials are reading materials, and it has a text editor for you to write and run codes.
By the end of each curriculum, you can earn a certificate by completing five required projects.

To watch tutorials, you can also subscribe to its YouTube channel.

Scrimba

Scrimba is an online front-end development learning platform.
The unique thing about this platform is its interactive code-learning tools. It allows you to code along with the instructors during the lessons.
There are 30+ free courses available.
If you do The Front-end Developer Career Path (paid version), you will also get access to all of Scrimba's pro courses.

Flexbox Froggy

Do you like games? Also, do you have trouble grasping how Flexbox in CSS works?
Then you should try Flexbox Froggy.
It is a free game-based tutorial to learn flexbox.
You will move the frog(s) to where they should go by writing the right flexbox syntax.

Flexbox Zombies

Flexbox Zombies is another free game-based tutorial to learn flexbox by Dave Geddes.
In this tutorial, you will direct the zombie's hunter to the zombies with the right flexbox syntax.
Add to the fun; it has sound effects!

Final Words

Do you have any other free (or affordable) resources that you use and recommend?
You can drop them in the comment below 😊

Thank you for reading!
Last but not least, you can also find me on Twitter, and let's connect! 😄