Episode 1 — Fundamentals / 1.2 — Client Server Architecture

1.2 - Exercise Questions: Client-Server Architecture

Practice questions for all seven subtopics in Section 1.2. Some items are short-answer; others are hands-on. Try each without peeking at the hints first.

How to use this material (instructions)

Read lessons in order — README.md, then 1.2.a → 1.2.g.
Answer closed-book first — use answer hints only after you write something down.
Hands-on — DevTools Network and curl exercises are required for retention.
Redo misses — retry the next day; mark weak subtopics (1.2.c HTTP, etc.).
Interview prep — pair with 1.2-Interview-Questions.md.

1.2.a — Client-Server Model (Q1–Q7)

Q1. In your own words, define client-server architecture and name the two main roles.

Q2. Exercise: On paper or in a diagramming tool, sketch a 3-tier architecture with presentation, application, and data tiers. Label typical components in each tier (e.g. browser, app server, database).

Q3. Compare client-server and peer-to-peer (P2P) models: who initiates work, where data often lives, and one example product or protocol for each.

Q4. List three advantages of the client-server model for web applications.

Q5. List three disadvantages or operational costs of the client-server model (think scaling, single points of failure, complexity).

Q6. Why is the client-server model a natural fit for HTTP-based web apps?

Q7. Scenario: A mobile game stores player saves only on each phone and syncs directly between players’ devices when they meet on Wi‑Fi. Is that closer to client-server or P2P? Justify your answer.

1.2.b — Client vs Server (Q8–Q14)

Q8. What is the core difference in responsibility between a client and a server in a typical web interaction?

Q9. Name three distinct types of servers (by function), e.g. types that serve different kinds of workloads or protocols.

Q10. What is a browser engine? Name the primary engine used in Chrome, Firefox, and Safari (one each).

Q11. Explain thin client vs thick (fat) client. Give one example of each in everyday software.

Q12. Contrast running an app on physical hardware, a virtual machine (VM), a container, and serverless. What does the developer typically manage vs outsource in each?

Q13. Can the same machine act as both client and server? Give a concrete example (e.g. local development).

Q14. True or false (explain): “The server always has a screen and keyboard because it serves users.”

1.2.c — HTTP Request/Response (Q15–Q25)

Q15. Exercise: Write a raw HTTP/1.1 GET request line plus at least three plausible headers (no body) for GET /products HTTP/1.1 to https://shop.example.com.

Q16. Exercise: Write a raw HTTP/1.1 POST request including a plausible Content-Type, Content-Length (or use chunked if you prefer), and a short JSON body for creating a user.

Q17. List the common HTTP methods you know (at least: GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS). For each, note whether it is safe and whether it is idempotent (per typical HTTP semantics).

Q18. What does HTTP status code 201 mean? Give an example API response where it would be appropriate.

Q19. What does 304 Not Modified mean, and what client behavior does it usually trigger?

Q20. What does 502 Bad Gateway usually imply about the path between client and origin server?

Q21. What is the difference between 401 Unauthorized and 403 Forbidden?

Q22. What problem do CORS headers solve? Name at least two response headers involved in a simple CORS flow.

Q23. What does it mean that HTTP is stateless? How do cookies (and sessions) help build stateful experiences on top?

Q24. Compare HTTP/1.1, HTTP/2, and HTTP/3 in terms of multiplexing, head-of-line blocking, and underlying transport (where you know it).

Q25. What is an HTTP redirect? Compare 301 vs 302 vs 307 at a high level (permanent vs temporary, method preservation).

1.2.d — What Happens When You Visit a Website (Q26–Q32)

Q26. Exercise: List at least 12 steps from typing a URL and pressing Enter to a rendered page (include DNS, TCP/TLS, HTTP, parsing, and painting at minimum).

Q27. What is the browser rendering pipeline? Order the main stages (e.g. parse → tree construction → layout → paint → composite) and note what each stage produces or does.

Q28. What is the CSSOM, and how does it relate to the DOM and the final render trees?

Q29. What is the difference between DOMContentLoaded and window.onload? Which fires first in a typical page with images?

Q30. Why does <script> placement (head vs end of body vs defer / async) matter for parsing and perceived performance?

