Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added a new repo roadmap for Frontend Web Development #377

Open
wants to merge 12 commits into
base: main
Choose a base branch
from
Open

Added a new repo roadmap for Frontend Web Development #377

Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
eb74613
added a new repo roadmap for Frontend Web Development
Vaishnavi2701-mk Oct 31, 2022
84d18f2
Update Roadmap.md
Vaishnavi2701-mk Oct 31, 2022
f4ec328
Update Roadmap.md
Vaishnavi2701-mk Oct 31, 2022
a844abb
Update Roadmap.md
Vaishnavi2701-mk Oct 31, 2022
106547e
Update Roadmap.md
Vaishnavi2701-mk Oct 31, 2022
2059770
Update Roadmap.md
Vaishnavi2701-mk Oct 31, 2022
47e76c4
Update Roadmap.md
Vaishnavi2701-mk Oct 31, 2022
f83936d
Update Roadmap.md
Vaishnavi2701-mk Oct 31, 2022
5913100
Update Roadmap.md
Vaishnavi2701-mk Oct 31, 2022
eb4c29c
Update Roadmap.md
Vaishnavi2701-mk Oct 31, 2022
062dac3
Update Roadmap.md
Vaishnavi2701-mk Oct 31, 2022
3ed1898
Update Roadmap.md
Vaishnavi2701-mk Oct 31, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
216 changes: 216 additions & 0 deletions Frontend-Web-Development-Roadmap/Roadmap.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,216 @@
<h1 align="center">Roadmap for Frontend Web Development</h1>

<img width="1440" alt="Screenshot 2022-10-31 at 8 01 13 PM" src="https://user-images.githubusercontent.com/89184872/199032659-aeacc6dd-41c5-41e6-8029-41ab5a58fbbb.png">

<h3>Step 1: Inroduction</h3>

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/

<h3>Step 2: Understanding Internet</h3>

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

<h3>Step 3: Learn HTML (Hypertext Markup Language)</h3>

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

<h3>Step 4: Learn CSS (Cascading Style Sheet)</h3>

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

<h3>Step 5: Learn JavaScript</h3>

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

<h3>Step 6: Learn Version Control</h3>

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

<h3>Step 7: Understanding Pacakge Manager</h3>

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

<h3>Step 8: Learn Build Tools</h3>

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

<h3>Step 9: Learn JS Framework/Library</h3>

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

<h3>Step 10: Learn CSS Framework/Library</h3>

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

<h3>Step 11: Learn PWA (Progressive Web Apps)</h3>

What is PWA (Progressive Web Apps)? 👇

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

<h3>Step 12: Build amazing projects.</h3>

https://frontendsprojects.com/

https://www.frontendpractice.com/