Setting Up Your Tools – Get Ready to Code!

Perfect! Let’s move on to Lesson 2 of your course:

📘 LESSON 2: Setting Up Your Tools – Get Ready to Code!

✅ Learning Goals:

Install the necessary tools to start frontend development
Understand what each tool does
Prepare your environment for hands-on coding

🧾 Lesson Content (Text for Website)

🔧 Let’s Set Up Your Developer Toolbox!

Before we start building websites, we need the right tools. Just like an artist needs brushes and colors, a web developer needs software to write and test code.

Don’t worry — most of them are free and easy to set up!

🛠️ Tools You’ll Need

Tool	Purpose	Download Link
VS Code	Code editor to write and manage code	Download
Google Chrome	Browser for testing & DevTools	Download
Git	Version control system	Download
Node.js	Run JavaScript outside the browser	Download

🧑‍💻 1. Installing VS Code

Visual Studio Code is the most popular code editor among developers.

✅ Features:

Syntax highlighting
Extensions
Terminal built-in
Git integration

📌 After installing, open VS Code and go to the Extensions panel (Ctrl + Shift + X), and install:

Live Server (for real-time preview)
Prettier (for formatting)
ESLint (for clean JavaScript code)

🌐 2. Google Chrome + DevTools

Use Chrome to preview and debug your websites.
Right-click → “Inspect” to open DevTools and see what’s going on behind the page.

🧬 3. Installing Git

Git helps you track changes and collaborate with others.

After installation, open Terminal (or Git Bash) and run:

git --version

You should see something like git version 2.41.0.

We’ll learn Git in detail later!

⚙️ 4. Installing Node.js (Optional, but Recommended)

Node.js allows you to:

Run JavaScript outside the browser
Use npm to install frontend tools (like Vite, Tailwind)

To check if Node.js installed correctly, run:

node -v
npm -v

🧪 Bonus Tip: Folder Structure for Practice

Create a main folder for your course:

Frontend-Course/
  ├── Module1/
  │     ├── lesson1.html
  │     └── lesson2.html

This helps keep things tidy!

📹 [Optional YouTube Embed Section]

👉 Embed your setup tutorial video here

📌 Quick Summary

Downloaded VS Code, Chrome, Git, and Node.js
Installed key extensions (Live Server, Prettier)
Verified everything works via command line

✅ Optional Code Example (Live Server Test)

<!-- Save this as lesson2.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Setup Complete</title>
</head>
<body>
  <h1>You're Ready to Start Coding! 🎉</h1>
</body>
</html>

Right-click → “Open with Live Server” in VS Code to view it live.