Learning Web Dev on the Web | A Roadmap with Resources
Tags: webdev, javascript, beginners, react
Published: 2021-06-08 18:16:04

As a sequel to my first blog, [learning web dev on the web](https://dev.to/lucidmach/learning-web-dev-on-the-web-ifp) which had info on some of the most epic **youtube channels** from where you can _learn **web dev** for **free**_

This blog is going to be a roadmap with carefully curated resources that'll take you from Zero to Hero in no time,
(*Terms and Conditions apply 😂 Just Kidding)

## Website Dev !== Web Dev
A **web dev** is a person who **builds apps** that run **on the web** and with tools like **react native(for mobile)** and **electron(for desktop)** he is now expected to be *able to build pretty much any kind of software*
> Spotify, Netflix, YouTube, Discord, WhatsApp, Figma... are some of the more popular web apps

![meme](https://img.devrant.com/devrant/rant/r_1922199_oCEix.jpg)

Building **websites** is basically pretty much a **prerequisite** for web developers

## The Roadmap

A Web App has 2 major components
1. The **FrontEnd** (AKA The **UI**)
2. The **Backend** (AKA The **API**)

### FrontEnd
#### HTML
Ideally this shouldn't take you more than 1 hour to learn HTML, the markup that is the **foundation stone** of the **web** 
![HTML by Traversy Media](https://i.ytimg.com/vi/UB1O30fR-EE/maxresdefault.jpg)

This one is by `Brad Traversy` of traversy media, one of the first channels on youtube to post web dev tutorials [HTML Crash Course for Beginners](https://www.youtube.com/watch?v=UB1O30fR-EE)

#### RWD
In the above video, you'd have also learnt some basic CSS, but to make stuff on the web **look beautiful on any screen**, there's something called RWD or Responsive(to screen) Web Development.
![Conquering Responsive Layouts](https://d31ezp3r8jwmks.cloudfront.net/gjQ6wqLoXSviuBRJPa3PXUPi)
[Conquering Responsive Layouts](https://courses.kevinpowell.co/conquering-responsive-layouts) by `Kevin Powell` AKA **the king of CSS on youtube**, made this binge-able but don't binge 21 day course on everything you need to know in CSS

#### JavaScript
Now that you can make beautiful website that look kick-ass on any screen. The next step lies in making them **interactable**
![Modern JavaScript](https://cdn.fs.teachablecdn.com/Mk8sfdnTzdk3ONMbBFWg)
Enter Shaun from `Net Ninja` the **greatest teacher** on YouTube, he makes javascript so easy that the memes that say javascript is mind boggling would make no sense.🤯
He has a [free playlist on youtube](https://youtube.com/playlist?list=PL4cUxeGkcC9haFPT7J25Q9GRB_ZkFrQAc) as well as a [course on udemy](https://www.udemy.com/course/modern-javascript-from-novice-to-ninja/) that only includes the extra projects
#### Git
Git, the most overhyped tech that really is just something that lets you go **open source** [so that other people can **contribute** to your apps for **free**], while github is really just **google drive** for **code**.
![Learn Git in 20mins](https://i.ytimg.com/vi/IHaTbJPdB-s/maxresdefault.jpg)
Kyle Cook from `WebDevSimplified` is perhaps the most underrated youtube channel, he **super simplifies** everything while trying to stay **short and concise** while making tutorials. 
[Learn Git in 20mins](https://www.youtube.com/watch?v=IHaTbJPdB-s) is an amazing video that just told me that *people think git is complex while in reality its a super simple thing*.

### Backend
This is perhaps the best time to switch to the backend. Since you already learnt javascript as a part of this roadmap, node.js would be the best backend language for you... if you're comfy with other languages please do stick to that

#### REST API
A REST API is a **HTTP based API** to which you could send data(in the web world as json) and receive processed data.
You could connect to
1. A database (SQL or NoSQL)
2. A ML model
...

![NodeJS Crash Course](https://i.ytimg.com/vi/zb3Qk8SG5Ms/maxresdefault.jpg)
This is the topic that brought a lot of fame to `Net Ninja` since, it became outdated Shaun makes a revamped kickass [NodeJS Crash Course](https://youtube.com/playlist?list=PL4cUxeGkcC9jsz4LDYc6kv3ymONOKxwBU) youtube playlist that has one of the **most simplest explanation** to a lot of the **core backend concepts**.

#### Authorization
Now that you can build web apps, you need to learn how to secure it. It's a common misconception that authorization is the  same as authentication but there's a huge difference. 
**Authorization** is **ensuring** that a user is a **registered one**.
![Build A Node.js API Authentication With JWT Tutorial](https://i.ytimg.com/vi/2jqok-WgelI/maxresdefault.jpg)
The most fun teacher on youtube brings us [Build A Node.js API Authentication With JWT Tutorial](https://www.youtube.com/watch?v=2jqok-WgelI) that covers everything from **encrypting user data** to simplifying **JWTs** while *making it as fun and enjoyable as possible*
> HEADS UP ON THE SILLY PUNS

#### Authentication
In authorization you only see if a user has been register/is in our database. We need a technique to figure out **if a user** who's registering is **valid**.
Unless you've been living under a rock you've obviously done an email verification. Authentication is exactly that.
![Confirmation Email with Node.js](https://res.cloudinary.com/practicaldev/image/fetch/s--Q4ViiBA_--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://geekyturtles.com/assets/static/cover.872e63c.a2359baff849b8f684836f5a43dde302.png)
My personal inspiration to getting into web dev, the G.O.A.T, the one and only `Ben Awad` brings his casual youtube videos on web security [Confirmation Email with Node.js](https://www.youtube.com/watch?v=76tKpVbjhu8) is a good starting video on the topic, but since he doesn't have a playlist on it so you'll have to just casually watch his amazing videos

#### Advanced Stuff
Congratulations you've now reached the point where it's incredibly tough to find video resources on anything.
The Documentation is your best friend at this stage.
##### React/Svelte/Vue
Now the need to **reuse components** becomes a serious issue and this lead to the **rise UI libraries**
![Practical React](https://i.ytimg.com/vi/FMCX25WjU9o/maxresdefault.jpg)
`Ben Awad` is the god of react youtube tutorials and his [Practical React](https://www.youtube.com/playlist?list=PLN3n1USn4xlntqksY83W3997mmQPrUmqM) playlist is the bible/bagwadh gita/quran.
As for the rest the documentations are unbeatable especially for Svelte
> NOTICE I DIDN'T MENTION ANGULAR, HIGHLY INTENSIONAL BUT DON'T LET THAT STOP YOU IF YOU'RE INTO IT.

##### GraphQL
GraphQL is a **Query Language** like SQL that gives you way more **freedom** and **flexibility** while fetching resources from your database.
> *GRAPHQL* IS AN *ALTERNATIVE* TO *REST* API AND NOT TO SQL
![How To GraphQL](https://www.howtographql.com/social.png)
Check Out [How To GraphQL](https://www.howtographql.com)

##### MicroServices
A whole new approach to building **highly modular** and **scalable** web applications
![Microservices with Node and React](https://img-c.udemycdn.com/course/480x270/2887266_c696_5.jpg)
Unfortunately the only good resource that I've found for microservices is a [udemy course](https://www.udemy.com/course/microservices-with-node-js-and-react/) but it's by `Stephan Grider` who turns out to be my go to udemy instructor when I want to learn anything ground up.

##### Machine Learning
That's right, ML in web apps, if you think about it, most of the AI you interact with is usually in some form of an API.
ALSO There's no point in developing ML Models/ Neural Networks if you can deploy it in some way or the other.
Web being the most versatile among Mobile, Desktop, Game and even Robotics... it's going to really help knowing how to connect ML to web UI   
For ML I've got 2 resources:
1. The Theory and Understanding of the Algorithms
![StatQuest](https://yt3.ggpht.com/ytc/AAUvwnjEkKLjVVfaGrs4Y-teISVqFmssnK7Ia19fLGi-=s900-c-k-c0x00ffffff-no-rj)
[StatQuest](https://youtube.com/playlist?list=PLblh5JKOoLUICTaGLRoHQDuF_7q2GfuJF)
2. The Code and Implementation
![Python Engineer](https://www.python-engineer.com/images/titles/mlfromscratch.webp)
[Python Engineer](https://youtube.com/playlist?list=PLqnslRFeH2Upcrywf-u2etjdxxkL8nl7E)