Welcome to my web development learning path of 2020. This post is for anyone from a complete beginner to an advanced web developer (who may missed something important).

Intro (Important)

This path will include everything you need to learn to became a Full-stack Web developer.

I will updated everytime I could, if I found something new or missing.

Before

This first section will contains everything you need to know before starting to learn web development.

Understanding the basics of internet and what happens behind the scenes is the first step you have to take by learning:

Important:

• Terminal
• HTTP/HTTPS
• SSH
• Git
• GitHub

Optional:

• Data Structures & Alogrithms
• Character Encodings

Optionals are for you if you’re going forward to be a Pro dev, they will give you many advantages when working on big projects as better structure, data organization, security and short ways…

Basics

Journey of web dev starts here.

To create your first Web page, there are 3 steps: Structure, design and behaviors.

To do this, here are the 3 main parts of any Web page:

1. HTML
2. CSS
3. JavaScript

HTML

Stands for Hyper Text Markup Language. We use it to describe the structure of a Web page to the browser. It a set of elements each of them display a specific data type (texts, images, link and more…).

CSS

Stands for Cascading Style Sheets. We use it to describe how to display HTML elements to the browser. It a styling language for editing the default HTML elements styles (fonts, colors, sizes and more…).

JavaScript

Programming language of HTML and the Web. We use it to add logic to our Web page. It give us the control of editing whatever and whenever we want in our page.

Frontend

All you need to create the design of your Web pages.

Also, we call it client-side of a Website, here what all the visuals happens.

Best start is to dive depper into Basics by learning:

Deep in CSS

Advanced CSS styling with Responsive design, Preproccessors and Framework:

Responsive Design

Now a days, we access internet with multiple devices with multi screens sizes.

Your design may not seems cool for a big or small screen, so you have to learn how to make your design responsive and cross-devices.

Preproccessors

In just CSS we can’t use variables and logic.

Preproccessors fix those issues by providing multi logical functions to our simple CSS code.

And the most popular ones:

• Sass
• LESS
• Stylus
• PostCSS

Learning one of them is enough.

Frameworks

CSS Framework is a set of CSS code ready to use in your Web project.

We can easly create modern Web apps using a framework.

Most populars are:

• Bootstrap
• Foundation
• Pure
• Semantic UI
• Bulma

I recommend Bootstrap, but you are free to choose what you may like more.

Deep in JavaScript

JavaScript is the future of web development specialy with Node.js run-time envirement.

Node.js give JavaScript direct impact o any operating system and more flexibility for both Front-end & Back-end stacks.