Front-End Technologies
HTML, CSS, JavaScript, and the frameworks that organize them — React, Vue, Angular, Svelte.
The Three Layers of Front-End
Every website is built from three foundational languages, each with a specific job:
HTML: Structure
HTML (HyperText Markup Language) defines the content and structure. It's markup, not programming — you write tags to describe "this is a heading," "this is a paragraph," "this is a link."
<h1>Hello World</h1>
<p>This is a paragraph.</p>
HTML5 and semantic HTML: Modern HTML includes tags like `<header>`, `<nav>`, `<article>`, `<footer>` that describe meaning, not just appearance. These help search engines and assistive technology understand your content.
CSS: Presentation
CSS (Cascading Style Sheets) controls how HTML looks — colors, layout, spacing, fonts, animations. CSS has evolved dramatically, moving from inflexible layout methods to powerful modern tools.
CSS Floats (outdated): Used for layouts before better methods existed. Still used for wrapping text around images.
Flexbox (2015+): One-dimensional layouts (rows or columns). Perfect for navigation bars, card layouts, and aligning items.
CSS Grid (2017+): Two-dimensional layouts (rows AND columns). Powerful for complex page layouts.
JavaScript: Behavior
JavaScript (JS) is the only programming language that runs in browsers. It handles interactivity: click events, form validation, animations, fetching data from servers without page reloads (AJAX).
JavaScript transformed from a toy scripting language to a Turing-complete programming language capable of building entire applications in the browser.
CSS: From Preprocessors to Utility Frameworks
CSS has evolved layers beyond the base language:
- Preprocessors:Sass and Less add programming features to CSS (variables, nesting, mixins). They compile to regular CSS. Still popular, though modern CSS has adopted some features natively.
- CSS Frameworks:Bootstrap, Tailwind CSS, and others provide pre-built component libraries and utility classes. Tailwind uses utility-first design, while Bootstrap provides semantic components.
JavaScript Frameworks: Organizing Complexity
Raw JavaScript works for simple interactivity, but modern web applications are enormous. Frameworks provide structure for managing state, rendering changes, and building reusable components:
React (Meta)
Component-based, declarative UI. Largest ecosystem, most hireable. Uses JSX (JavaScript + HTML syntax).
Vue
Lighter weight, easier to learn. Single-file components. Growing adoption, especially in Asia.
Angular
Full-featured, opinionated framework from Google. Steep learning curve. Popular in enterprise.
Svelte
Compiles to vanilla JavaScript. Minimal runtime overhead. Fastest framework. Smaller community.
Solid
Fine-grained reactivity without virtual DOM. Extremely performant. Niche but growing.
Meta-Frameworks: Full-Stack JavaScript
JavaScript frameworks handle the browser. Meta-frameworks add server-side rendering, static generation, API routes, and more:
- Next.js (React): Industry standard. Server Components, App Router, API routes, Edge Functions.
- Nuxt (Vue): Vue's meta-framework. Auto-routing, server components, strong convention.
- SvelteKit (Svelte): File-based routing, server-side rendering, adapters for any platform.
- Astro: Send less JavaScript. Island Architecture. Great for content sites.
Rendering Strategies: Where Does HTML Get Built?
This is critical for performance, SEO, and cost:
CSR (Client-Side Rendering)
Browser downloads JavaScript and builds the page in the browser. Fast after initial download, but initial page is blank. Requires JavaScript.
SSR (Server-Side Rendering)
Server builds HTML on every request. Always fresh, good for SEO, but slower (server must work on every request).
SSG (Static Site Generation)
Build HTML at deploy time. Fastest possible, works without a server. Limited to static content or rebuild-on-change patterns.
ISR (Incremental Static Regeneration)
Hybrid: static pages, but regenerate periodically or on-demand. Best of both worlds — fast, but can update content.
Islands Architecture
Mix of static HTML and interactive JavaScript "islands." Most of the page is static, interactive components load JavaScript only where needed.
TypeScript: Adding Type Safety
TypeScript adds static type checking to JavaScript. Before deployment, TypeScript checks that you're not passing the wrong data type to functions or accessing properties that don't exist. This catches bugs early. It compiles to plain JavaScript.
Framework Comparison
| Framework | Ecosystem | Learning Curve | Job Market | Best For |
|---|---|---|---|---|
| React | Massive (npm packages) | Moderate | Excellent | Large applications, teams |
| Vue | Good | Easy | Growing | Startups, smaller teams |
| Angular | Large (built-in) | Steep | Good (enterprise) | Enterprise, large orgs |
| Svelte | Growing | Moderate | Small | Performance-critical apps |
| Solid | Small | Moderate | Tiny | Bleeding-edge developers |