> ## 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.
# Quickstart Guide
> Get started with the Frontend Handbook and set up your development environment
## Setting Up Your Development Environment
Before diving into frontend development, you'll need to set up your environment with the right tools. This guide will help you get started quickly.
### Essential Tools for Frontend Development
A good code editor is essential for productive development. Here are some popular options:
* **Visual Studio Code** - Free, powerful, and widely used with excellent extension support
* **Sublime Text** - Fast and lightweight editor with great performance
* **WebStorm** - Full-featured IDE specifically for web development
We recommend starting with **Visual Studio Code** as it offers an excellent balance of features, performance, and community support.
[Download VS Code](https://code.visualstudio.com/)
You'll need modern browsers for testing and their built-in developer tools for debugging:
* **Chrome** - Widely used with powerful DevTools
* **Firefox** - Excellent rendering engine with strong privacy features
* **Edge** - Microsoft's Chromium-based browser
* **Safari** - Important for testing on macOS/iOS
Make sure to familiarize yourself with browser DevTools by pressing `F12` or `Ctrl+Shift+I` (Windows/Linux) or `Cmd+Option+I` (Mac) in your browser.
Git is essential for tracking changes and collaborating with others:
1. Install Git from [git-scm.com](https://git-scm.com/downloads)
2. Set up a GitHub account at [github.com](https://github.com/)
3. Configure Git with your credentials:
```bash theme={null}
git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"
```
Basic Git commands you'll use frequently:
```bash theme={null}
git clone # Clone a repository
git add . # Stage all changes
git commit -m "Message" # Commit changes
git push # Push to remote repository
git pull # Pull latest changes
```
Node.js and npm (Node Package Manager) are essential for modern frontend development:
1. Install Node.js from [nodejs.org](https://nodejs.org/) (npm comes included)
2. Verify installation with:
```bash theme={null}
node --version
npm --version
```
npm allows you to install and manage JavaScript packages. Some basic commands:
```bash theme={null}
npm init # Initialize a new project
npm install # Install a package
npm install -g # Install globally
npm start # Run the start script
```
### First Project Setup
```bash theme={null}
mkdir my-frontend-project
cd my-frontend-project
```
{' '}
`bash git init ` Create a `.gitignore` file to exclude unnecessary files:
`node_modules/ .DS_Store .env`
{' '}
Create these essential files and folders: `index.html css/styles.css
js/script.js images/`
Add this starter code to your `index.html`:
```html theme={null}
My Frontend Project
Hello, Frontend World!
```
Your changes will be hot-reloaded in the browser. Just refresh or navigate to the page you're editing to see updates instantly.
You can deploy your handbook using a static site hosting provider:
* **GitHub Pages** – via GitHub Actions
* **Vercel** – automatic deploy on push (recommended for Next.js)
* **Netlify** – drag and drop or connect your repo
Most setups just require pushing your code to GitHub.
Commit and push your changes:
```bash theme={null}
git add .
git commit -m "Update handbook content"
git push origin main
```
Your deployment provider will detect the change and redeploy your site.
## Deploy your handbook
## Update your handbook
You can add new content using MDX syntax and even integrate your own custom components to enrich the learning experience.
Create pages using Markdown extended with React components.
Use syntax-highlighted code blocks to explain concepts clearly.
Include diagrams, screenshots, or illustrations to support your text.
Build reusable components like notes, tips, or callouts across pages.