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, 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
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.
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 is a course by Gordon Zhu. The introductory course, Programming Foundations, is free.
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.
This free course by Wes Bos will guide you to learn CSS grids in 25 tutorial videos.
📚 Let's Read
It is the go-to resource for all web developers.
It provides articles, guides and more, for anything related to CSS in particular and frontend development in general.
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.
With the premium version, you can unlock more challenges and features.
⌨ Interactive & Game-Based Learning
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 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.
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 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!
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!