Frontend Development on Software Engineering Learning Paths

HTML Semantics and Accessibility

Mon, 01 Jan 0001 00:00:00 +0000

Why Semantics Matter#

HTML is not just about visual structure — it’s a communication layer between your content and machines (browsers, screen readers, search engines, AI). Semantic HTML provides meaning that <div> and <span> cannot.

flowchart LR
 HTML["Semantic HTML"] --> B["Browser<br>(rendering, navigation)"]
 HTML --> SR["Screen Reader<br>(accessibility tree)"]
 HTML --> SE["Search Engine<br>(content understanding)"]
 HTML --> Dev["Developer<br>(readable code)"]

Document Structure#

The Semantic Skeleton#

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Page Title — Site Name</title>
 <meta name="description" content="Page description for SEO">
</head>
<body>
 <header>
 <nav aria-label="Main navigation">
 <ul>
 <li><a href="/" aria-current="page">Home</a></li>
 <li><a href="/products">Products</a></li>
 <li><a href="/about">About</a></li>
 </ul>
 </nav>
 </header>
 
 <main>
 <article>
 <h1>Article Title</h1>
 <p>Content...</p>
 
 <section aria-labelledby="features-heading">
 <h2 id="features-heading">Features</h2>
 <p>Section content...</p>
 </section>
 </article>
 
 <aside aria-label="Related articles">
 <h2>Related</h2>
 <ul>...</ul>
 </aside>
 </main>
 
 <footer>
 <nav aria-label="Footer navigation">...</nav>
 <p>&copy; 2024 Company Name</p>
 </footer>
</body>
</html>

Heading Hierarchy#

Headings create an outline. Screen readers use them for navigation.

CSS Fundamentals

Mon, 01 Jan 0001 00:00:00 +0000

How CSS Works#

CSS (Cascading Style Sheets) controls the visual presentation of HTML. Understanding the cascade, specificity, and box model is essential — without them, you’re guessing why styles apply or don’t.

flowchart TD
 HTML["HTML Document"] --> Parse["Parse CSS"]
 Parse --> Cascade["Cascade<br>(resolve conflicts)"]
 Cascade --> Spec["Specificity<br>(which rule wins)"]
 Spec --> Inherit["Inheritance<br>(parent → child)"]
 Inherit --> Computed["Computed Values"]
 Computed --> Layout["Layout (Box Model)"]
 Layout --> Paint["Paint"]
 Paint --> Composite["Composite"]

The Cascade#

When multiple rules target the same element, the cascade determines which wins:

Layout: Flexbox and Grid

Mon, 01 Jan 0001 00:00:00 +0000

The Layout Problem#

Before Flexbox and Grid, layout relied on floats, tables, and positioning hacks. Modern CSS provides two purpose-built layout systems:

Flexbox — one-dimensional (row OR column)
Grid — two-dimensional (rows AND columns simultaneously)

flowchart TD
 Q{Layout need?} -->|"Items in a line<br>(nav, toolbar, card row)"| Flex["Flexbox"]
 Q -->|"Page layout<br>(header, sidebar, content)"| Grid["Grid"]
 Q -->|"Both dimensions<br>(dashboard, gallery)"| Grid
 Q -->|"Content-driven<br>(items determine size)"| Flex
 Q -->|"Layout-driven<br>(grid determines size)"| Grid

Flexbox#

Core Concept#

A flex container distributes space among its children along a main axis:

Responsive Design

Mon, 01 Jan 0001 00:00:00 +0000

The Responsive Mindset#

Responsive design means building interfaces that adapt to any screen size, orientation, and input method. The modern approach is mobile-first — start with the smallest screen and progressively enhance.

flowchart LR
 M["Mobile<br>(320-480px)"] -->|"Add complexity"| T["Tablet<br>(768-1024px)"]
 T -->|"Add complexity"| D["Desktop<br>(1024px+)"]
 
 style M fill:#c8e6c9
 style T fill:#fff3e0
 style D fill:#e1f5fe

The Viewport Meta Tag#

Without this, mobile browsers render pages at desktop width and zoom out:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Property	Effect
`width=device-width`	Match viewport to device width
`initial-scale=1.0`	No zoom on load
`user-scalable=no`	NEVER use — breaks accessibility

Media Queries#

Mobile-First Breakpoints#

/* Base styles — mobile (no media query needed) */
.container {
 padding: 1rem;
}

/* Tablet and up */
@media (min-width: 768px) {
 .container {
 padding: 2rem;
 max-width: 720px;
 margin: 0 auto;
 }
}

/* Desktop and up */
@media (min-width: 1024px) {
 .container {
 max-width: 960px;
 }
}

/* Large desktop */
@media (min-width: 1280px) {
 .container {
 max-width: 1200px;
 }
}

Common Breakpoints#

