​
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
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
  2. Set up a GitHub account at github.com
  3. 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 Package Manager) are essential for modern frontend development:
  1. Install Node.js from nodejs.org (npm comes included)
  2. 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

1

Create a new project folder

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

Initialize Git repository

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

Set up basic project structure

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

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>
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:
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.