Roadmap for Frontend Web Development

Step 1: Inroduction

The most important and mandatory part to get started with any new technologi is to get sufficient knowledge about it. To excel Frontend Web Development you have to know two things;

a) What is Frontend Development? 👇

https://www.techslang.com/definition/what-is-frontend-development/

b) What actually Frontend Web Developer do? 👇

https://www.coursera.org/articles/front-end-developer

c) What are the imporatnt resources to get started? 👇

https://www.naukri.com/learning/articles/best-resources-to-learn-web-development/

Step 2: Understanding Internet

To learn Frontend Development you must know how internet works and how it is related to technology. a) How does Internet works? 👇

https://youtu.be/zN8YNNHcaZc

b) Internet- CS50's Understanding Technology? 👇

https://youtu.be/n_KghQP86Sw

Step 3: Learn HTML (Hypertext Markup Language)

HTML is an acronym which stands for Hyper Text Markup Language which is used for creating web pages and web applications. HTML is a markup language which is used for creating attractive web pages with the help of styling, and which looks in a nice format on a web browser. An HTML document is made of many HTML tags and each HTML tag contains different content.

To leran HTMl 👇

https://www.w3schools.com/html/html_intro.asp

https://developer.mozilla.org/en-US/docs/Web/HTML

https://youtu.be/kUMe1FH4CHE

https://youtu.be/pQN-pnXPaVg

Step 4: Learn CSS (Cascading Style Sheet)

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable. CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, layout designs,variations in display for different devices and screen sizes as well as a variety of other effects.

To leran CSS 👇

https://www.w3schools.com/css/css_intro.asp

https://developer.mozilla.org/en-US/docs/Web/CSS

https://youtu.be/1Rs2ND1ryYc

https://youtu.be/yfoY53QXEnI

Step 5: Learn JavaScript

JavaScript is a dynamic computer programming language. It is lightweight and most commonly used as a part of web pages, whose implementations allow client-side script to interact with the user and make dynamic pages. It is an interpreted programming language with object-oriented
capabilities.

To leran JS 👇

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript

https://www.w3schools.com/whatis/whatis_js.asp

https://youtu.be/pN6jk0uUrD8

https://youtu.be/jS4aFq5-91M

Step 6: Learn Version Control

Version control systems are a category of software tools that helps in recording changes made to files by keeping a track of modifications done in the code. Basically Version control system keeps track on changes made on a particular software and take a snapshot of every modification. Let’s suppose if a team of developer add some new functionalities in an application and the updated version is not working properly so as the version control system keeps track of our work so with the help of version control system we can omit the new changes and continue with the previous version.

https://serengetitech.com/tech/introduction-to-git-and-types-of-version-control-systems/

Git Documention 👇

https://www.git-scm.com/documentation

Git/Github Tutorials 👇

https://youtu.be/apGV9Kg7ics

https://youtu.be/RGOj5yH7evk

Step 7: Understanding Pacakge Manager

A package manager keeps track of what software is installed on your computer, and allows you to easily install new software, upgrade software to newer versions, or remove software that you previously installed. As the name suggests, package managers deal with packages: collections of files that are bundled together and can be installed and removed as a group.

What is NPM and why do we need it? 👇

https://youtu.be/P3aKRdUyr0s

NPM 👇

https://youtu.be/jHDhaSSKmB0

YARN 👇

https://youtu.be/g9_6KmiBISk

Learn Pacakge Manager 👇

https://frontendmasters.com/books/front-end-handbook/2018/learning/package-manager.html

JavaScript Pacakge Manager 👇

https://blog.bitsrc.io/4-npm-alternatives-best-js-package-managers-and-publishing-tools-fe6779937ee9

Package Management Basic 👇

https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management

Step 8: Learn Build Tools

Build tools are programs that automate the creation of executable applications from source code. Building incorporates compiling, linking and packaging the code into a usable or executable form. In small projects, developers will often manually invoke the build process.

What are build-tools? 👇

https://stackoverflow.com/questions/7249871/what-is-a-build-tool

6 Best Build Tools 👇

https://www.developerdrive.com/best-build-tools-frontend-development/

Learn Build Tools 👇

https://youtu.be/V5qvWl-O-zE

https://www.codecademy.com/learn/learn-build-tools

Step 9: Learn JS Framework/Library

Frameworks and libraries are code written by third parties to solve regular/common problems or to optimise performance. A key difference between the two is the inversion of control. When using a library, the control remains with the developer who tells the application when to call library functions.

What is JavaScript Framework? 👇

https://generalassemb.ly/blog/what-is-a-javascript-framework/

Frontend-Frameworks ->