Scribd
Upload
16 views

Roadmap to Fs Dev Class

Uploaded by

manak verma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views

Roadmap to Fs Dev Class

Uploaded by

manak verma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

1) Beginner roadmap to frontend dev

2) Beginner roadmap to backend dev


3) Easiest way to be a fullstack dev
4) Advanced frontend dev technologies
5) Advanced backend dev technologies
6) Interviews for these roles (For all the roles)
7) Package in these roles

What happens when you hit www.google.com

1. When you enter a url


2. You need the ip address of the computer/server providing this
website
3. Where is this ip address stored?
4. DNS server / Dictionary of all the websites and there ip addresses
5. Behind the ip address what is there?
6. Server? (Backend)
7. Job of the server
8. Take a request and respond to a request
9. Client requests a webpage from the server
10. Response- HTML (Frontend)
11. Client gets this html
12. It renders the html on the browser
13. Database keeps the information (Database)
14. Cloud is where these servers are
15. AWS/AZURE/GCP(Infra)

Backend developer- Writes the code on the server for getting a request
and responding to a request and to connect with the database.
Frontend developer- Receives a request from the backend, Renders the
html on the frontend and uses js and css for additional features.
Database Developer- Maintains the data and provides interfaces to
interact with this database
Infra/Devops engineer - Maintaining things on cloud providing cloud
infrastructure.
Fullstack dev?
Who knows all the above

3 categories of full stack developers

50FE 50BE
30FE 70BE
70FE 30BE

Start with one


1) Frontend or
2) Backend

Roadmap to becoming a frontend developer


(https://roadmap.sh/frontend)

HTML- W3Schools: Learn HTML

● htmlreference.io: All HTML elements at a glance


● HTML For Beginners The Easy Way
● Web Development Basics
● Codecademy - Learn HTML
● Interactive HTML Course
● HTML Full Course for Beginners | Complete All-in-One Tutorial
● HTML Full Course - Build a Website Tutorial
● HTML Tutorial for Beginners: HTML Crash Course

CSS- Cascading style sheet

● The Odin Project


● What The Flexbox!
● Learn CSS | Codecademy
● Learn Intermediate CSS | Codecademy
● CSS Complete Course
● CSS Crash Course For Absolute Beginners
● HTML and CSS Tutorial
● CSS Masterclass - Tutorial & Course for Beginners
● W3Schools — Learn CSS
● cssreference.io: All CSS properties at a glance
● Web.dev by Google — Learn CSS
● freeCodeCamp — Responsive Web Design
● Learn to Code HTML & CSS
● Joshw Comeaus CSS Hack Blog Posts
● 100 Days CSS Challenge
● CSS Tutorial | Scaler

JS-

● Visit Dedicated JavaScript Roadmap


● W3Schools – JavaScript Tutorial
● The Modern JavaScript Tutorial
● Learn JavaScript: Covered many topics
● Eloquent JavaScript textbook
● You Dont Know JS Yet (book series)
● JavaScript Crash Course for Beginners
● Build a Netflix Landing Page Clone with HTML, CSS & JS
● Build 30 Javascript projects in 30 days
● Learn the basics of JavaScript
● JavaScript for Beginners

Js adds functionality and logic into your code

1) Promises
2) Asynchronous js
3) Events
4) Event loops
5) Closures
6) ES6
7) Prototypes
8) Proto
9) Dom manipulation

Git - Git & GitHub Crash Course For Beginners


● Learn Git with Tutorials, News and Tips - Atlassian
● Git Cheat Sheet
● Tutorial: Git for Absolutely Everyone

NPM

Node package manager

Node- Library of all the packages


NPM - Librarian managing all these packages
Packages- Books that you are borrowing from the library
Package.json - Book card

Frontend libraries/ JS libraries or frameworks

React/Angular/Vue/Ember

React- Visit Dedicated React Roadmap

● React Website
● Official Getting Started
● The Beginners Guide to React
● React JS Course for Beginners
● React Course - Beginners Tutorial for React JavaScript Library [2022]
● Understanding Reacts UI Rendering Process

Css frameworks-

Material UI, Bootstrap, Tailwind

Frontend testing - jest,


Chai, Mocha

What is the interview process for this frontend roles


1) Beginner
2) Intermediate
3) Advanced

1) DSA/Basic js round
2) Frontend basics round (HTML, CSS,JS)
3) Framework round(React)
4) Machine coding round(3 hours to build something)
5) Cultural fitment round

Advanced
1. DSA/Basics round
2. Frontend basics and framework round
3. Design round system-design
4. Machine coding/ System design round
5. Cultural fitment round

Roadmap to backend development(https://roadmap.sh/backend)

Pick a backend language

Java- Has the largest market share


PHP - Is not widely used for newer web development
Python - 2 advantages - web, AI
Nodejs - Has a significant market share of developers in node js
Ruby on rails - Used in startups
Go -
c# -
.net - They are used in banking companies
Rust
Fastest route to becoming a fullstack
MERN - Mongo Express react node
MEAN - Mongo Express Angular Node

Learn js and you could easily transition to becoming a fullstack


developer using MERN

Relational database / Non relational database


MYSQL, PostgreSQL, Maria Db

Mongo, dynamo, Casandra

People

ID Name Email
1 Rahul xyz
2 Ankush xys
3 Rishabh abc
4 Ankita uio
5 Udbhav abc
6 Mrinal uio

Friends

ID People_ID
1 1
2 2
3 4

NoSQl

Document-
JSON- Javascript object notation

Key value pair manner

User = { id:{ name, id, email },3:{ name, id, email },id:{ name, id, email }}

Transaction-
Sharding-

API’s-
Backbone of your Dynamic websites
Bridge b/w backend and frontend is an api

Book my show
List of movies that are there
/list-of-movies - get
/list-of-theaters - get
/seating-arrangement -get
/user-choice - post

Caching
2 places
1 browser
2 CDN

Authentication
JWT
OAuth
Token Auth
Basic auth
Sso

OS

Networking
CI/CD

Interview Process

1) DSA
2) Backend language
3) Machine coding round
4) Low level design
5) Cultural fitment

Senior
1) DsA
2) Backend language/LLD
3) LLD
4) High level design
5) Cultural fitment

Fullstack - 5-20
Backend - 3-20
Frontend - 3-20

You might also like