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 1 commit
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
172 changes: 172 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,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/