Frontend

🇬🇧

🇻🇳

🏠 Go back to home⬅️ Go back to previous page

👇 Start from here!

Internet
  • How does the internet work?
  • What is HTTP?
  • Browsers and how they work?
  • DNS and how it works?
  • What is Domain Name?
  • What is hosting?
HTML
  • HTML basics
  • Writing Semantic HTML
  • Forms and Validations
  • Conventions and Best practices
  • Accessibility
  • SEO Basics
CSS
  • Learn the basics
  • Making layouts
  • Responsive design and Media queries
JavaScript
  • Syntax and Basic constructs
  • Learn DOM manipulation
  • Learn Fetch API / Ajax (XHR)
  • ES6+ and modular JavaScript
  • Understand JavaScript concepts
Version Control Systems
  • Basic usage of Git
Repo hosting services
  • GitHub
  • GitLab
  • BitBucket
Web Security Knowledge
  • HTTPS
  • Content Security Policy
  • CORS
  • OWASP Security Risks
Package Managers
  • npm
  • yarn
  • pnpm
CSS Architecture
  • BEM
CSS Preprocessors
  • Sass
  • PostCSS
Build Tools
  • Prettier (Formatter)
  • ESLint (Linter)
  • npm scripts (tasks runner)
  • Vite (Module bundler)
  • esbuild (Module bundler)
  • Webpack (Module bundler)
  • Rollup (Module bundler)
  • Parcel (Module bundler)
Pick a Framework
  • React
  • Angular
  • Vue.js
  • Svelte
  • SolidJS
Modern CSS
  • Styled components
  • CSS Modules
  • Styled JSX
  • Emotion
CSS frameworks
  • Tailwind CSS
  • Material UI
  • Bootstrap
  • Mantine
  • Chakra UI
  • Daisy UI
  • Radix UI
  • Bulma
Testing your apps
  • Jest
  • react-testing-library
  • Cypress
  • Playwright
Authentication Strategies
    Web Components
    • HTML Templates
    • Custom Elements
    • Shadow DOM
    Type Checkers
    • TypeScript
    Progressive Web Apps
    • Web Storage API
    • Web Sockets
    • Server Sent Events
    • Service Workers
    • Location API
    • Notifications API
    • Device Orientation API
    • Payments
    • Credentials API
    Performance metrics
    • PRPL Pattern
    • RAIL Model
    • Lighthouse
    • Browser DevTools
    Server-side rendering
    • Next.js (for React)
    • Remix (for React)
    • Universal (for Angular)
    • Nuxt.js (for Vue.js)
    • Svelte Kit (for Svelte)
    Static Site Generators
    • Eleventy
    • Astro
    • Next.js
    • Gatsby
    • Vuepress
    • Jekyll
    • Hugo
    • Nuxt.js
    • Remix
    GraphQL
    • Apollo
    • Relay Modern
    Mobile applications
    • React Native
    • Flutter
    • Ionic
    • NativeScript
    Desktop applications
    • Electron
    • Tauri
    • Flutter
    Bonus Content
    • UI / UX Knowledge
    • Design Systems
    • Visual Programming
    • Qwik and Partytown
    • Houdini
    • IDLs
    • WebAssembly
    Keep Learning!
      🔥 Inspired by Roadmap.sh

      0xstim pfpContact me here!

      Support Defi.vn by following the social pages

      Github icon
      Twitter icon
      Telegram icon
      Youtube icon
      Youtube icon

      ✏️ Edit this site on Github

      ℹ️ Disclaimer

      ✊ Contributors