From eb74613dce75fd1d9611566a541f80b012b82f4f Mon Sep 17 00:00:00 2001 From: Vaishnavi Mokadam Date: Mon, 31 Oct 2022 17:20:00 +0530 Subject: [PATCH 01/12] added a new repo roadmap for Frontend Web Development --- Frontend-Web-Development-Roadmap/Roadmap.md | 172 ++++++++++++++++++++ 1 file changed, 172 insertions(+) create mode 100644 Frontend-Web-Development-Roadmap/Roadmap.md diff --git a/Frontend-Web-Development-Roadmap/Roadmap.md b/Frontend-Web-Development-Roadmap/Roadmap.md new file mode 100644 index 0000000..f3263de --- /dev/null +++ b/Frontend-Web-Development-Roadmap/Roadmap.md @@ -0,0 +1,172 @@ +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 -> + +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/ From 84d18f270198a662b93bc2c14f9e22aa12a0ac2c Mon Sep 17 00:00:00 2001 From: Vaishnavi Mokadam Date: Mon, 31 Oct 2022 17:25:43 +0530 Subject: [PATCH 02/12] Update Roadmap.md --- Frontend-Web-Development-Roadmap/Roadmap.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Frontend-Web-Development-Roadmap/Roadmap.md b/Frontend-Web-Development-Roadmap/Roadmap.md index f3263de..afc5bc4 100644 --- a/Frontend-Web-Development-Roadmap/Roadmap.md +++ b/Frontend-Web-Development-Roadmap/Roadmap.md @@ -1,6 +1,6 @@ Roadmap for Frontend Web Development -Step 1: Inroduction +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; From f4ec328d003deb27d349738983f60e6476cec788 Mon Sep 17 00:00:00 2001 From: Vaishnavi Mokadam Date: Mon, 31 Oct 2022 17:26:08 +0530 Subject: [PATCH 03/12] Update Roadmap.md --- Frontend-Web-Development-Roadmap/Roadmap.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Frontend-Web-Development-Roadmap/Roadmap.md b/Frontend-Web-Development-Roadmap/Roadmap.md index afc5bc4..8b15d7b 100644 --- a/Frontend-Web-Development-Roadmap/Roadmap.md +++ b/Frontend-Web-Development-Roadmap/Roadmap.md @@ -1,6 +1,6 @@ Roadmap for Frontend Web Development -Step 1: Inroduction +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; From a844abb81fea91712d2fbdfd8cdbcfb531fec681 Mon Sep 17 00:00:00 2001 From: Vaishnavi Mokadam Date: Mon, 31 Oct 2022 17:26:42 +0530 Subject: [PATCH 04/12] Update Roadmap.md --- Frontend-Web-Development-Roadmap/Roadmap.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Frontend-Web-Development-Roadmap/Roadmap.md b/Frontend-Web-Development-Roadmap/Roadmap.md index 8b15d7b..72a09fb 100644 --- a/Frontend-Web-Development-Roadmap/Roadmap.md +++ b/Frontend-Web-Development-Roadmap/Roadmap.md @@ -1,6 +1,6 @@ Roadmap for Frontend Web Development -Step 1: Inroduction +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; From 106547eff13f35505a4dc66b7dcf034603b3f7b9 Mon Sep 17 00:00:00 2001 From: Vaishnavi Mokadam Date: Mon, 31 Oct 2022 18:00:56 +0530 Subject: [PATCH 05/12] Update Roadmap.md --- Frontend-Web-Development-Roadmap/Roadmap.md | 24 ++++++++++----------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/Frontend-Web-Development-Roadmap/Roadmap.md b/Frontend-Web-Development-Roadmap/Roadmap.md index 72a09fb..94e7c5e 100644 --- a/Frontend-Web-Development-Roadmap/Roadmap.md +++ b/Frontend-Web-Development-Roadmap/Roadmap.md @@ -1,6 +1,6 @@ Roadmap for Frontend Web Development -Step 1: Inroduction +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; @@ -14,7 +14,7 @@ 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 +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? πŸ‘‡ @@ -22,7 +22,7 @@ https://youtu.be/zN8YNNHcaZc b) Internet- CS50's Understanding Technology? πŸ‘‡ https://youtu.be/n_KghQP86Sw -Step 3: Learn HTML (Hypertext Markup Language) +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 @@ -34,7 +34,7 @@ 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) +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 @@ -47,7 +47,7 @@ https://developer.mozilla.org/en-US/docs/Web/CSS https://youtu.be/1Rs2ND1ryYc https://youtu.be/yfoY53QXEnI -Step 5: Learn JavaScript +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 @@ -59,7 +59,7 @@ https://www.w3schools.com/whatis/whatis_js.asp https://youtu.be/pN6jk0uUrD8 https://youtu.be/jS4aFq5-91M -Step 6: Learn Version Control +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. @@ -78,7 +78,7 @@ Git/Github Tutorials πŸ‘‡ https://youtu.be/apGV9Kg7ics https://youtu.be/RGOj5yH7evk -Step 7: Understanding Pacakge Manager +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 @@ -102,7 +102,7 @@ https://blog.bitsrc.io/4-npm-alternatives-best-js-package-managers-and-publishin 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 +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 @@ -118,7 +118,7 @@ Learn Build Tools πŸ‘‡ https://youtu.be/V5qvWl-O-zE https://www.codecademy.com/learn/learn-build-tools -Step 9: Learn JS Framework/Library +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 @@ -147,7 +147,7 @@ Backend-Frameworks -> 2. Next.js πŸ‘‡ https://youtu.be/GHTA143_b-s -Step 10: Learn CSS Framework/Library +Step 10: Learn CSS Framework/Library 1. What is JavaScript Framework? πŸ‘‡ https://elementor.com/resources/glossary/what-is-a-css-framework/ @@ -161,12 +161,12 @@ https://youtu.be/dFgzHOX84xQ Bootstrap πŸ‘‡ https://youtu.be/bxmDnn7lrnk -Step 11: Learn PWA (Progressive Web Apps) +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. +Step 12: Build amazing projects. https://frontendsprojects.com/ https://www.frontendpractice.com/ From 2059770a62779cb5a902005bb5c81bcf85637801 Mon Sep 17 00:00:00 2001 From: Vaishnavi Mokadam Date: Mon, 31 Oct 2022 18:04:25 +0530 Subject: [PATCH 06/12] Update Roadmap.md --- Frontend-Web-Development-Roadmap/Roadmap.md | 29 +++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/Frontend-Web-Development-Roadmap/Roadmap.md b/Frontend-Web-Development-Roadmap/Roadmap.md index 94e7c5e..b7788fe 100644 --- a/Frontend-Web-Development-Roadmap/Roadmap.md +++ b/Frontend-Web-Development-Roadmap/Roadmap.md @@ -6,20 +6,26 @@ The most important and mandatory part to get started with any new technologi is 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) @@ -29,6 +35,7 @@ HTML is a markup language which is used for creating attractive web pages with t 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 @@ -42,6 +49,7 @@ paragraphs, how columns are sized and laid out, what background images or colors 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 @@ -54,6 +62,7 @@ allow client-side script to interact with the user and make dynamic pages. It is 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 @@ -85,21 +94,27 @@ versions, or remove software that you previously installed. As the name suggests 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 @@ -109,12 +124,15 @@ compiling, linking and packaging the code into a usable or executable form. In s 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 @@ -125,45 +143,56 @@ A key difference between the two is the inversion of control. When using a libra 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. From 47e76c4f887f111827c9f851df689ad02fdbadab Mon Sep 17 00:00:00 2001 From: Vaishnavi Mokadam Date: Mon, 31 Oct 2022 20:02:12 +0530 Subject: [PATCH 07/12] Update Roadmap.md --- Frontend-Web-Development-Roadmap/Roadmap.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Frontend-Web-Development-Roadmap/Roadmap.md b/Frontend-Web-Development-Roadmap/Roadmap.md index b7788fe..0ec71d6 100644 --- a/Frontend-Web-Development-Roadmap/Roadmap.md +++ b/Frontend-Web-Development-Roadmap/Roadmap.md @@ -1,5 +1,7 @@ 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. From f83936d5f25f6c3289e95559e250b597514244b3 Mon Sep 17 00:00:00 2001 From: Vaishnavi Mokadam Date: Mon, 31 Oct 2022 20:03:23 +0530 Subject: [PATCH 08/12] Update Roadmap.md --- Frontend-Web-Development-Roadmap/Roadmap.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Frontend-Web-Development-Roadmap/Roadmap.md b/Frontend-Web-Development-Roadmap/Roadmap.md index 0ec71d6..f1f3400 100644 --- a/Frontend-Web-Development-Roadmap/Roadmap.md +++ b/Frontend-Web-Development-Roadmap/Roadmap.md @@ -1,4 +1,4 @@ -Roadmap for Frontend Web Development +Roadmap for Frontend Web Development Screenshot 2022-10-31 at 8 01 13 PM From 591310031761c9fa8ae10b79873c86cb0e1c6f11 Mon Sep 17 00:00:00 2001 From: Vaishnavi Mokadam Date: Mon, 31 Oct 2022 20:05:32 +0530 Subject: [PATCH 09/12] Update Roadmap.md --- Frontend-Web-Development-Roadmap/Roadmap.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Frontend-Web-Development-Roadmap/Roadmap.md b/Frontend-Web-Development-Roadmap/Roadmap.md index f1f3400..238dbcd 100644 --- a/Frontend-Web-Development-Roadmap/Roadmap.md +++ b/Frontend-Web-Development-Roadmap/Roadmap.md @@ -1,4 +1,4 @@ -Roadmap for Frontend Web Development +

