diff --git a/Frontend-Web-Development-Roadmap/Roadmap.md b/Frontend-Web-Development-Roadmap/Roadmap.md new file mode 100644 index 0000000..6214db6 --- /dev/null +++ b/Frontend-Web-Development-Roadmap/Roadmap.md @@ -0,0 +1,216 @@ +

Roadmap for Frontend Web Development

+ +Screenshot 2022-10-31 at 8 01 13 PM + +

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 -> + +1. React πŸ‘‡ + + https://youtu.be/b9eMGE7QtTk + + https://youtu.be/bMknfKXIFA8 + +2. Angular πŸ‘‡ + + https://youtu.be/3qBXWUpoPHo + +3. Vue.js πŸ‘‡ + + https://youtu.be/FXpIoQ_rT_c + +Backend-Frameworks -> + +1. Express.js πŸ‘‡ + + https://youtu.be/Oe421EPjeBE + +2. Next.js πŸ‘‡ + + https://youtu.be/GHTA143_b-s + +

Step 10: Learn CSS Framework/Library

+ +1. What is JavaScript Framework? πŸ‘‡ + + https://elementor.com/resources/glossary/what-is-a-css-framework/ + +2. Best CSS Framework πŸ‘‡ + + https://hackr.io/blog/best-css-frameworks + +Tailwind πŸ‘‡ + +https://youtu.be/dFgzHOX84xQ + +Bootstrap πŸ‘‡ + +https://youtu.be/bxmDnn7lrnk + +

Step 11: Learn PWA (Progressive Web Apps)

+ +What is PWA (Progressive Web Apps)? πŸ‘‡ + +https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps + +

Step 12: Build amazing projects.

+ +https://frontendsprojects.com/ + +https://www.frontendpractice.com/