Theoretical Knowledge Assessment

Evaluating core frontend technologies and architectural principles.

HTML5 Semantics & Accessibility

Why they matter: Semantic elements like <header>, <nav>, and <main> carry inherent meaning. Unlike <div> or <span>, which are "empty vessels," semantic tags tell the browser exactly what is inside.

  • Accessibility (A11y): Screen readers use <nav> as a landmark. A <div> is invisible to them.
  • SEO: Crawlers prioritize <article> content over generic containers.
  • Maintainability: <footer> is self-documenting; <div class="bottom"> requires guessing.
  • Browser Defaults: <button> is keyboard-accessible by default; a <div> is not.
Bad — Non-Semantic 
<div class="header">
  <div class="nav"> ... </div>
</div>
Good — Semantic 
<header>
  <nav> ... </nav>
</header>

2. CSS3 Layouts & Responsiveness

Flexbox (1D)

Ideal for components like navbars. Aligns items in a single row or column.

Grid (2D)

Ideal for full-page layouts. Handles both rows and columns simultaneously.

3. JavaScript (ES6+) & State

Closures: Functions that retain access to their outer scope.

Virtual DOM: A UI representation used by React/Vue to batch updates, minimizing expensive real-DOM manipulations.

Clicking this demonstrates local state management.

React.js vs. Vue.js Fundamentals

Feature React.js (The Library) Vue.js (The Framework)
Philosophy Unopinionated: "Everything is JS." Opinionated: "The Progressive Framework."
Syntax JSX (JavaScript XML) Templates (HTML-based)
Data Binding One-way (Predictable flow) Two-way (Easier for forms)
Learning Curve Steeper (Requires JS mastery) Gentle (Classic HTML/CSS feel)

The Virtual DOM

Both use a Virtual DOM—a lightweight copy of the real DOM. Instead of re-rendering the whole page, they "diff" the changes and update only what's necessary. This is the secret to their high performance.

Component-Based

Both follow a Component Architecture. You build small, reusable pieces (like a <Button />) and assemble them into complex UIs.

4. Performance & Architecture