Web design Study Guide

📖 Core Concepts Web design – Front‑end (client‑side) creation of a site: graphics, UI, markup, UX, SEO. Progressive enhancement – Build core content with HTML, add CSS styling, then optional JavaScript features. Responsive / mobile‑first – Design for the smallest screen first; use CSS @media rules to adapt layout for larger devices. Static vs. dynamic sites – Static: one file per page, fast, low‑risk. Dynamic: pages generated on‑the‑fly via server‑side code & databases (e.g., CMS). Usability & accessibility – Follow usability principles; provide ways to disable non‑essential animations; use web‑safe fonts or font‑download features. Standards compliance – Valid HTML/CSS, proper DOCTYPE, validation tools → readable, interoperable code. 📌 Must Remember W3C founded Oct 1994 → defines web standards (HTML5, CSS3, accessibility). CSS @media rule = key to responsive design. Progressive enhancement order: HTML → CSS → JavaScript. Web‑safe fonts = guaranteed rendering; CSS3 font‑download expands options. Static site advantages: simple hosting, low security risk, fast load. Dynamic site requirements: server‑side language, DB queries, CMS knowledge. Carousel/slider = SEO & usability penalty (avoid). 🔄 Key Processes Responsive design workflow Write semantic HTML. Add base CSS for mobile layout. Insert @media (min‑width: …) blocks for tablets, desktops. Progressive enhancement implementation HTML: core content & navigation. CSS: layout, typography, animations (enhancements). JavaScript: optional interactive widgets, polyfills. Static site build Create one HTML file per page. Link shared CSS/JS assets. Deploy to any static host (e.g., GitHub Pages). Dynamic site creation (CMS) Set up server‑side platform (PHP, Node, etc.). Configure database schema. Design template files; content editors use CMS UI. 🔍 Key Comparisons Static site vs. Dynamic site File storage: one file per page vs. generated on request. Complexity: low vs. requires back‑end code & DB. Performance: typically faster vs. depends on server load. Mobile‑first vs. Desktop‑first Start point: smallest viewport first vs. largest. Result: cleaner, leaner CSS vs. more overrides. Progressive enhancement vs. Graceful degradation Philosophy: build from basics up vs. start with full feature set then strip down. ⚠️ Common Misunderstandings “Responsive = just a flexible grid.” – True responsiveness also needs media queries, adaptable images, and touch‑friendly UI. “Animations always improve UX.” – Unnecessary motion can distract; accessibility requires a way to disable them. “If a site validates, it’s automatically accessible.” – Validation checks syntax, not WCAG compliance. 🧠 Mental Models / Intuition “HTML = foundation, CSS = paint, JS = furniture.” – Think of a house: you need walls before you can hang pictures or add smart home devices. “Mobile‑first = fit a postcard into a pocket before expanding to a billboard.” – If it works on the smallest screen, it will scale up. 🚩 Exceptions & Edge Cases Font downloading – Only modern browsers support @font‑face; fallback to web‑safe fonts for older clients. CSS @media – Media features like prefers-reduced-motion must be respected for accessibility. Static site SEO – Even static pages need proper meta tags; lack of a CMS doesn’t mean you can ignore SEO. 📍 When to Use Which Choose static site when content is largely unchanged, budget is tight, and fast load is critical. Choose dynamic/CMS for frequently updated content, user‑generated data, or complex personalization. Use progressive enhancement for public‑facing sites where broad browser support and SEO matter. Apply mobile‑first for any new project; it forces leaner code and better performance on dominant mobile traffic. 👀 Patterns to Recognize “@media (min‑width)” patterns → indicates breakpoint for larger screens. HTML5 semantic tags (<header>, <nav>, <section>) → signal accessibility‑friendly structure. CSS class naming conventions (BEM, OOCSS) → usually accompany maintainable, reusable codebases. 🗂️ Exam Traps Choosing “desktop‑first” as the recommended modern approach – Most exams expect “mobile‑first”. Assuming any animation is acceptable – Forgetting the need for “disable non‑essential animations” will be marked wrong. Confusing “web‑safe fonts” with “font‑downloadable fonts” – The former are guaranteed; the latter require fallback. Selecting “validation = accessibility” – Validation is necessary but not sufficient for WCAG compliance.