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