Core Development
Frontend Development
Frontend development starts the same way it did twenty years ago — HTML, CSS, and JavaScript — but production frontend work today means going all the way through TypeScript and a real framework. This module builds you up from a static page to the exact stack most companies hire for in 2026: React (and specifically Next.js), with Angular and Vue covered so you understand the wider landscape and can adapt to any team's stack.
Topic Map
Everything in this module, at a glance
In Depth
Every topic, explained — with real-world industry context
HTML — Structure & Accessibility
HTML is the skeleton of every website — the semantic structure that browsers, screen readers, and search engines all read before a single line of CSS or JS runs.
Basics
- Elements, tags & attributes
- Document structure — head, body & metadata
- Semantic HTML5 — using the right tag for the right job
- Forms — inputs, labels, validation & submission
Intermediate
- Accessibility (a11y) — ARIA roles, alt text & keyboard navigation
- SEO-relevant markup — meta tags, headings hierarchy, structured data
- HTML5 APIs — canvas, audio/video, drag & drop
- Tables & complex layouts done correctly
Advanced
- Web Components & the Shadow DOM
- Progressive enhancement & graceful degradation
- Performance: lazy loading, resource hints (preload/prefetch)
- Writing HTML that scales across a large, multi-team codebase
Real-World Industry Use Case
A screen-reader user navigating a checkout form depends entirely on semantic HTML and ARIA labels being done correctly — this is a legal accessibility requirement (WCAG/ADA compliance) for many companies, not just a nicety.
CSS — Layout & Styling
CSS controls how that structure actually looks and adapts — from a single mobile screen to a widescreen monitor.
Basics
- The box model, selectors & specificity
- Colors, typography & the cascade
- Flexbox — one-dimensional layout
- Basic responsive design with media queries
Intermediate
- CSS Grid — two-dimensional layout
- Animations & transitions
- Custom properties (CSS variables) & theming
- Preprocessors — Sass/SCSS nesting, mixins & variables
Advanced
- CSS architecture at scale — BEM, utility-first (Tailwind) & CSS-in-JS trade-offs
- Container queries & modern responsive patterns
- Design tokens & building a design system
- Performance: critical CSS, avoiding layout thrash
Real-World Industry Use Case
Every "why does this look broken on my phone" bug is a responsive-CSS problem. Utility-first CSS (Tailwind) is now the default styling approach at a huge share of modern product teams specifically because it speeds up building consistent, responsive UI.
JavaScript (ES6+) In Depth
JavaScript is the only language that runs natively in every browser — the language that actually makes a page interactive instead of just a static document.
Basics
- Variables, functions & control flow (applied, not just theory)
- Arrays & objects, and the core methods used daily
- The DOM — selecting & updating elements
- Handling events — clicks, input, forms
Intermediate
- Closures, scope & the `this` keyword
- ES6+ features — destructuring, spread/rest, arrow functions, modules
- Asynchronous JS — callbacks, Promises & async/await
- Fetching data — the Fetch API & handling errors
Advanced
- The event loop, microtasks & macrotasks — how async really works
- Prototypes, classes & JavaScript's object model
- Performance & memory — avoiding leaks, debouncing/throttling
- Common design patterns in JS (module, observer, factory)
Real-World Industry Use Case
Every framework covered in this module — React, Angular, Vue, Next.js — is, underneath, "just" JavaScript. This is why the core language is taught first and in depth: it is the one skill that transfers to every framework a team might use.
TypeScript — The Industry-Standard Typed Layer
TypeScript adds a type system on top of JavaScript, catching entire categories of bugs before code ever runs — and has become the default expectation, not an optional extra.
Basics
- Basic types — string, number, boolean, arrays & tuples
- Interfaces & type aliases
- Function typing — parameters & return types
- Type inference — when you don't need to write types at all
Intermediate
- Generics — writing reusable, type-safe code
- Union & intersection types, and type narrowing
- Utility types — Partial, Pick, Omit, Record
- Typing React/framework components & props
Advanced
- Advanced generics & conditional types
- Declaration files & typing third-party JS libraries
- Discriminated unions for robust state modeling
- Configuring `tsconfig` & strict mode for a real codebase
Real-World Industry Use Case
TypeScript became the most-used language on GitHub by contributor count in August 2025 — it is now treated as a default skill on modern frontend teams, not a "senior nice-to-have." Every major framework's official starter templates (React, Angular, Next.js) now default to TypeScript.
React — Components, Hooks & State
React remains the dominant UI library in the industry — a component-based model for building interfaces out of small, reusable, composable pieces.
Basics
- Components & JSX — building UI as a function of data
- Props — passing data down
- useState — component-local state
- Rendering lists & handling conditional UI
Intermediate
- useEffect & the component lifecycle
- Context API — sharing state without prop-drilling
- Building custom hooks
- Client-side routing (React Router) & data fetching
Advanced
- Performance — memo, useMemo & useCallback
- Global state libraries — Redux, Zustand & when you actually need one
- Advanced patterns — compound components, render props, controlled vs. uncontrolled
- Testing React components (React Testing Library / Jest)
Real-World Industry Use Case
React remains the default choice for hiring and ecosystem reach across the industry in 2026. Companies from Meta (its creator) to most funded startups build their product UI in React specifically because of its component reusability and hiring pool.
Angular & Vue — The Other Major Frameworks
React isn't the only serious option — Angular and Vue solve the same problem with different philosophies, and understanding both makes you adaptable to any team's existing stack.
Angular Fundamentals
- Components, modules & templates
- Data binding & directives
- Services & dependency injection
- RxJS & observables for async data
Vue Fundamentals
- Template syntax & reactivity
- The Composition API vs. the Options API
- Single-file components (.vue files)
- State management with Pinia
Choosing & Comparing
- Angular's opinionated, batteries-included architecture vs. Vue's progressive adoption model
- Where each is actually used in industry today
- Comparing component models & reactivity across React, Angular & Vue
- Migrating between frameworks — what actually transfers
Real-World Industry Use Case
Angular remains strong in banking, insurance, and government software specifically because its strict, opinionated architecture suits large regulated teams. Vue is respected in enterprise settings — including at companies like Google, Microsoft, and IBM — often for design systems and gradual migrations.
Next.js & Full-Stack React
Next.js is what most teams mean today when they say "we use React" — a meta-framework that adds server-side rendering, routing, and full-stack capability on top of React itself.
Basics
- File-based routing & the App Router
- Pages, layouts & nested routes
- Static generation (SSG) — building pages at build time
- Linking & client-side navigation
Intermediate
- Server-side rendering (SSR) vs. static generation vs. client rendering
- Server components vs. client components
- API routes — writing backend logic in the same project
- Data fetching patterns & loading/error states
Advanced
- Incremental static regeneration (ISR) & on-demand revalidation
- Middleware & edge functions
- Image, font & bundle optimization for production performance
- Deployment, caching strategies & scaling a Next.js app
Real-World Industry Use Case
When public-facing pages and SEO matter, teams reach for Next.js specifically for its server-side rendering and static generation — this is the exact stack this Jversity site itself is built on. Companies adopt it to avoid manually stitching together a router, a bundler, and a rendering strategy as separate tools.
Ready to learn this — live?
See how this module fits into the complete curriculum.