tech-studies

Frontend

2 min read

Frontend

roadmap.sh: https://roadmap.sh/frontend

Suggested path through the Frontend nodes. Each node links to its lesson when written.

Nodes

Internet fundamentals

  • How does the internet work?
  • What is HTTP?
  • What is a domain name?
  • What is hosting?
  • DNS and how it works
  • Browsers and how they work

HTML

  • Learn the basics
  • Writing semantic HTML
  • Forms and validations
  • Conventions and best practices
  • Accessibility
  • SEO basics

CSS

  • Learn the basics
  • Making layouts
  • Responsive design
  • Box model
  • Flexbox
  • Grid
  • Media queries

JavaScript

  • Learn the basics
  • DOM manipulation
  • Fetch API / Ajax (XHR)
  • Learn the terminology (hoisting, event bubbling, scope, prototype, shadow DOM, strict mode)

Version control systems

  • Git
  • GitHub
  • GitLab
  • Bitbucket

Package managers

  • npm
  • pnpm
  • yarn

Pick a framework

  • React
  • Vue.js
  • Angular
  • Svelte
  • Solid.js
  • Qwik

Writing CSS

  • Tailwind CSS

CSS architecture

  • BEM

CSS preprocessors

  • Sass
  • PostCSS

Build tools

  • Linters and formatters (Prettier, ESLint)
  • Vite
  • esbuild
  • Webpack
  • Rollup

Testing

  • Vitest
  • Jest
  • Playwright
  • Cypress

Authentication strategies

  • JWT
  • OAuth
  • SSO
  • Basic auth
  • Session-based auth

Web security basics

  • HTTPS
  • CORS
  • Content Security Policy
  • OWASP security risks

Web components

  • HTML templates
  • Custom elements
  • Shadow DOM

Type checkers

  • TypeScript

Server-side rendering (SSR)

  • Next.js (React)
  • Nuxt.js (Vue)
  • Astro
  • SvelteKit

GraphQL

  • Apollo
  • Relay Modern

Progressive web apps

  • PRPL pattern
  • RAIL model
  • Service workers
  • Web sockets
  • Server-sent events
  • Storage (cookies, local storage, session storage)
  • Location, notifications, device orientation, payments, credentials
  • Performance metrics (Core Web Vitals)
  • Using Lighthouse
  • Using DevTools

Static site generators

  • Astro
  • 11ty (Eleventy)
  • VuePress

Mobile apps

  • React Native
  • Flutter
  • Ionic

Desktop apps

  • Electron
  • Tauri

Resources

See resources.md.

Project ideas

  • Build a responsive personal portfolio as an SPA in React with a contact form, dark mode, and a Lighthouse score above 95.
  • Create a real-time dashboard that consumes a public REST or GraphQL API, with client-side routing, loading/error states, and unit + e2e tests.
  • Ship a progressive web app (installable, offline-capable via a service worker) such as a note-taking or todo app backed by IndexedDB.

1 item under this folder.