WEB DEV

Mobile dev vs Web dev
Browers - lang - HTML, CSS, JS
History of Browsers
- Browsers war I - IE history
- Browsers war II - Pichai contribution
Structure of Web App / WEB ARCHITECTURE ( 3 layer architecture)
- Loose coupling
- Different BE
- JSON
- MicroService
Frontend - HTML, CSS, JS
What happens when you type www.google.com?
- Request and response cycle
- Request Initiator
- Demo: Network in browser
- DNS
  - 📖💬 - Brought ragavkumarv.com
- IP
  - Private vs Public
    - 🔄🧠 - Military Roads
    - 🔄🧠 - Why? Sbi Banks different part of india
  - Static vs Dynamic
    - 🔄🧠 - Dress change room
- Mac Address
- Types of connection
  - TCP
    - 3 way handshake
  - UDP
- Broken into packets
  - Ip packets
  - 🔄🧠 - Traffic jam
  - 🔄🧠 - Lost packet recall
- HTTP version
  - 0.9
  - 1.0
  - 1.1
  - 2.0
  - 3.0
- CRUD methods
- Under the hood
  - Browsers
    - HTML parser
    - CSS parser
    - JS Engine
- Layout Process
- Trees
  - DOM tree
  - CSSOM tree
  - Render tree
- 🖊️ Vscode setup for HTML & CSS
- Explain basic tags and CSS
- Design mode of CSS
- Structure of Browser
  - UI
  - Browser Engine
  - Rendering Engine
  - JS Engine
  - Network
  - UI Backend
  - Data Storage (🖊️ Browser devtool)
- Types of Engines
  - Different Browsers Different engine
  - 🔄🧠 - Engines are the secret the sauce
Summarization of entire flow
- Domain name ➡️ DNS ➡️ TCP ➡️ HTTP Packets ➡️ HTTP Code ➡️ Browser rendering ➡️Structure of Browser