What is Web Dev?
Web Dev is the work involved in developing a website for the internet.
In general aspects there are two types of web dev - Frontend and Backend Dev, but there is something called Fullstack which is the combination of both Frontend and Backend Dev.

• Frontend Dev

It covers the work on everything that user can see on the website and interact with the website. More creative minded people tend to be Frontend Developers.

• Backend Dev

It covers the work that user doesnt see which goes behind the scenes of a website i.e take care of servers, API , incoming request and handling database. More logical thinking people tend to be Backend Developers.

• Fullstack Dev

It not just covers the work of both Frontend and Backend Dev but also covers all the work to be done in Web dev such as Planning, Analysis, Designing, Implementation, Testing & Integration, Deployment and Manintainence of a website.

To get started with Web Dev we need to download some tools & technologies which are very essential.
First thing is some sort of Web Browser such as Google Chrome, Firefox or Safari. Second thing is a Text Editor like Visual Studio Code Editor, Sublime Text Editor or Atom. Last thing is need of Version Control System such as Git.

Checkout the blog VCS: Git & GitHub to know more about VCS.

Learn the basics of HTML (HTML5 elements & tags) and CSS (flexbox, grid, media queries etc.). Then pick any one CSS framework for more easiar work in designing the website such as Bootstrap (preferred choice), Materialize, Bulma, Tailwind etc. In free time, check few info about Browser Dev Tools which is very helpful tool for debugging the bugs in your website.

Now you should be ready to design static websites like portfolio. Do a small project for yourself to get a better understanding of how a website should be designed.

After you have designed a simple website, its time to host it. So learn about Basic Website Deployment, Domain Names, How to add a custom domain to your website, Static Hosting (on Netlify or Github Pages).

JavaScript is a client side scripting language which is used to make the website dynamic. It is very important language for Fullstack Dev as it is used in both Frontend and Backend, but if you chose Frontend Dev then JS is the only choice. So Learn Vanilla JS (its just a term used for pure JS without frameworks) and basics of jQuery library.

What's next? Obviously it is projects. Do simple projects like stopwatch, color flipper, todolist, countdown etc and whichever project you feel like to do or whatever ideas you have, implement them.

Learn the basics of Git commands & Github as they are very important for developers. And also you need to know the basic command line like navigating between different folders.

Once you are done with the basics of command line, git & github, know about APIs.

In your free time, you can learn CSS Pre-processors such as LESS or SASS but its optional. You can comeback later and learn them.

After you get confidence within you that you are good at JS, pick any one JS framework like Angular or React or Vue JS. Learn all the topics in the framework u chose and get adjusted to it.

By now you should be able to do projects using the framework you chose. Get started by watching youtube videos and then learn to code on your own.

There are lots of programming languages used for backend technology such as Python, NodeJS(Runtime JS environment for Chrome V8), Java, PHP and many more. Pick any language of your choice and start learning.

After learning the basics, pick a framework of the language that u chose for backend technology such as django for Python, Spring for Java, ExpressJs for NodeJS, Laravel for PHP etc.

Most of the backend dev comprises of database requirements. Its good to learn backend technology along with any database of your choice which is discussed in the next section. However you can learn how to create your own server without a database.

You also need to spare some time for learning technologies like SEO, Web Testing and Web Authentication. Well you can come back later and learn them too but make sure you will learn them.

Almost every modern application needs to work with a lot of data. Instead of working with files like microsoft excel, we need efficient way of sorting, processing and reading data. A database is a collection of data that is organized in a manner that facilitates ease of access and efficient management updating. Some examples are MySQL, MongoDB, Oracle, PostgreSQL etc.

Choose any one database of your choice, learn the basic operations and work on them. Make simple projects like Login application or Contact form. Also you can learn storing data in Google Cloud, AWS, Microsoft Azure or Firebase. Pick any one and work with that because these platforms provides many services like user authentication such as login in with google/ github/ facebook, password recovert, Phone OTP, automated emails for news letters and stuff.

After gaining so much of knowledge, you should be ready to do few advanced projects like Hotel Reservation System, City Tour Application, A simple Shopping Cart.

Make clones such as Amazon Clone, Youtube Clone or Messenger Clone and trust me, you will be happy with what you learnt by doing such projects. If you need more projects ideas then head to freelancing websites such as Freelancer, Fiverr, UpWork etc and take a project. Offcource the client may not assign you that project but still you can do the projects for your self-improvement because they are real world applications!!!

Well, How much time do I need to learn Web Dev?
Umm... I'm not sure because few people can learn in 3 months and few people may take slow steps too, But average time can be said as 4-5 months.

• LAMP

Linux, Apache, MySQL, PHP

• MEAN

MongoDB, Express, Angular, NodeJS

• MERN

MongoDB, Express, React, NodeJS

• MEVN

MongoDB, Express, Vue, NodeJS

• Python & Django

Python, Django, MySql, Apache