DEV Community

Nukala Suraj
Nukala Suraj

Posted on • Edited on

Learning Web Dev on the Web | A Roadmap with Resources

As a sequel to my first blog, learning web dev on the web 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

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

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

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
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
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 as well as a course on udemy 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
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 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
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 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
The most fun teacher on youtube brings us Build A Node.js API Authentication With JWT Tutorial 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
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 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
Ben Awad is the god of react youtube tutorials and his Practical React 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
Check Out How To GraphQL

MicroServices

A whole new approach to building highly modular and scalable web applications
Microservices with Node and React
Unfortunately the only good resource that I've found for microservices is a udemy course 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 StatQuest
  2. The Code and Implementation Python Engineer Python Engineer

Top comments (13)

Collapse
 
itsvitoracacio profile image
Vitor Acacio

Dude, I'm just starting out with Responsive Web Development here, but already bookmarked this one. It will sure help me a lot.

Have you tried FreeCodeCamp while you were learning these initial steps? That's the track I'm following right now, but I don't see a many people mentioning it.

Collapse
 
lucidmach profile image
Nukala Suraj

The Conquering Responsive Layout is perhaps the best resource in this roadmap.. it improved design skills so much and carries on to help me a lot

If you're going to do only 1 thing from this map that should be CRL by Kevin Powell

Collapse
 
itsvitoracacio profile image
Vitor Acacio

Thanks, I'll definitely check that one out!

Collapse
 
jeffchavez_dev profile image
Jeff Chavez

Definitely true. I just finished it and I learned a lot!

Collapse
 
ccbagel profile image
Hasan Ahmed

It’s great to use freecodecamp. You can also use the free courses on codecademy. However, some courses are really broad and cover a lot of ground. That’s where information overload comes in. Tbh as a developer you need to know how to learn things quick because the industry is always moving. This guide really shows you how to get started quick. You can always refer to freecodecamp to learn about something particular that you need. It could save you a lot of time and the headaches that come from the information overload. This is just my opinion there’s really no wrong way to go about learning to code πŸ‘πŸ½

Collapse
 
lucidmach profile image
Nukala Suraj

Yea it's an epic resource too,
but then the problem I had with FCC was that FCC was like a series of quiz problem so retention was low
The videos on their youtube channel are the amazing

Collapse
 
jkettmann profile image
Johannes Kettmann • Edited

You have a lot of great points here. I like that you distinguish website dev and web dev and that you mention the importance of Git and responsiveness.

A few points of critique. Hope that's ok 😊

  1. Don't build authorization yourself. It's pretty complicated to get it right and even experienced devs rather go for an existing solution like Auth0 or Firebase just to name a few. Imo it might even look unprofessional if you implement it yourself.
  2. GraphQL is a query language, that's correct. But it's not related to SQL, rather an alternative to REST APIs.
  3. Not sure if if ML belongs on a web dev roadmap tbh. It's a completely different field. Even if the ML algorithms are connected via an API. API (application programming interface) doesn't need to be a web API btw. An npm package for example also has an API

Anyway, thanks for writing this. Keep up the good work

Collapse
 
lucidmach profile image
Nukala Suraj

WoW,
It kinda feels really satisfying to read a critique.
πŸ₯³
But they say it's pointless to not respond to criticism so... 😜

  1. Yupp, it's extremly pointless implementing auth yourself.. but learning to do something from scratch is perhaps a really great way to learn (anything).
  2. Yupp, I should have mentioned graphQL is an alternative to REST rather than SQL despite being a QL... Imma edit the article right away.
  3. Well there's no point in building an ML/DL algorithm if you can't deploy it in some form, and web is the most versatile form of deployment... with that out of the way, yea you definitely don't need ML to become web dev. 🀩 I really can't put into words how much happy this makes me Thank You Sooo Much
Collapse
 
drsimplegraffiti profile image
Abayomi Ogunnusi

Interestingly, I just finished watching Traversy web development roadmap 2021 some minutes ago and I came here to find out this wonderful and summarised post....

To keep my sanity, I think I will go with this post ...a million thanks to you

Collapse
 
coolscratcher profile image
CoolScratcher

Thank you for this!

Collapse
 
bacodekiller profile image
Quang Hiep
Collapse
 
lucidmach profile image
Nukala Suraj • Edited

the pleasure's mine 😊

Collapse
 
lucidmach profile image
Nukala Suraj

Well, The goal was to build something I would have loved to have when I started out..
I'm super happy it was of some help to you
😁