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

I have created DSA-Roadmap #380

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

I have created DSA-Roadmap #380

Show file tree
Hide file tree
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
bc30713
Added DSA-Roadmap repository
Vaishnavi2701-mk Oct 31, 2022
ab5eaee
Update Roadmap.md
Vaishnavi2701-mk Oct 31, 2022
cae9055
Update Roadmap.md
Vaishnavi2701-mk Oct 31, 2022
27c05d5
Update Roadmap.md
Vaishnavi2701-mk Oct 31, 2022
3a3faec
Update Roadmap.md
Vaishnavi2701-mk Oct 31, 2022
60e651b
Update Roadmap.md
Vaishnavi2701-mk Oct 31, 2022
9fc30e8
Update Roadmap.md
Vaishnavi2701-mk Oct 31, 2022
7d8342d
Update Roadmap.md
Vaishnavi2701-mk Oct 31, 2022
1220d5f
Update Roadmap.md
Vaishnavi2701-mk Oct 31, 2022
648230a
Update Roadmap.md
Vaishnavi2701-mk Oct 31, 2022
04bf1d8
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
149 changes: 149 additions & 0 deletions DSA-Roadmap/Roadmap.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,149 @@
<h1 align="center">Roadmap for DSA (Data Structure and Algorithms)</h1>

<h5 align="justify">Today’s world is highly reliable on data and their appropriate management
through widely used apps and software. The backbone for appropriate
management of data is Data Structure and Algorithms. It is a dream for many to achieve expertise in
handling and creating these apps and software. With this target in mind,
they set out on the journey of learning DSA. The very first step in the
journey is the creation of a complete roadmap to learn data structure and algorithms.</h5>

![CompleteRoadmaptolearnDataStructureandAlgorithms-660x330](https://user-images.githubusercontent.com/89184872/199058323-58d91e11-42dc-4d19-b20c-a3b755d9964d.png)


<h5 align="justify">There are 5 main steps in learning DSA.</h5>

1. <h3>Learn at least one Programming Language</h3>
2. <h3>Learn about Complexities</h3>
3. <h3>Learn Data Structure and Algorithms</h3>
4. <h3>Practice On Various Platforms</h3>
5. <h3>Compete and participate in contest</h3>

<h3>Learn at least one Programming Language</h3>

<h5 align="justify">There are 250-2,500 coding/programming languages to learn, your task is to choose one of them as per your convinience
and start learning process. Personally I prefer to learn C++ programming language. Sharing steps to learn C++.</h5>

<h5 align="justify">


1. Flowcharts

2. Conditionals(if,else if, else)

3. Loops(for, while, do while)
4. Patterns (for better understanding of loops)
5. Operators
6. Functions
7. Bit Manipulation
8. Pointers
9. Dynamic Allocation</h5>

<h3>Learn about Complexities</h3>

<h5 align="justify">Space and Time define any physical object in the Universe. Similarly, Space and Time complexity can define the effectiveness
of an algorithm. While we know there is more than one way to solve the problem in programming, knowing how the algorithm
works efficiently can add value to the way we do programming. To find the effectiveness of the program/algorithm, knowing
how to evaluate them using Space and Time complexity can make the program behave in required optimal conditions, and by
doing so, it makes us efficient programmers.</h5>


<h5 align="justify">

https://www.geeksforgeeks.org/time-complexity-and-space-complexity/



https://youtu.be/mV3wrLBbuuE</h5>


<h3>Learn Data Structure and Algorithms</h3>

<img width="1440" alt="Screenshot 2022-10-31 at 9 04 39 PM" src="https://user-images.githubusercontent.com/89184872/199059996-571c2e83-4f9b-4124-9638-02a231161198.png">



<h5 align="justify">

1. Array

2. Character Array
3. 2D-Array
4. String
5. Searching
a. Linear Search
b. Binary Search
6. Sorting
a. Bubble Sort
b. Insertion Sort
c. Selection Sort
d. Merge Sort
e. Quick Sort
7. Recursion
8. Linked List
9. Stack
10. Queue
11. Generic Tree
a. Vector
12. Binary Tree
13. Binary Search Tree
14. Priority Queue
a. Complete Tree
b. Heap
i) Min Heap
ii) Max Heap
c. Heap Sort
15. Hashmaps
a. Unordered Map
b. Ordered Map
16. OOP
17. Tries and Huffman
18. Dynamic Programming(DP)
a. Brute Force
b. Memonization
c. DP Approach
19. Graph
a. Union Find Algorithm
i) For Cycle Detection
b. Kruskal Algorithm
c. Prims Algorithm
20. Backtracking</h5>

<h3>Practice On Various Platforms</h3>

<h5 align="justify">Practice is a key, its like a cherry on a cake. The more you practice, the more confident you became and you will be a pro at DSA.

Resources that I follow to practice 👇

Leetcode 👇

https://leetcode.com/

GFG 👇

https://www.geeksforgeeks.org/

HackerEarth 👇

https://www.hackerearth.com/

HackerRank 👇

https://www.hackerrank.com/

InterviewBit 👇

https://www.interviewbit.com/

Codeforces 👇

https://codeforces.com/

CodeChef 👇

https://www.codechef.com/</h5>


<h3>Compete and participate in contest</h3>

<h5 align="justify">The most important part during preperation is to excel DSA and problem solving, and to do so you must participate in contest on various platforms.
It will boost your confidence to face any SDE interviews.</h5>
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/