INTERLAB
How to build · 03

Frontend Development

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

Read: 0 / 18HTMLCSSJavaScriptTypeScriptReactReact HooksNext.jsTailwind CSSForms & ValidationState ManagementVueFrontend TestingWeb AccessibilityWeb PerformanceFrontend Architecture

HTML

  1. Fundamentals✓

    HTML: semantic markup that browsers, search engines and screen readers understand

    Semantic markup means choosing HTML elements for what the content is, not how it looks: the site header is header, the menu is nav, the main content is main, headings are h1–h6 without skipped levels, an action is a button, navigation is an a. From that markup the browser builds an accessibility tree that screen readers use to jump between regions and headings. You check the markup with a validator (Nu Html Checker or html-validate) and with the accessibility tree in DevTools.

    Beginner · 12 min read

CSS

  1. Tutorial✓

    CSS layout: Flexbox and Grid on real blocks

    Flexbox lays items out in one direction — a row or a column — and distributes free space between them; it suits headers, menus and button rows. Grid works with columns and rows at once, so it fits card grids and page layouts. One line gives you a responsive card grid without media queries: grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)).

    Beginner · 9 min read · practice ~45–90 min

JavaScript

  1. Tutorial✓

    JavaScript in the browser: the DOM and events

    The DOM is the tree of objects the browser turns HTML into: JavaScript finds elements in it with document.querySelector, changes their text (textContent), classes (classList) and attributes, and creates new ones with createElement. You react to user actions with addEventListener; an event bubbles from the element up to its parents, so one listener on a list can serve all its buttons — this is called event delegation. A form is handled in the submit event: event.preventDefault() cancels the page reload and new FormData(form) collects the field values.

    Beginner · 8 min read · practice ~45–90 min
  2. Tutorial✓

    Asynchronous JavaScript: promises, async/await and fetch

    Asynchronous JavaScript is built on promises: a promise is an object standing for a result that is pending now and later either fulfills with a value or rejects with an error. async/await lets you work with promises like ordinary code and catch errors with try/catch. fetch rejects only on a network failure or an abort, so you check the response status with response.ok; independent requests run at the same time with Promise.all or Promise.allSettled, and you cancel them with AbortController and AbortSignal.timeout().

    Intermediate · 8 min read · practice ~1.5–3 h

TypeScript

  1. Tutorial✓

    TypeScript from scratch: types, interfaces, generics

    TypeScript is JavaScript with type descriptions: the tsc compiler checks a program before it runs and catches misspelled field names, missing undefined checks and unhandled cases. The types themselves are erased at runtime, so plain JavaScript is what executes. To get started, install the typescript package, enable strict in tsconfig.json and describe your data with type and interface.

    Beginner · 11 min read · practice ~45–90 min

React

  1. Tutorial✓

    React: components, JSX and props

    A React component is a JavaScript function with a capitalised name that returns JSX markup. Data reaches a component through props, an object of parameters the component reads but never changes. Lists are rendered with map, giving each item a unique key, and conditional content uses plain if, ? : and &&.

    Beginner · 9 min read · practice ~45–90 min

React Hooks

  1. Tutorial✓

    React: state and useState

    State is a component's memory between renders: useState returns the current value and a function that stores a new one and asks React to re-render the component. Within a single render the value is a fixed snapshot, so updates based on the previous value are written as a function: setCount(c => c + 1). Objects and arrays in state are never mutated but replaced with new ones, and state shared by several components is lifted up to their closest common parent.

    Beginner · 9 min read · practice ~45–90 min
  2. Deep dive✓

    useEffect: synchronising with the outside world, and when you don't need it

    useEffect synchronises a component with a system outside React, such as a timer, a subscription, the network or a browser API: the Effect's code runs after React has updated the screen, and its cleanup function undoes it before the next run and when the component is removed. You don't choose dependencies: every prop, state value and component variable the Effect reads goes into the array, and the linter checks this. If there's no external system, because the data can be calculated during render or the action is triggered by a click, you don't need an Effect.

    Intermediate · 9 min read

Next.js

  1. Tutorial✓

    Next.js App Router: pages, layouts and routes

    In the App Router a route is a folder inside app/: a page.tsx file makes it a URL, layout.tsx defines a shared shell that does not re-render on navigation, and a folder in square brackets ([slug]) creates a dynamic route. You navigate with <Link>: Next.js prefetches the page and swaps only the part that changed. The loading, error and not-found files define loading, error and not-found states, while metadata and generateMetadata set each page's title and description.

    Intermediate · 11 min read · practice ~1.5–3 h
  2. Tutorial✓

    Next.js: Server Components, data fetching and Server Actions

    In the App Router components are server components by default: they can read the database and secrets directly, and only the result reaches the browser. A component becomes a client one with the "use client" directive, which you need for state, event handlers and browser APIs. In Next.js 16 with Cache Components data is not cached by default: you either cache it with "use cache" plus cacheLife and cacheTag, or wrap the component in <Suspense> and stream it. Changes go through Server Actions, functions marked "use server" that call updateTag after writing and validate input and user permissions themselves.

    Intermediate · 12 min read · practice ~3–6 h

