Skip to main content
Software Dictionary

Learning path · Beginner

Frontend developer

From HTML and CSS to frameworks, rendering and shipping fast pages.

Everything that runs in the browser: the building blocks of a page, JavaScript and its async model, how frameworks render, and the tooling that ships it.

39 pages4 chaptersabout 1.5 hours of reading

  • Web Development
  • Backend & APIs
  • Programming Fundamentals

Not started yet0/39 read

Start with HTML

Progress comes from your reading history, kept only in this browser.

Chapter 1The building blocks

  1. 1HTMLWeb Development, p. 18HTML is the markup language that defines the structure and content of web pages, such as headings, paragraphs, links, images, and forms.
  2. 2CSSWeb Development, p. 10CSS is the style sheet language that controls how HTML content looks on screen, including colors, fonts, spacing, layout, and animations.
  3. 3FlexboxWeb Development, p. 16Flexbox is a CSS layout model that arranges items in a single row or column and controls how they grow, shrink, align, and share the available space.
  4. 4CSS GridWeb Development, p. 11CSS Grid is a two-dimensional CSS layout system that arranges elements into rows and columns at the same time, making complex page layouts simple to build.
  5. 5Media QueryWeb Development, p. 29A media query is a CSS rule that applies styles only when the device or browser matches conditions such as screen width, orientation, or a dark color scheme.
  6. 6Responsive DesignWeb Development, p. 38Responsive design is an approach to building web pages whose layout, images, and text adapt automatically to any screen size, from phones to large monitors.
  7. 7Web AccessibilityWeb Development, p. 56Web accessibility is the practice of building websites that everyone can use, including people who rely on screen readers, keyboards, captions, or zoom.

Chapter 2JavaScript in the browser

  1. 8JavaScriptWeb Development, p. 24JavaScript is the programming language that runs in web browsers to make pages interactive, and it also runs on servers through runtimes like Node.js.
  2. 9DOMWeb Development, p. 13The DOM is the browser's in-memory tree of objects representing a web page, which JavaScript can read and change to update what the user sees.
  3. 10Event LoopBackend & APIs, p. 13The event loop is a mechanism that lets a single thread handle many tasks by running callbacks one at a time as events and I/O results become ready.
  4. 11CallbackProgramming Fundamentals, p. 7A callback is a function passed as an argument to another function, which then calls it later, for example when a task finishes or an event happens.
  5. 12PromiseProgramming Fundamentals, p. 46A promise is an object that represents the eventual result of an asynchronous operation, letting code react to success or failure once the work completes.
  6. 13Async/AwaitProgramming Fundamentals, p. 4Async/await is a syntax for writing asynchronous code that reads like ordinary step-by-step code, pausing at each await until a promise or task finishes.
  7. 14AJAXWeb Development, p. 1AJAX (Asynchronous JavaScript and XML) is a technique for loading server data in the background with JavaScript and updating part of a page without a reload.
  8. 15DebounceWeb Development, p. 12Debouncing delays a function until a burst of events has paused for a set time, so a search box sends one request after typing stops, not one per keystroke.
  9. 16Local StorageWeb Development, p. 28Local storage is a browser feature that lets a website save text as key-value pairs on the user's device, where it stays even after the browser is closed.
  10. 17CookieWeb Development, p. 6A cookie is a small piece of data a website asks the browser to store and send back with later requests, often used to keep users logged in.

Chapter 3Frameworks and rendering

  1. 18ReactWeb Development, p. 36React is an open-source JavaScript library for building user interfaces from reusable components that update automatically when their data changes.
  2. 19JSXWeb Development, p. 26JSX is a JavaScript syntax extension for writing HTML-like markup inside code, used mainly with React to describe what the user interface should look like.
  3. 20State ManagementWeb Development, p. 44State management is how an application stores, updates and shares the data that changes while it runs, and keeps the interface in sync with it.
  4. 21Next.jsWeb Development, p. 31Next.js is a React framework that adds routing, server-side rendering, static generation and server code, so a whole web app can be built as one project.
  5. 22Virtual DOMWeb Development, p. 53The virtual DOM is a lightweight copy of a page's element tree kept in JavaScript memory, which UI libraries compare to update the real DOM efficiently.
  6. 23SPAWeb Development, p. 41An SPA is a web application that loads a single HTML page and then updates content with JavaScript, so moving between views does not reload the page.
  7. 24CSRWeb Development, p. 9CSR is a rendering approach where the browser downloads a mostly empty HTML page plus JavaScript, then builds the page content on the user's device.
  8. 25SSRWeb Development, p. 43SSR is a technique where the server builds the full HTML for a page on each request, so users and search engines receive ready-to-read content immediately.
  9. 26SSGWeb Development, p. 42SSG is a technique that renders a website's pages to plain HTML files at build time, so servers or CDNs can deliver them instantly without extra work.
  10. 27HydrationWeb Development, p. 22Hydration is the step where JavaScript in the browser takes over server-rendered HTML, attaching event handlers and state so the page becomes interactive.

Chapter 4Shipping it

  1. 28npmWeb Development, p. 32npm is Node.js's default package manager and the world's largest software registry; it downloads a project's dependencies and tracks their versions.
  2. 29Package ManagerProgramming Fundamentals, p. 41A package manager is a tool that installs, updates and removes software packages and their dependencies, resolving versions automatically.
  3. 30TypeScriptWeb Development, p. 50TypeScript is a programming language built on JavaScript that adds static types, catching many bugs before the code runs, and compiles to plain JavaScript.
  4. 31BundlerWeb Development, p. 3A bundler is a build tool that combines JavaScript modules and their dependencies into a few optimized files that browsers can download and run quickly.
  5. 32WebpackWeb Development, p. 60Webpack is a module bundler that follows an app's imports and combines its JavaScript, CSS, images and other files into optimized bundles for the browser.
  6. 33ViteWeb Development, p. 54Vite is a fast build tool for web projects: it serves code to the browser almost instantly in development and bundles it into optimized files for production.
  7. 34TranspilerWeb Development, p. 48A transpiler is a tool that translates source code from one language or language version into another at a similar level, such as TypeScript into JavaScript.
  8. 35Tree ShakingWeb Development, p. 49Tree shaking is a build optimization that removes code a program never uses from the final bundle, based on which ES module exports are actually imported.
  9. 36Code SplittingWeb Development, p. 5Code splitting is a technique that breaks a web app's JavaScript into smaller chunks loaded on demand, so the first page load downloads only the code it needs.
  10. 37Lazy LoadingWeb Development, p. 27Lazy loading is a technique that delays loading images, videos, scripts or other resources until they are actually needed, usually when they scroll into view.
  11. 38MinificationWeb Development, p. 30Minification is the process of shrinking code files by removing whitespace, comments and long names without changing behavior, so web pages download faster.
  12. 39PWAWeb Development, p. 35A PWA is a website built with modern web APIs so it can be installed on a device, work offline, and behave much like a native app from a single codebase.

Along the way, compare

Pairs on this path that are easy to mix up, side by side.

More

Settings

EnglishTürkçe