Direct Summary: Web Development Assessment
This non-commercial educational quiz evaluates core full-stack web development competencies across 5 essential domains: Semantic HTML5, CSS Grid & Flexbox, Modern JavaScript (ES6+), Web Accessibility (WCAG 2.2), and Core Web Vitals optimization. Review each question to assess your mastery.
Interactive Self-Assessment Questions
Question 1: What is the primary semantic benefit of using <main> over a generic <div>?
A) It automatically applies CSS flexbox layout to child elements.
B) It explicitly defines the dominant, unique content of the document for assistive technologies (screen readers) and search engines.
C) It prevents JavaScript from rendering external scripts.
D) It forces the browser to pre-cache all embedded images.
Show Answer & Explanation
Correct Answer: B. The <main> element represents the dominant content of the <body> of a document. It enables screen readers to provide landmark navigation shortcuts and allows search engine parsers to isolate primary page content from recurring headers, footers, and sidebars.
Question 2: Which CSS property prevents layout shift when responsive images load?
A) display: inline-block;
B) aspect-ratio combined with explicit width and height attributes.
C) position: absolute;
D) z-index: 9999;
Show Answer & Explanation
Correct Answer: B. Specifying explicit dimensions and utilizing aspect-ratio allows modern browsers to calculate the layout space before image assets finish downloading, eliminating Cumulative Layout Shift (CLS) and improving Core Web Vitals scores.
Question 3: In JavaScript, what is the key behavioral difference between const and let?
A) const variables are hoisted while let variables are not.
B) const variables cannot be reassigned after declaration, whereas let permits reassignment within its block scope.
C) const creates deeply immutable objects that cannot be mutated.
D) let only works inside asynchronous functions.
Show Answer & Explanation
Correct Answer: B. const creates an immutable identifier binding—the variable cannot be reassigned. However, note that for complex objects and arrays, the contents can still be mutated unless protected by Object.freeze().
Question 4: What security measure mitigates Cross-Site Scripting (XSS) in modern web applications?
A) Strict Content Security Policy (CSP) headers combined with contextual output encoding.
B) Enabling HTTP Keep-Alive.
C) Storing access tokens in plain localStorage without encryption.
D) Disabling HTTPS encryption.
Show Answer & Explanation
Correct Answer: A. A robust Content Security Policy (CSP) restricts the sources from which scripts and assets can execute, while contextual escaping/sanitization neutralizes untrusted user input before rendering.
Core Web Development Competency Matrix
| Domain | Key Skill Benchmark | Recommended Learning |
|---|---|---|
| HTML & Semantics | ARIA landmarks, accessible forms, meta viewports | Web Development Tutorials |
| CSS Architecture | Container queries, subgrid, fluid typography, BEM | Web Design Trends 2026 |
| Full-Stack AI | Vector indexing, RAG pipelines, API rate-limiting | Supabase vs Firebase Guide |