Q31. What is critical rendering path? Name one optimization that shortens it.

Q32. After the HTML arrives, why might the browser still issue many additional HTTP requests before the page is complete?

1.2.e — Frontend vs Backend (Q33–Q40)

Q33. Name three frontend frameworks or libraries and three backend frameworks (any popular stack).

Q34. What is a REST API? List the main constraints or conventions you associate with REST over HTTP.

Q35. How does GraphQL differ from a typical REST API in terms of shape of requests, over/under-fetching, and versioning?

Q36. What is a full-stack developer? What do they typically own in a product team?

Q37. Name three popular full-stack or common paired technology stacks (e.g. named combinations like MERN, LAMP, etc.).

Q38. Where does authentication logic usually live in a client-server app, and what does the client typically store or send?

Q39. What is the difference between SSR (as a frontend delivery strategy) and client-only rendering in terms of where HTML is built?

Q40. Scenario: A dashboard must hide salary data from non-admins. Should you rely only on hiding UI in the frontend? Explain the correct division of responsibility with the backend.

1.2.f — Static vs Dynamic Websites (Q41–Q45)

Q41. Exercise: Create a comparison table with columns Static site, Dynamic site — rows for how HTML is produced, personalization, hosting complexity, typical use cases, and caching.

Q42. Name three static site generators (SSGs).

Q43. Contrast SSR, CSR, SSG, and ISR. For each, state when HTML exists and when it is regenerated.

Q44. When would you choose a mostly static site vs a dynamic server-rendered app? Give one example project for each.

Q45. Can a site be both static and dynamic in different sections? Describe a realistic hybrid.

1.2.g — Web Hosting (Q46–Q52)

Q46. Name as many hosting / deployment models as you can (e.g. shared, VPS, dedicated, colocation, cloud VM, PaaS, serverless, container orchestration).

Q47. What is the difference between shared hosting and a VPS in terms of isolation, performance, and control?

Q48. What does 99.9% uptime mean in approximate downtime per year? Show your reasoning.

Q49. Exercise: Outline the steps to deploy your first simple website (from buying a domain to something live on HTTPS) at a high level.

Q50. What is serverless hosting? What do you not manage compared to a VPS?

Q51. What is a CDN, and how does it relate to hosting origin vs edge?

Q52. What is DNS hosting vs web hosting, and why might they be different providers?

Practical exercises (Q53–Q60)

Q53. Hands-on: Open Chrome DevTools → Network. Reload a page, pick one document request and one XHR/fetch request. For each, record URL, method, status, type, and whether it hit cache.

Q54. Hands-on: Use curl -v to perform a GET to a public HTTPS URL. Paste (or write down) the request line, response status line, and three response headers you find interesting.

