Chapter 3: Environment Setup
Environment Setup
This is like setting up your study table, chair, good light, chai cup, and notebook before starting serious padhai. If this setup is good → learning becomes fun and fast. If messy → frustration everywhere.
Why do we need a “development environment”?
- Write code comfortably (good editor with colors, auto-complete, suggestions)
- See changes instantly (live preview / auto-refresh)
- Avoid silly typing mistakes
- Feel like a real developer from day 1
You don’t need to install heavy software like Visual Studio, XAMPP, Node.js yet — just for pure HTML + CSS we keep it super simple.
Step-by-Step Setup (Do this right now – takes 10–15 minutes)
1. Choose & Install a Code Editor (2026 Recommendation)
The best free editor for HTML/CSS beginners in 2026 is still Visual Studio Code (VS Code) by Microsoft.
Why VS Code wins (even in 2026):
- Completely free forever
- Super fast & lightweight
- Best auto-complete (IntelliSense) for HTML + CSS
- Thousands of free extensions (we’ll add 3–4 magic ones)
- Looks modern & beautiful
- Used by almost every frontend developer (even big companies)
Alternatives if you really hate it:
- Notepad++ (very light, good for very old laptops)
- Brackets (old but has live preview built-in)
- Online only → CodePen / PlayCode.io (no install needed, but less powerful for big projects)
But seriously — go with VS Code.
Download & Install:
- Open browser → go to: https://code.visualstudio.com
- Click big blue Download button (it auto-detects Windows/Mac/Linux)
- Run the installer → Next → Next → Install (takes 1–2 min)
- Open VS Code after install
First look: You see welcome screen — close it or keep it.
2. Create Your First Project Folder (Very Important!)
Don’t just save files randomly on Desktop.
- On your laptop → create a new folder anywhere easy (example: C:\Users\YourName\Documents\Web Learning or Desktop\HTML-CSS-2026)
- Name it something like my-first-website or webliance-learning
- Open VS Code
- Click File → Open Folder… → select that folder you just made
- Now VS Code knows this is your project — good habit!
Inside this folder → right-click → New File → name it index.html
3. Install the 4 Most Important Extensions (Do this now!)
In VS Code:
- Click the square Extensions icon on left sidebar (or press Ctrl + Shift + X)
- Search & install these one by one (just click Install):
| Extension Name | Why You Need It (2026) | Author (approx) | After Install Benefit |
|---|---|---|---|
| Live Server | Auto-opens browser + refreshes page on every save | Ritwick Dey | Magic live preview — must-have for HTML/CSS |
| Prettier – Code formatter | Auto-formats your code nicely (indentation, spaces) | Prettier | Code always looks clean — no arguments with future self |
| Auto Rename Tag | When you change <div> → </div> changes too | Jun Han | Saves tons of time & prevents broken HTML |
| HTML CSS Support | Better CSS suggestions inside HTML (class names etc.) | ecmel | IntelliSense for CSS classes & IDs |
Optional but nice (install later if you want):
- Tailwind CSS IntelliSense (if you plan to learn Tailwind soon)
- JavaScript (ES6) code snippets (when JS starts)
After installing → sometimes VS Code asks to Reload — click it.
4. Test Your Setup with a Tiny Example
Inside your project folder → open (or create) index.html
Paste this:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Webliance First Live Test</title> <style> body { font-family: Arial, sans-serif; background: linear-gradient(135deg, #667eea, #764ba2); color: white; min-height: 100vh; display: flex; justify-content: center; align-items: center; margin: 0; } h1 { font-size: 4rem; text-shadow: 3px 3px 10px rgba(0,0,0,0.4); } </style> </head> <body> <h1>Hello Hyderabad! Setup Done 🔥</h1> </body> </html> |
Now the magic:
- Right-click anywhere in the code → Open with Live Server
- Browser opens automatically → http://127.0.0.1:5500/index.html
- Change the <h1> text to anything → press Ctrl + S (save)
- Browser auto-refreshes → you see change instantly!
This is live development — the way real developers work.
5. Super Useful VS Code Shortcuts (Learn These Today)
| Action | Windows Shortcut | Mac Shortcut | What it does |
|---|---|---|---|
| Save file | Ctrl + S | Cmd + S | Saves & triggers Live Server refresh |
| Open Extensions | Ctrl + Shift + X | Cmd + Shift + X | Install new extensions |
| Open Terminal inside VS Code | Ctrl + (backtick) |
Cmd + | Useful later |
| Format document (Prettier) | Shift + Alt + F | Shift + Option + F | Beautify code |
| Multi-cursor (very powerful) | Ctrl + Alt + Up/Down | Cmd + Alt + Up/Down | Edit multiple lines at once |
| Emmet (fast HTML writing) | Type ! + Tab | ! + Tab | Creates full HTML boilerplate instantly |
Try this now: In a new file → type ! → press Tab → full HTML structure appears magically (Emmet is built-in!).
6. Folder Structure Recommendation (Start Good Habits)
In your project folder:
|
0 1 2 3 4 5 6 7 8 9 10 11 |
my-first-website/ ├── index.html ← homepage ├── style.css ← all your styles (later we'll link it) ├── images/ ← folder for photos │ └── profile.jpg └── projects/ ← later sub-pages |
Never put everything on Desktop — keep projects organized.
Summary Table – Your 2026 HTML/CSS Environment Checklist
| Done? | Task | Why Important |
|---|---|---|
| ✓ | Installed VS Code | Best free editor |
| ✓ | Created project folder & opened in VS Code | Organizes your work |
| ✓ | Installed Live Server + Prettier + Auto Rename Tag + HTML CSS Support | Makes coding 5× faster & fun |
| ✓ | Tested with Live Server | Instant feedback = fastest learning |
| Learned ! + Tab Emmet trick | Writes HTML super fast |
You are now properly set up — better than 80% of beginners who just use Notepad and refresh browser manually.
Next time you want:
- “now teach me how to use Flexbox in this setup”
- “add dark mode toggle”
- “make responsive mobile view”
- “deploy this to free hosting”
Just say — we’ll build on this setup.
How does it feel now? Live Server working? Any error? Chai break lo — then keep coding! ☕💻
You’re officially a setup pro now. 🚀
