10+ Free And Affordable Resources To Learn Frontend Web Development

Subscribe to my newsletter and never miss my upcoming articles

Hello Fellow Codenewbies ๐Ÿ‘‹,

When it comes to learning, what type are you?
Do you like to read, or watch tutorials, or a combination of 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 resources that I use and recommend in learning to code. Specifically in learning frontend development.
So here they are in no particular order.
PS: Click on the link to get you to the website.

๐Ÿ“บ Watch And Learn

notebook-and-laptop-on-desk-by-nick-morisson-unsplash.jpg

Udemy

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

Tips in choosing a course on Udemy:

  • Take your time to look at the curriculum. Watch the previews of the course that interests you, to give you a sense of the teaching style of the instructor.
  • Take a look at how many students enroll in the course, also the ratings of the course, 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 to get a quick-pick-up on a topic.
A few frontend 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 on, if you would 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

a-woman-standing-in-front-of-house-library-photo-by-radu-marcusu-unsplash.jpg

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 in particular and frontend 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 use pure 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

hands-on-tablet-play-interactive-game-with-toys-on-desk-robo-wunderkind-unsplash.jpg

freeCodeCamp

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

You can also subscribe to its YouTube channel to watch tutorials.

Scrimba

Scrimba is an online frontend 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 Frontend Developer Career Path (paid version), you will also get access to all 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.
By writing the right flexbox syntax, you will move the frog(s) to where they should go.

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 ๐Ÿ˜Š

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

No Comments Yet