Roadmap for Frontend Web Development

Screenshot 2022-10-31 at 8 01 13 PM From eb4c29c9a690505bcca3897a230508cb55053379 Mon Sep 17 00:00:00 2001 From: Vaishnavi Mokadam Date: Mon, 31 Oct 2022 20:06:22 +0530 Subject: [PATCH 10/12] Update Roadmap.md --- Frontend-Web-Development-Roadmap/Roadmap.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Frontend-Web-Development-Roadmap/Roadmap.md b/Frontend-Web-Development-Roadmap/Roadmap.md index 238dbcd..f5ae1c4 100644 --- a/Frontend-Web-Development-Roadmap/Roadmap.md +++ b/Frontend-Web-Development-Roadmap/Roadmap.md @@ -2,7 +2,7 @@ Screenshot 2022-10-31 at 8 01 13 PM -Step 1: Inroduction +

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; From 062dac373bec2618c7ea9fdfa6becdc0f39d3b28 Mon Sep 17 00:00:00 2001 From: Vaishnavi Mokadam Date: Mon, 31 Oct 2022 20:09:25 +0530 Subject: [PATCH 11/12] Update Roadmap.md --- Frontend-Web-Development-Roadmap/Roadmap.md | 22 ++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/Frontend-Web-Development-Roadmap/Roadmap.md b/Frontend-Web-Development-Roadmap/Roadmap.md index f5ae1c4..2baf379 100644 --- a/Frontend-Web-Development-Roadmap/Roadmap.md +++ b/Frontend-Web-Development-Roadmap/Roadmap.md @@ -19,7 +19,7 @@ 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 +

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? πŸ‘‡ @@ -30,7 +30,7 @@ b) Internet- CS50's Understanding Technology? πŸ‘‡ https://youtu.be/n_KghQP86Sw -Step 3: Learn HTML (Hypertext Markup Language) +

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 @@ -43,7 +43,7 @@ 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) +

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 @@ -57,7 +57,7 @@ https://developer.mozilla.org/en-US/docs/Web/CSS https://youtu.be/1Rs2ND1ryYc https://youtu.be/yfoY53QXEnI -Step 5: Learn JavaScript +

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 @@ -70,7 +70,7 @@ https://www.w3schools.com/whatis/whatis_js.asp https://youtu.be/pN6jk0uUrD8 https://youtu.be/jS4aFq5-91M -Step 6: Learn Version Control +

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. @@ -89,7 +89,7 @@ Git/Github Tutorials πŸ‘‡ https://youtu.be/apGV9Kg7ics https://youtu.be/RGOj5yH7evk -Step 7: Understanding Pacakge Manager +

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 @@ -119,7 +119,7 @@ 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 +

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 @@ -138,7 +138,7 @@ Learn Build Tools πŸ‘‡ https://youtu.be/V5qvWl-O-zE https://www.codecademy.com/learn/learn-build-tools -Step 9: Learn JS Framework/Library +

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 @@ -173,7 +173,7 @@ Backend-Frameworks -> https://youtu.be/GHTA143_b-s -Step 10: Learn CSS Framework/Library +

