Web Development Roadmap for beginners

#react #webdev #beginners #javascript

Welcome to the world of Web and Mobile Applications! You'll get to know a lot about it here 😉

If you're absolutely new to web development and haven't made a single website, go to the Basics section.

If you have some familiarity with the basic concepts of web development or know a bit of HTML, CSS and JavaScript, you can head to the Intermediate Section.

If you're well acquainted with the most popular frameworks and libraries like ReactJs, ExpressJs, Flask, or Django and have made a complete website with these, my friend, you're here for the Advanced Section (to be updated).

Basics for web development

So, you decided to explore web and app development? We got you covered!

Web development cannot be learnt effectively without starting with the 3 main foundation pillars :

HTML5 (HyperText Markup Language)
CSS3 (Cascading StyleSheets)
JavaScript ES6+ (A programming language which runs within the browser)

Apart from these look for CSS frameworks like :

BootStrap 4 or the newer BootStrap 5
Materialize CSS

These frameworks are nothing but a whole lot of CSS classes/queries for you to get going without writing hundreds of lines of code just to get the basic formatting right.

Before I tell you about the courses, @tusharjain0022 brought me a great resource to learn Webdev and get started in the coolest way possible! Here's a GitHub repo of Microsoft's 'Web Dev for beginners' which has 24 lessons for you to get a head-start! If you're taking this up, you may stop reading this and get back directly to the Intermediate Section.

There are a lot of resources out there to learn these skills, here's a list of some of the best resources I found on the internet :

Name of course	Language/skill(s) it covers
W3Schools.com	HTML5, CSS3, JavaScript ES7+, BootStrap 5
Learn HTML5 and CSS3 For Beginners Crash Course - Dev Ed	HTML5, CSS3
HTML Crash Course For Absolute Beginners - Traversy Media	HTML5
Learn JavaScript - Full Course for Beginners - YouTube FREE course	JavaScript ES6
JavaScript Crash Course For Beginners - Traversy Media	JavaScript ES6
CSS Crash Course For Absolute Beginners - Traversy Media	CSS3
HTML, CSS, and Javascript for Web Developers - Coursera	HTML, CSS, JavaScript, BootStrap 4
The Complete 2020 Web Development Bootcamp - Udemy	HTML, CSS, JavaScript, BootStrap 4

Important Note - You don't need to go through each and every course, just choose one for each skill/language. DO NOT fall in tutorial trap where you keep on watching courses but don't seem to learn anything out of it. Choose one and stick to it.

There's always something that isn't covered by these courses or you just don't know how to get that nasty div centred on the screen. Just search your problem/task on the web and look for these sites :

Dont be shy to start projects of your own at this stage. Infact, the best way to learn web development is by making small projects. After completing these courses, you should have made at least one decent website. Well, we'd love to see you showoff your fancy new websites on the community's slack channel!

Web Development for the Intermediates

So you have made a shiny new website or are confident in HTML, CSS and JavaScript? Lets make this even more interesting!

There are many aspects of web development, lets explore them one-by-one.

FrontEnd Developement

This is the part of a website which the user or client actually sees and interacts with in the browser. If you want to design beautiful websites and create stunning User Interface (UI) and User Experience (UX), you must learn various frameworks and libraries which help you in creating great designs without the hassle of writing and maintaining messy HTML, CSS and JavaScript codes.

Here's a list of what you should probably explore next as per the latest industry trends :

ReactJs - A JavaScript library based on NodeJs made by Facebook.
AngularJS - A JavaScript framework based on NodeJs made by Google.
Django - A Python framework for complete website development.
Flask - A micro web framework written in Python.

Each and every element in the list above is an entire skill you will have to invest a considerable amount of time in. So, choose one and gain expertise in that. (I would suggest you to go for ReactJs as it is relatively easy to learn and practice for beginners compared to others. Also, most of the projects under House of Geeks are implemented using React.)

Note : NodeJs is a runtime environment for JavaScript code to run outside the browser on your local system, just like Python or C++. Various frameworks/libraries are built upon this runtime environment including ReactJs and Angular.

Here's some of the best courses/materials I found to learn these skills on the internet (highly recommend you to check out the official documentations first):

Name of course	Skill/library/framework it targets
Official React Documentation by Facebook (BEST)	ReactJs
React JS Crash Course - Traversy Media	ReactJS
React Tutorial For Beginners - Dev Ed	ReactJS
React Tutorial for Beginners - Programming with Mosh	ReactJS
Official Angular Documentation by Google (BEST)	AngularJS
Angular Tutorial for Beginners: Learn Angular & TypeScript - Programming with Mosh	AngularJS
Angular Crash Course - Traversy Media	AngularJS
Angular Crash Course for beginners - Hitesh Choudhary	AngularJS
Official Django Documentation (BEST)	Django
Python Django Tutorial 2020 - Full Course for Beginners by Clever Programmer	Django

Important Note - You don't need to go through each and every course, just choose one for each skill/framework/library. DO NOT fall in tutorial trap where you keep on watching courses but don't seem to learn anything out of it. Choose one and stick to it.

Throughout these courses, you should be making fairly large projects as compared to your previous ones and make something that actually works as a product you could sell to a client. Well, we'd love to see you showoff your fancy new websites on the community's slack channel!

BackEnd Development

This is the part of a website that is responsible for the stuff that happens behind the scene. Sending and recieving various types of data, storing the recieved data on a database, retrieving data from a database, deleting a piece of data from database, serving files it all comes under the backend.

A great way to think about this is that its the backend that's responsible to serve the video file to your device when you click/tap on a particular video on YouTube. The backend recieves the data containing the information related to the video you tapped on, it searches for the video in the database and serves it to the frontend.

There are many frameworks and libraries to implement the functionality of a backend. Some of them are :

ExpressJs - A JavaScript framework based on NodeJs

... To be continued..

P.S. : While I add more content to this, I highly recommend you to checkout roadmap.sh. It is a great place to get a better idea of various domains of webdev, namely - front-end, back-end and DevOps (and more!)

P.S 2 (Pun intended 😜) : A quick guide for Git and GitHub is coming up soon. Stay tuned!