Name	Width	Targets
`sm`	640px	Large phones (landscape)
`md`	768px	Tablets
`lg`	1024px	Small laptops
`xl`	1280px	Desktops
`2xl`	1536px	Large screens

Important: These are guidelines, not rules. Set breakpoints where your design breaks, not at device widths.

CSS Architecture

Mon, 01 Jan 0001 00:00:00 +0000

The Scaling Problem#

CSS is global by default. Every selector can affect any element on the page. As projects grow, this leads to specificity wars, unintended side effects, and fear of changing styles. CSS architecture methodologies solve this by providing naming conventions and organizational patterns.

BEM (Block Element Modifier)#

The most widely adopted naming convention. It makes relationships between components explicit in class names.

Naming Pattern#

.block {}
.block__element {}
.block--modifier {}

Part	Meaning	Example
Block	Standalone component	`.card`, `.nav`, `.form`
Element	Part of a block (can’t exist alone)	`.card__title`, `.card__image`
Modifier	Variation of block or element	`.card--featured`, `.card__title--large`

Example#

<article class="card card--featured">
 <img class="card__image" src="..." alt="...">
 <div class="card__body">
 <h2 class="card__title">Title</h2>
 <p class="card__description">Description text</p>
 <a class="card__link card__link--primary" href="#">Read more</a>
 </div>
</article>