Q55. Hands-on: Use curl -X POST with -H 'Content-Type: application/json' and -d to send a small JSON payload to a public test API (e.g. https://httpbin.org/post). What does the response echo back?

Q56. Hands-on: Use dig or nslookup on a domain you use. What record types do you see (A, AAAA, CNAME, MX, NS)? Which nameserver is authoritative?

Q57. Hands-on: Inspect response headers for a site (DevTools or curl -I). Identify cache-control, content-type, and any set-cookie headers if present.

Q58. Hands-on: In DevTools Network, throttle to “Slow 3G” and reload. Which resources block First Contentful Paint? Name one mitigation.

Q59. Hands-on: Use curl to follow redirects: compare default behavior with curl -I -L on a URL that redirects (e.g. http://example.com). How many hops?

Q60. Hands-on: Pick a page with CORS in play (e.g. SPA calling an API). In Network, find a preflight OPTIONS request if present. What Access-Control-* headers appear on the response?

Answer hints

(Short reminders — expand in your own words when studying.)

Q	Hint
Q1	Two roles: client initiates; server waits and responds. Architecture = many clients, shared services, often over HTTP.
Q2	Tiers: presentation (UI), application (business logic / APIs), data (DB, files). Arrows show request flow both ways.
Q3	P2P: peers equal; CS: centralized services. Examples: web vs BitTorrent (classic contrast).
Q4–Q5	Pros: central updates, security, consistency. Cons: server cost, scaling, SPOF, ops burden.
Q6	Stateless request/response, clear separation of UI and data, fits browser + origin server.
Q7	Device-to-device sync → P2P-ish; not classic client-server unless a central sync API exists.
Q8	Client: UI + requests; server: listens, processes, stores authoritative data.
Q9	Examples: web, database, file, mail, DNS, application / API.
Q10	Engines: Blink (Chrome), Gecko (Firefox), WebKit (Safari).
Q11	Thin: little local logic (terminal, some web apps). Thick: heavy local app (IDE, games).
Q12	Physical: you rack hardware. VM: hypervisor + guest OS. Container: shared kernel. Serverless: functions + managed runtime.
Q13	Yes — localhost dev: browser client + local server on same machine.
Q14	False — servers are often headless; admins use SSH/APIs.
Q15–Q16	Include `Host`, `User-Agent`, `Accept`; POST needs `Content-Type`, body, length.
Q17	GET/HEAD safe; GET/HEAD/PUT/DELETE idempotent in theory; POST neither safe nor idempotent; PATCH often not idempotent.
Q18	201 Created — resource created; often includes Location.
Q19	Not modified — client uses cached copy; conditional GET with validators.
Q20	Bad gateway — edge/proxy got invalid response from upstream.
Q21	401 = not authenticated; 403 = authenticated or not, but not allowed.
Q22	Cross-origin browser security; headers like `Access-Control-Allow-Origin`, `...-Methods`, `...-Headers`.
Q23	Each request standalone; cookies carry session id; server maps to session store.
Q24	h2 multiplexes over TCP; h3 uses QUIC/UDP; reduces some HOL blocking issues.
Q25	301 permanent; 302 temporary (historically loose); 307 preserves method on redirect.
Q26	URL parse → DNS → TCP → TLS → HTTP request → response → parse HTML → subresources → CSSOM/DOM → layout → paint → composite.
Q27	Parse HTML/CSS → DOM/CSSOM → render tree → layout (positions) → paint → composite.
Q28	CSSOM = CSS object model; combined with DOM for styling.
Q29	DOMContentLoaded = HTML parsed; load = all resources (e.g. images) done.
Q30	Parser-blocking scripts delay DOM; defer/async change order and blocking.
Q31	Minimum work to first pixels; inline critical CSS, reduce blocking JS, font strategies.
Q32	CSS, JS, images, fonts, APIs — not all in first HTML document.
Q33	Examples: React/Vue/Angular; Express/Django/Rails/FastAPI/Spring — any valid trio.
Q34	Resources, stateless interactions, standard methods, representations (often JSON).
Q35	Single graph endpoint vs many URLs; client picks fields; schema vs endpoints.
Q36	Works across UI + API + data; owns feature vertically.
Q37	MERN, MEAN, LAMP, Django + React, Rails + Hotwire, etc.
Q38	Server enforces; client sends tokens/cookies; never trust UI-only hiding.
Q39	SSR HTML from server per request vs CSR builds DOM in browser from API data.
Q40	Backend must authorize every sensitive API; frontend hiding is not security.
Q41	Static = files fixed; dynamic = per-request assembly; table rows as above.
Q42	Hugo, Jekyll, Eleventy, Next.js static export, Gatsby — any three.
Q43	SSR each request; CSR in browser; SSG build time; ISR revalidate on timer/on-demand.
Q44	Marketing/docs → static; logged-in dashboards, inventory → dynamic.
Q45	e.g. static marketing + dynamic app under `/app` or separate subdomain.
Q46	List: shared, VPS, dedicated, colo, IaaS VM, PaaS, FaaS, Kubernetes, CDN edge.
Q47	Shared = same OS/server neighbors; VPS = partitioned VM with more isolation.
Q48	99.9% ≈ 43–45 minutes downtime/year (0.1% of ~525,600 minutes).
Q49	Domain → DNS records → hosting → upload/build → TLS cert → deploy → verify.
Q50	Functions + managed scaling; no server patching by you; event-driven.
Q51	CDN caches static assets at edge; origin is source of truth.
Q52	DNS points names to IPs; web host serves HTTP; often split for flexibility.
Q53–Q60	Practice reading timing, waterfall, headers, DNS TTL, redirect chains.

← Back to 1.2 — Client-Server Architecture (README)