Step 10: Learn CSS Framework/Library

1. What is JavaScript Framework? πŸ‘‡ @@ -191,13 +191,13 @@ Bootstrap πŸ‘‡ https://youtu.be/bxmDnn7lrnk -Step 11: Learn PWA (Progressive Web Apps) +

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. +

Step 12: Build amazing projects.

https://frontendsprojects.com/ https://www.frontendpractice.com/ From 3ed18986af0c4af97f391a2b5dcb22c7f9ad97b7 Mon Sep 17 00:00:00 2001 From: Vaishnavi Mokadam Date: Mon, 31 Oct 2022 20:11:19 +0530 Subject: [PATCH 12/12] Update Roadmap.md --- Frontend-Web-Development-Roadmap/Roadmap.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/Frontend-Web-Development-Roadmap/Roadmap.md b/Frontend-Web-Development-Roadmap/Roadmap.md index 2baf379..6214db6 100644 --- a/Frontend-Web-Development-Roadmap/Roadmap.md +++ b/Frontend-Web-Development-Roadmap/Roadmap.md @@ -39,8 +39,11 @@ nice format on a web browser. An HTML document is made of many HTML tags and eac 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)

@@ -53,8 +56,11 @@ 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

@@ -66,8 +72,11 @@ 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

@@ -87,6 +96,7 @@ https://www.git-scm.com/documentation Git/Github Tutorials πŸ‘‡ https://youtu.be/apGV9Kg7ics + https://youtu.be/RGOj5yH7evk

Step 7: Understanding Pacakge Manager

@@ -136,6 +146,7 @@ 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

@@ -153,6 +164,7 @@ Frontend-Frameworks -> 1. React πŸ‘‡ https://youtu.be/b9eMGE7QtTk + https://youtu.be/bMknfKXIFA8 2. Angular πŸ‘‡ @@ -200,4 +212,5 @@ https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps

Step 12: Build amazing projects.

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