Tailwind CSS

  1. Tutorial✓

    Tailwind CSS: utilities, responsiveness and theming

    Tailwind CSS is a set of small utility classes (p-6, flex, text-lg) that you combine right in your markup. The build step scans project files and generates CSS only for the classes that actually appear. In version 4 configuration lives in CSS: @import "tailwindcss" adds the framework, @theme defines colors, fonts and breakpoints as variables, and the md:, hover: and dark: prefixes apply a style only at a given screen width, in a given state or in dark mode.

    Beginner · 11 min read · practice ~45–90 min

Forms & Validation

  1. How-to✓

    Forms and validation in React

    Describe the rules once in a Zod schema and use it twice: in the form through React Hook Form and zodResolver, and on the server through safeParse — browser checks save the user time, but only the server check protects your data. Show an error after the user leaves the field (mode: "onTouched"), link it to the field with aria-invalid and aria-describedby, and disable the button while isSubmitting is true.

    Intermediate · 10 min read · practice ~1–2 h

State Management

  1. Comparison✓

    State management: local, Context, Zustand and server state

    Start with useState in the component that needs the value, and lift it to a common parent when siblings need it too. Context is a way to deliver a value deep down without props, not a store; Zustand is for client state that is read and changed from distant parts of the app; keep server data in the TanStack Query cache and filters and pages in the URL. A global store should not hold what already lives on the server or in the address bar.

    Intermediate · 7 min read

Vue

  1. Tutorial✓

    Vue 3 from scratch: components and reactivity

    Vue 3 is a JavaScript framework in which you describe the UI with an HTML template and state changes reach the DOM automatically. A new app is created with npm create vue@latest, components live in .vue files with a <script setup> block, state is declared with ref and derived values with computed. Data flows into a child component through props and back through emit events.

    Beginner · 7 min read · practice ~45–90 min

Frontend Testing

  1. Tutorial✓

    Frontend testing: Vitest and Testing Library

    Frontend code is tested at two levels: pure functions with ordinary unit tests in Vitest, and components through Testing Library the way a person uses them — find elements by role and label, click and type with user-event, and assert on what is visible on screen. The network is replaced in these tests, either with vi.stubGlobal for fetch or with MSW at the network level. A good test fails when behaviour breaks and stays quiet when you merely rewrite a component’s internals.

    Intermediate · 10 min read · practice ~1.5–3 h

Web Accessibility

  1. How-to✓

    Accessibility in code: semantics, focus, ARIA

    An accessible interface starts with native elements: <button>, <a>, <label> and <dialog> already handle focus, keyboard and the right roles. ARIA is for cases with no native element — tabs, for example — and then you must implement the keyboard behaviour yourself following the WAI-ARIA APG pattern. Testing is automated (axe inside Playwright tests) plus manual: axe finds only part of the problems, while keyboard traps and lost focus are caught by keyboard tests and by a person.

    Intermediate · 9 min read · practice ~1–2 h

Web Performance

  1. Fundamentals✓

    Site speed and Core Web Vitals: what to measure and how to speed up

    Google assesses site speed with three Core Web Vitals: LCP (how fast the main element appears, good is within 2.5 s), INP (how quickly the page responds to actions, good is 200 ms or less) and CLS (how much the layout jumps, good is 0.1 or less). You can check your site for free in PageSpeed Insights. The usual culprits are heavy images, fonts, third-party scripts and missing caching.

    Intermediate · 6 min read

Frontend Architecture

  1. Deep dive✓

    Frontend architecture: project structure, layers and boundaries

    Frontend architecture is an agreement about where code lives and who may import whom. A workable basis for a growing project: group code by feature, split UI, logic and data access inside each feature, expose a feature only through its public API (index.ts) and forbid “upward” imports from shared modules into features. These rules should be checked by a linter, not kept in people’s heads: React and Next.js don’t impose a structure, so only the team maintains it.

    Advanced · 9 min read

Learning paths with this direction

JavaScript from scratch · 9 →Markup and layout: HTML and CSS · 7 →React · 8 →Next.js · 7 →React Native + Expo · 9 →← All directions
Tell us about your task — we'll review your request and get back to you

Got a project?
We'll scope and estimate it — for free.

Tell us about the product or the problem. After reviewing the task we'll come back with an architecture, a timeline and a price for the first version.

  • Scope and risks estimated before we start
  • NDA — yours or ours
  • Work starts within a week
Message on WhatsApp

Please do not send passwords, access keys or source code through this form — we will agree a safe way to share access separately.

By clicking the button you agree to the processing of your personal data.