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
