Before I begin, let me start by advertising myself here. I am a frontend developer and I'm currently open to frontend roles, if you're hiring or you know of any company that's hiring, please hit me up. This is my portfolio. Thank you and God bless 😁🙏.

Everytime I post a new project I've completed on Twitter, I always have few people DM me about how I motivate them and then they go on to ask how they can also get into Tech, especially Frontend Development. I'm always glad whenever I see this and in return, I always send them all the links to my resources, although I started to get uncomfortable sharing links from one person to the other at some point. So instead of copying and pasting links to different people that request for my resources, that's why I have decided everything on this article.

If you're not understanding anything, or have questions, you can ask in the comments section.

Frontend vs Backend vs Fullstack development

Before you continue, I just want to let you know that this resources compilation article is mainly focused on Frontend Development. If you want to become a web dev but you haven't decided which path you want to follow yet, you can check this article out for the difference between a Frontend, Backend and Fullstack developer:

🔗 Frontend, Backend, Fullstack: Everything you need to know

Here we go 👇

I am going to be sharing two types of resources by the way: The ones from Udemy which you have to pay for and the ones from YouTube which are free.

Udemy courses vs YouTube courses

You have probably seen people say they have never paid for an Udemy course and they learnt everything they know on YouTube, well that's great 🤙. I have also found YouTube very helpful too with lot of stuff (God bless the people that created the wonderful platform fr), but if I'm asked to choose between Udemy and YouTube, I'll choose Udemy. Don't get me wrong, YouTube is very good but Udemy courses always teach you things from scratch, like you don't know that stuff before, while YouTube tutors always assume you already have an idea of what you want to learn before. (P.S: this is my personal observation).

I'm going to start with the Udemy courses I have used/have been using/am using.

Udemy courses:

Udemy tip: Like they always say in Crypto, always buy the dip. Unless you're a very rich individual, Udemy does promo every 3 days or so, so always wait for when the course is being sold between $9.99 and $13.99 before buying the course, unless you have over $100 to pay of course.

The Complete 2022 Web Development Bootcamp by Angela Yu

udemy.com/course-dashboard-redirect/?course..

I don't know how good other Udemy courses are but this is definitely one of the best web dev courses on Udemy, I think it's even the most rated course on the platform. Although she didn't cover A-Z web dev(which is where searching for other resources comes in) which is understandable because it's a full stack(frontend and backend) bootcamp course, I 💯 recommend. (Read about Frontend dev vs Backend dev vs Full stack dev)

React - The Complete Guide (incl Hooks, React Router, Redux) Academind by Maximilian Schwarzmüller

udemy.com/course-dashboard-redirect/?course..

His course was complicated for me when I first began but I started to catch up slowly, although I still had to watch few YouTube tutorials (which I'll also share below) before I could finally grasp everything I have learnt so far, it's definitely a great course. (P.S: please make sure you're very good at JavaScript before jumping to ReactJS, it's very important).

Well, that's all for Udemy courses I know about, now let's move to YouTube tutorial vids.

YouTube courses:

If you think paying for an Udemy course will be waste of money since there's YouTube, it's fine. There are thousands of tutorial videos/playlists on YouTube that you can learn from, you just need to find the ones you're comfortable with and stick to them.

I'll just list them without explanation(except for few):

HTML

CSS

JavaScript

Please don't be like me who ran away from JS for weeks for no reason before finally starting it.

ReactJS

Remember I said I had to use a YouTube playlist earlier to understand better, well here it is:

Also check out this very good 10 hours React tutorial on YouTube, it really helped me while learning React too:

Tailwind CSS

Bootstrap 5

Firebase

Netninja has other Firebase playlists too that you can check out but I'll only share this as it is recent and straight forward.

NextJS

I actually learnt NextJS on that React Udemy course I shared earlier, you can can also learn it here. It's very simple to be honest.

Sass

Git and GitHub

As a Developer, it is very important to know how to use Git and GitHub. You can search about it to learn more about what it's used for.

You can always check the Udemy and YouTube for other stuff too.

Other resources

Javascript For Kids - An Ebook By Nick Morgan

If you just want to start JavaScript or you're struggling to get the concepts of it, you can download this ebook(PDF), it breaks down JavaScript to someone like the person is a kid as the title indicates.

Download the pdf here: pepa.holla.cz/wp-content/uploads/2015/11/Ja..

W3schools

Visit website here: W3schools

Sololearn app

This is actually the first resource I started my web dev journey with, it's very good for beginners.

Download app for Android here: Sololearn app

Animations

You have probably some badass animations on some websites and you've always wondered how they're implemented, well, while there are some agba devs that do it from scratch, there are few JavaScript/CSS libraries you can use to do animations too:

AOS

GSAP

Framer Motion (only for React)

Remember there are lot of resources online, just make sure you find the ones that you're very comfortable with and stick to them.🤙

Conclusion

Phew! I have written a lot, this is actually my first ever article so please ignore any typo you see there :-).

Also remember that I have personally used all these resources listed, and I'll continue to update this article as I continue to learn new things.

If you ever get stuck while learning a new concept, always ask Google. Knowing how to use Google is a great skill a developer must have. Alternatively, you can also reach out to any developer you have around you that you think can help.

Remember that it's:

A marathon and not a sprint.

If you really think web dev or programming generally is for you, then the best time to start is today.

All you just need is dedication and determination. Good luck 🔝👊