> ## Documentation Index
> Fetch the complete documentation index at: https://devtools.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Frontend Handbook

> Your comprehensive guide to modern frontend development – from HTML basics to advanced JavaScript frameworks.

<img className="block dark:hidden" src="https://mintcdn.com/devtools/Q3Ufk6BtB9VFbSvm/images/hero-light.png?fit=max&auto=format&n=Q3Ufk6BtB9VFbSvm&q=85&s=9984e67014070dc057137ffe0731acde" alt="Frontend Handbook Light" width="2064" height="1104" data-path="images/hero-light.png" />

<img className="hidden dark:block" src="https://mintcdn.com/devtools/Q3Ufk6BtB9VFbSvm/images/hero-dark.png?fit=max&auto=format&n=Q3Ufk6BtB9VFbSvm&q=85&s=437e78939cae54a81867b167997b9523" alt="Frontend Handbook Dark" width="2064" height="1104" data-path="images/hero-dark.png" />

## Your Complete Frontend Development Guide

Welcome to the **Frontend Handbook** – a comprehensive resource covering everything you need to know about modern frontend development. Whether you're just starting your journey or looking to level up your skills, this handbook provides structured learning paths through the core technologies that power the web.

<CardGroup cols={2}>
  <Card title="HTML Fundamentals" icon="file-code" href="/html/introduction">
    Master the structure and semantics of web content with HTML5.
  </Card>

  <Card title="CSS Styling" icon="palette" href="/css/introduction">
    Learn to create beautiful, responsive layouts with modern CSS techniques.
  </Card>

  <Card title="JavaScript Programming" icon="code" href="/javascript/introduction">
    Build interactive experiences with JavaScript from basics to advanced
    concepts.
  </Card>

  <Card title="Modern Tools & Frameworks" icon="toolbox" href="/tools/git">
    Discover essential developer tools and popular frontend frameworks.
  </Card>
</CardGroup>

## What You'll Learn

This handbook is organized to take you from fundamentals to advanced topics with practical examples and best practices.

<Steps>
  <Step title="HTML Structure & Semantics">
    Learn how to create well-structured, accessible, and SEO-friendly web pages
    using semantic HTML5 elements.
  </Step>

  <Step title="CSS Styling & Layouts">
    Master modern CSS techniques including Flexbox, Grid, animations, and
    responsive design principles.
  </Step>

  <Step title="JavaScript Programming">
    Develop your JavaScript skills from basic syntax to advanced concepts like
    asynchronous programming and ES6+ features.
  </Step>

  <Step title="Tools & Frameworks">
    Get hands-on with essential developer tools like Git, npm, and popular
    frameworks like React, Vue, and Angular.
  </Step>
</Steps>

## Core Technologies

<CardGroup cols={3}>
  <Card title="HTML" icon="html5" href="/html/introduction">
    The backbone of web content
  </Card>

  <Card title="CSS" icon="css3" href="/css/introduction">
    The styling language of the web
  </Card>

  <Card title="JavaScript" icon="js" href="/javascript/introduction">
    The programming language of the web
  </Card>

  <Card title="Git" icon="git" href="/tools/git">
    Version control for your code
  </Card>

  <Card title="React" icon="react" href="/frameworks/react">
    Component-based UI library
  </Card>

  <Card title="Performance" icon="gauge-high" href="/best-practices/performance">
    Building fast, efficient websites
  </Card>
</CardGroup>

## Make It Yours

You’re encouraged to fork this project, add your notes, projects, or even build your own personalized dev wiki.

***

Let me know if you also want help creating the linked pages like `/html/introduction`, `/css/syntax`, or `/git/overview` as `.mdx` starter files.