Quickstart Guide - Frontend Handbook

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

Code Editor

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

Web Browsers & DevTools

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.

Version Control with Git

Git is essential for tracking changes and collaborating with others:

Install Git from git-scm.com
Set up a GitHub account at github.com
Configure Git with your credentials:

git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

Basic Git commands you’ll use frequently:

git clone <repository-url>   # 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.js and npm (Node Package Manager) are essential for modern frontend development:

Install Node.js from nodejs.org (npm comes included)
Verify installation with:

node --version
npm --version

npm allows you to install and manage JavaScript packages. Some basic commands:

npm init                     # Initialize a new project
npm install <package-name>   # Install a package
npm install -g <package>     # Install globally
npm start                    # Run the start script

First Project Setup

Create a new project folder

mkdir my-frontend-project
cd my-frontend-project

Initialize Git repository

bash git init Create a .gitignore file to exclude unnecessary files: node_modules/ .DS_Store .env

Set up basic project structure

Create these essential files and folders: index.html css/styles.css js/script.js images/

Create a basic HTML template

Add this starter code to your index.html:

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Frontend Project</title>
    <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>
    <h1>Hello, Frontend World!</h1>

    <script src="js/script.js"></script>
  </body>
  </html>

Preview your changes

Your changes will be hot-reloaded in the browser. Just refresh or navigate to the page you’re editing to see updates instantly.

Deploy using GitHub Pages / Vercel / Netlify

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.

Push your changes to GitHub

Commit and push your changes:

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.

Write with MDX

Create pages using Markdown extended with React components.

Add Code Snippets

Use syntax-highlighted code blocks to explain concepts clearly.

Insert Images

Include diagrams, screenshots, or illustrations to support your text.

Use Custom Components

Build reusable components like notes, tips, or callouts across pages.

​Setting Up Your Development Environment

​Essential Tools for Frontend Development

​First Project Setup

​Deploy your handbook

​Update your handbook