Discuss a project

Direction · 03

Frontend Development

HTML, CSS, JavaScript, TypeScript, React, Next.js, Vue, Tailwind, forms, state, testing and performance.

18 materials

HTML

✓HTML: semantic markup that browsers, search engines and screen readers understandFundamentals · Beginner · 12 min

CSS

✓CSS layout: Flexbox and Grid on real blocksTutorial · Beginner · 9 min · practice 45–90 min

JavaScript

✓JavaScript in the browser: the DOM and eventsTutorial · Beginner · 8 min · practice 45–90 min ✓Asynchronous JavaScript: promises, async/await and fetchTutorial · Intermediate · 8 min · practice 1.5–3 h

TypeScript

✓TypeScript from scratch: types, interfaces, genericsTutorial · Beginner · 11 min · practice 45–90 min

React

✓React: components, JSX and propsTutorial · Beginner · 9 min · practice 45–90 min

React Hooks

✓React: state and useStateTutorial · Beginner · 9 min · practice 45–90 min ✓useEffect: synchronising with the outside world, and when you don't need itDeep dive · Intermediate · 9 min

Next.js

✓Next.js App Router: pages, layouts and routesTutorial · Intermediate · 11 min · practice 1.5–3 h ✓Next.js: Server Components, data fetching and Server ActionsTutorial · Intermediate · 12 min · practice 3–6 h

Tailwind CSS

✓Tailwind CSS: utilities, responsiveness and themingTutorial · Beginner · 11 min · practice 45–90 min

Forms & Validation

✓Forms and validation in ReactHow-to · Intermediate · 10 min · practice 1–2 h

State Management

✓State management: local, Context, Zustand and server stateComparison · Intermediate · 7 min

Vue

✓Vue 3 from scratch: components and reactivityTutorial · Beginner · 7 min · practice 45–90 min

Frontend Testing

✓Frontend testing: Vitest and Testing LibraryTutorial · Intermediate · 10 min · practice 1.5–3 h

Web Accessibility

✓Accessibility in code: semantics, focus, ARIAHow-to · Intermediate · 9 min · practice 1–2 h

Web Performance

✓Site speed and Core Web Vitals: what to measure and how to speed upFundamentals · Intermediate · 6 min

Frontend Architecture

✓Frontend architecture: project structure, layers and boundariesDeep dive · Advanced · 9 min

Learning paths with this direction

JavaScript from scratch · 9 steps →Markup and layout: HTML and CSS · 7 steps →React · 8 steps →Next.js · 7 steps →React Native + Expo · 9 steps →

← All directions