/* Block */
.card {
 border-radius: 8px;
 overflow: hidden;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Modifier on block */
.card--featured {
 border: 2px solid var(--color-primary);
}

/* Elements */
.card__image {
 width: 100%;
 aspect-ratio: 16 / 9;
 object-fit: cover;
}

.card__title {
 font-size: 1.25rem;
 margin-bottom: 0.5rem;
}

.card__link {
 text-decoration: none;
 color: var(--color-primary);
}

/* Modifier on element */
.card__link--primary {
 font-weight: bold;
}

BEM Rules#

Never nest selectors — .card .card__title is wrong; just .card__title
No element of element — .card__body__title is wrong; flatten to .card__title
Modifiers don’t exist alone — always pair: class="card card--featured"
Blocks are independent — a block should work anywhere on the page

ITCSS (Inverted Triangle CSS)#

ITCSS organizes CSS by specificity, from generic to specific:

Browser Rendering Pipeline

Mon, 01 Jan 0001 00:00:00 +0000

From URL to Pixels#

When you navigate to a page, the browser performs a complex pipeline to turn HTML, CSS, and JavaScript into pixels on screen. Understanding this pipeline is essential for performance optimization.

flowchart LR
 HTML["Parse HTML"] --> DOM["DOM Tree"]
 CSS["Parse CSS"] --> CSSOM["CSSOM Tree"]
 DOM --> RT["Render Tree"]
 CSSOM --> RT
 RT --> Layout["Layout<br>(geometry)"]
 Layout --> Paint["Paint<br>(pixels)"]
 Paint --> Comp["Composite<br>(layers)"]
 Comp --> Screen["Display"]

Step 1: Parsing#

HTML → DOM#

The browser parses HTML into a tree of nodes (the DOM):

Web Performance

Mon, 01 Jan 0001 00:00:00 +0000

Why Performance Matters#

Every 100ms of latency costs 1% in sales (Amazon). A 1-second delay reduces conversions by 7%. Performance is not a feature — it’s a requirement.

flowchart LR
 subgraph Metrics["Core Web Vitals"]
 LCP["LCP<br>Largest Contentful Paint<br>Loading: < 2.5s"]
 INP["INP<br>Interaction to Next Paint<br>Interactivity: < 200ms"]
 CLS["CLS<br>Cumulative Layout Shift<br>Stability: < 0.1"]
 end

Core Web Vitals#

Metric	Measures	Good	Needs Work	Poor
LCP	Loading speed (largest element visible)	≤ 2.5s	≤ 4.0s	> 4.0s
INP	Responsiveness (input → visual update)	≤ 200ms	≤ 500ms	> 500ms
CLS	Visual stability (unexpected shifts)	≤ 0.1	≤ 0.25	> 0.25

LCP (Largest Contentful Paint)#

What counts as LCP element:

Web APIs

Mon, 01 Jan 0001 00:00:00 +0000

The Browser as a Platform#

Modern browsers expose hundreds of APIs beyond the DOM. These APIs enable features that previously required native apps — offline storage, push notifications, geolocation, hardware access, and more.

DOM Manipulation#

Querying Elements#

// Modern selectors (CSS syntax)
const el = document.querySelector('.card'); // first match
const all = document.querySelectorAll('.card'); // NodeList (not live)
const closest = el.closest('.container'); // nearest ancestor

// By ID (fastest)
const header = document.getElementById('header');

// Traversal
el.parentElement;
el.children; // HTMLCollection (live)
el.nextElementSibling;
el.previousElementSibling;

Creating and Modifying#

// Create
const div = document.createElement('div');
div.className = 'card';
div.textContent = 'Hello';
div.dataset.id = '123'; // data-id="123"

// Insert
container.appendChild(div);
container.prepend(div); // first child
container.insertBefore(div, referenceEl);
referenceEl.after(newEl); // after sibling
referenceEl.before(newEl); // before sibling

// Remove
el.remove();

// Clone
const clone = el.cloneNode(true); // deep clone

// Attributes
el.setAttribute('aria-expanded', 'true');
el.getAttribute('data-id');
el.removeAttribute('hidden');
el.toggleAttribute('disabled');

// Classes
el.classList.add('active', 'visible');
el.classList.remove('hidden');
el.classList.toggle('open');
el.classList.contains('active'); // boolean
el.classList.replace('old', 'new');

Events#

Event Flow#

flowchart TD
 subgraph Capture["Capture Phase (top → target)"]
 W["window"] --> D["document"] --> B["body"] --> P["parent"]
 end
 
 P --> T["Target Element"]
 
 subgraph Bubble["Bubble Phase (target → top)"]
 T2["Target"] --> P2["parent"] --> B2["body"] --> D2["document"]
 end
 
 T --> T2

// Bubbling (default) — event travels UP from target
parent.addEventListener('click', (e) => {
 console.log('Parent clicked');
 console.log('Actual target:', e.target); // element clicked
 console.log('Handler on:', e.currentTarget); // element with listener
});

// Capture — event travels DOWN to target
parent.addEventListener('click', handler, { capture: true });

// Stop propagation
child.addEventListener('click', (e) => {
 e.stopPropagation(); // prevents bubbling to parent
});

// Prevent default behavior
link.addEventListener('click', (e) => {
 e.preventDefault(); // don't navigate
});

Event Delegation#

Instead of attaching listeners to every child, attach one to the parent:

State Management Patterns

Mon, 01 Jan 0001 00:00:00 +0000

What Is State?#

State is any data that changes over time and affects what the user sees. Managing state well is the central challenge of frontend development — most bugs are state bugs.

flowchart TD
 subgraph Types["Types of State"]
 UI["UI State<br>(modal open, tab active)"]
 Server["Server State<br>(fetched data, cache)"]
 Form["Form State<br>(input values, validation)"]
 URL["URL State<br>(route, query params)"]
 Global["Global State<br>(auth, theme, locale)"]
 end

Local Component State#

The simplest form — state lives inside a single component:

Build Tooling

Mon, 01 Jan 0001 00:00:00 +0000

Why Build Tools Exist#

Browsers understand HTML, CSS, and JavaScript. But modern frontend development uses TypeScript, SCSS, JSX, Vue SFCs, and npm packages that browsers can’t run directly. Build tools bridge this gap.

flowchart LR
 subgraph Source["Source Code"]
 TS[".ts / .tsx"]
 Vue[".vue"]
 SCSS[".scss"]
 NPM["node_modules/"]
 end
 
 subgraph Build["Build Tool"]
 TR["Transform<br>(compile, transpile)"]
 BN["Bundle<br>(resolve imports)"]
 OP["Optimize<br>(minify, tree-shake)"]
 end
 
 subgraph Output["Production Output"]
 JS[".js (bundled)"]
 CSS[".css (compiled)"]
 HTML["index.html"]
 Assets["images, fonts"]
 end
 
 Source --> Build --> Output

What Build Tools Do#

Task	What	Why
Transpile	TypeScript → JavaScript, JSX → JS	Browser compatibility
Bundle	Combine modules into fewer files	Reduce HTTP requests
Tree-shake	Remove unused code	Smaller bundles
Minify	Remove whitespace, shorten names	Smaller file size
Code-split	Split into chunks loaded on demand	Faster initial load
Compile CSS	SCSS → CSS, PostCSS transforms	Developer ergonomics
Optimize assets	Compress images, inline small files	Performance
Dev server	Hot Module Replacement (HMR)	Fast feedback loop

Vite#

The modern standard for frontend development. Uses esbuild for dev (fast) and Rollup for production (optimized).

Accessibility in Depth

Mon, 01 Jan 0001 00:00:00 +0000

Accessibility in Depth#

Web accessibility means building interfaces that work for everyone — including people who use screen readers, keyboard-only navigation, magnification, voice control, or switch devices. This section covers ARIA, testing tools, and the patterns that make complex UI components accessible.

WCAG 2.2 Levels#

Level	Standard	Requirement
A	Minimum	Basic accessibility (alt text, keyboard navigation, no seizure triggers)
AA	Industry standard	Colour contrast ≥ 4.5:1, focus visible, consistent navigation, error identification
AAA	Enhanced	Contrast ≥ 7:1, sign language, extended audio descriptions (rarely required)

Most legal requirements and organisational standards target Level AA.