Web development Study Guide

📖 Core Concepts Web Development – Designing, building, and maintaining websites/web apps; includes coding, design, content, networking. Front‑End – Client‑side UI; uses HTML, CSS, JavaScript to turn designs into interactive pages. Back‑End – Server‑side infrastructure; handles APIs, databases, security, and business logic. Full‑Stack – Developer skilled in both front‑ and back‑end layers; can deliver a complete product alone. Web 1.0 vs. Web 2.0 – Static, read‑only pages (Web 1.0) → interactive, user‑generated content with server‑side services (Web 2.0). Responsive Design – One codebase that adapts layout to any screen size. Progressive Web App (PWA) – Web site that can be installed, works offline, and mimics native‑app behavior. JavaScript Frameworks – Libraries (e.g., React, Vue) that provide reusable components & abstractions for complex UI work. AI in Web Dev – Tools for code generation, debugging help, and automated testing. 📌 Must Remember Core front‑end trio: HTML, CSS, JavaScript. Common back‑end languages: PHP, Java (plus many frameworks). React = component‑based + virtual DOM for fast rendering. Vue.js = progressive, incrementally adoptable UI framework. Responsive design = fluid grids, flexible images, media queries. PWA features: service workers, manifest file, offline caching. Full‑stack advantage: single developer can handle end‑to‑end delivery. AI tools → faster prototyping, fewer manual bugs. 🔄 Key Processes Transforming a Design → Front‑End Code Sketch → HTML skeleton → CSS styling → JavaScript interactivity. Back‑End Request Cycle Front‑end sends HTTP request → API endpoint processes → DB query → response (JSON/XML) → front‑end renders. Responsive Layout Creation Define breakpoints → apply CSS media queries → test on multiple viewports. PWA Setup Add manifest.json → register Service Worker → cache assets → enable “Add to Home Screen”. React Component Rendering Write JSX component → React creates virtual DOM → diffing algorithm updates real DOM efficiently. 🔍 Key Comparisons HTML vs. CSS – HTML structures content; CSS styles appearance. Front‑End vs. Back‑End – UI/UX focus vs. data & logic processing. React vs. Vue.js – React: ecosystem‑heavy, JSX, virtual DOM; Vue: template‑driven, easier learning curve, progressive adoption. Web 1.0 vs. Web 2.0 – Static pages vs. interactive, user‑generated, server‑driven sites. Responsive Design vs. Adaptive Design – Responsive = fluid breakpoints; Adaptive = fixed layouts for specific devices (not in outline but useful contrast). ⚠️ Common Misunderstandings “Web development = design” – Development includes coding & server logic, not just visual design. “Back‑end only handles databases” – It also provides APIs, security, and business rules. “React replaces HTML/CSS” – React generates HTML via JSX but still relies on CSS for styling. “PWAs are native apps” – PWAs run in browsers; they mimic native features but aren’t compiled binaries. 🧠 Mental Models / Intuition “Layer Cake” – Think of a website as layers: HTML (structure) → CSS (style) → JavaScript (behavior) → API/Server (data) → DB (storage). “Request‑Response Loop” – Every user action that needs data follows the cycle: UI → HTTP request → server logic → data → UI update. “Component as Lego Brick” – In React/Vue, each UI piece is a self‑contained block that can be reused and assembled. 🚩 Exceptions & Edge Cases Older browsers may not fully support CSS Grid or Flexbox → need fallbacks or polyfills. Server‑side rendering (SSR) – React can render on the server for SEO; not covered in basic SPA flow. AI code suggestions – May produce insecure code; always review generated snippets. 📍 When to Use Which Choose Front‑End vs. Back‑End focus – If the task is UI layout or interactivity → front‑end; if handling data persistence, authentication, or heavy computation → back‑end. React vs. Vue – Pick React for large, complex apps with a strong ecosystem; choose Vue for quicker start‑up, smaller projects, or incremental adoption. Responsive vs. Separate Mobile Site – Use responsive design unless you need radically different UX for mobile (rare). PWA vs. Native App – Use PWA when you need cross‑platform reach with lower development cost; go native for performance‑critical, device‑specific features. 👀 Patterns to Recognize “API‑First” – Back‑end exposes REST/GraphQL endpoints; front‑end consumes them → look for JSON payloads. “Component‑State Flow” – In React/Vue, data flows down (props) and events bubble up (callbacks). “Media Query Breakpoints” – 320 px, 768 px, 1024 px are common widths to trigger layout changes. “Service Worker Lifecycle” – Install → Activate → Fetch → Cache → Update pattern. 🗂️ Exam Traps Confusing “Responsive” with “Adaptive” – An answer that describes fixed device‑specific layouts is wrong for responsive questions. Mixing up HTML vs. CSS responsibilities – Selecting “HTML handles styling” is a distractor. Assuming React eliminates the need for any HTML – React still outputs HTML; the framework just generates it dynamically. Thinking AI can fully replace manual testing – AI assists but cannot guarantee 100 % coverage; tests still required. Choosing “PWA = native app” – Exam may present a statement that PWAs run without a browser; it’s false.