stackademic

The leading education platform for anyone with an interest in software development.

Learning Paths / Frontend Developer Track

career
intermediate
20h estimated

Frontend Developer Track

A career track for frontend engineers: HTML and CSS foundations, JavaScript, TypeScript, React, Next.js, and testing.

Start learning →

Web Foundations

  1. 1

    Document Structure

    The boilerplate every HTML page needs, from doctype to head and body

  2. 2

    Semantic HTML

    Using meaningful tags like header, nav, main, and footer to describe content

  3. 3

    Forms

    Collecting user input with inputs, labels, and the form element

  4. 4

    Accessibility

    Simple HTML practices that make pages usable for everyone

Styling

  1. 1

    Box Model

    Content, padding, border, margin, and box-sizing behavior

  2. 2

    Flexbox

    One-dimensional layouts with flex containers and items

  3. 3

    Grid

    Two-dimensional layouts with rows, columns, and named areas

  4. 4

    Responsive Design

    Adapt layouts to screen size with media queries and fluid units

JavaScript

  1. 1

    Functions

    Declare functions, arrow syntax, scope, and higher-order patterns

  2. 2

    Closures

    Functions that remember variables from their enclosing scope

  3. 3

    Promises

    Handle asynchronous results with then, catch, and Promise combinators

  4. 4

    Async/Await

    Write asynchronous code that reads like synchronous control flow

  5. 5

    Array Methods

    Transform data with map, filter, reduce, find, and more

TypeScript

  1. 1

    Basic Types

    Annotate primitives, arrays, tuples, and any with TypeScript types

  2. 2

    Interfaces

    Define object shapes, optional properties, and extendable contracts

  3. 3

    Generics

    Write reusable functions and types that work across type parameters

React

  1. 1

    Components

    Build UI from reusable function components, composition, and children

  2. 2

    useState

    Add local state to function components and trigger re-renders on updates

  3. 3

    useEffect

    Run side effects after render: fetching data, subscriptions, and DOM sync

  4. 4

    Custom Hooks

    Extract reusable stateful logic into your own composable hooks

  5. 5

    Performance

    Reduce wasted renders with memoization and stable references

Next.js

  1. 1

    App Router

    File-system routing, layouts, and the app directory architecture

  2. 2

    Server Components

    Render on the server by default with async data fetching and zero client JS

  3. 3

    Data Fetching

    Fetch data in Server Components with async/await, revalidation, and request deduping

Quality

  1. 1

    Unit Tests

    Testing a single function or module in isolation from the rest of the system

  2. 2

    End-to-End Tests

    Driving the whole application like a real user to verify complete flows