Environment Setup
30 mins BeginnerJust a browser and an editor. Start right now. Everything runs in the browser.
Overview
Environment setup is preparing to start programming. It sounds difficult, but on this site, you can practice in the browser alone. For local development, having a 'browser' and a 'text editor' gets you started immediately.
The great thing about web development is that you can start with tools already on your computer. Exercises are completed in the browser, so no installation is needed. Let's start casually.
- The role and usage of a browser
- How to create an HTML file with a text editor (for local dev)
- How to use the exercise screen (Code → Run → Preview)
- How to install VS Code (Optional)
Detailed Explanation
What is a browser?
A browser is software for viewing web pages. Examples include Chrome, Edge, Firefox, Safari. You are using one right now. It interprets HTML and displays it in a readable format.
- Windows: Edge (pre-installed)
- Mac: Safari (pre-installed)
- Any OS: Chrome (free download)
- Basic functions are the same across browsers
- Developers usually use Chrome (DevTools is handy)
- Confusing a browser with Google Search
- Using Internet Explorer → old and deprecated
Exercise Flow
Write code in the top editor, click 'Run', and see the result in the preview below. No setup required. It's all in the browser. Start with the 'Experience' problem to get the feel of pressing Run.
- 1. Read the explanation
- 2. Write code (or fill in the blanks)
- 3. Click the Run button
- 4. Check the preview
- It's okay to copy-paste the solution first to experience it 'working'
- If there's an error, click the line number to jump to it
- Starting with hard problems right away → go in order: Experience → h1 → p
What is an HTML file? (For Local Dev)
An HTML file is the blueprint of a web page. A file ending in .html becomes a web page in a browser. You can create it in Notepad. You don't need to create files for the exercises here.
- index.html: Common name for a top page
- about.html: Company info page, etc.
- Use half-width alphanumeric characters for filenames
- It won't open in a browser unless the extension is .html
- index.html.txt → double extension
- Using spaces in filenames → use hyphens
Practical Steps
- 1 Open the exercise page 1 min
Open the 'Exercises' page.
- Click 'Learning' → 'Exercises' from the top menu
- Or go to /en/learn/ directly
- Pick a problem to solve
- 2 Solve the 'Experience' problem 2 mins
In the first 'Experience: Let's Run It' problem, press Run and check the preview.
- Select the 'Environment' category
- Click 'Experience: Let's Run It'
- Click 'Run' without changing the code
- Success if 'Hello World' appears in the preview
<h1>Hello World</h1> - 3 Write your first HTML 5 mins
In the 'First HTML' problem, write code using an h1 tag to display 'Hello World'.
- Type <h1>Hello World</h1> in the editor
- Use half-width < and >
- h1 should be lowercase
- Run and check the preview
<h1>Hello World</h1>
Career & real-world context
Environment setup prevents blocked development—standard in onboarding (VS Code, Git, Node).
Industry examples
- Startups: VS Code + Live Server prototypes
- Agencies: shared editor configs
- OSS: GitHub Codespaces in browser
Recommended study plan
AM: Hello World exercise → PM: optional VS Code → next day HTML basics.
Prerequisites
Complete IT/Web basics or know equivalent vocabulary.
Common interview topics
- Local dev vs in-browser practice?
- Why use an IDE?
Completion checklist
- Passed Hello World exercise
- Understand editor + preview flow
- Ready for HTML basics
Frequently Asked Questions
- I changed my code but the browser didn't update. Why?
- Browser caching is probably trolling you. Open DevTools (F12), click and hold the refresh button, and smash 'Empty Cache and Hard Reload'. Or just spam Ctrl+Shift+R (Cmd+Shift+R on Mac).
- Can't I just use local files (file://) instead of a Web Server (http://)?
- You can for basic stuff, but the second you try to use Fetch API or ES Modules (import/export), the browser will scream 'SECURITY RISK!' and block you. Using the 'Live Server' extension in VS Code is the easiest workaround—it spins up a fake server for you.
- I saved as .html but it just shows up as plain text in the browser...
- Classic Windows trap. Your OS is hiding file extensions, so you probably actually named it 'index.html.txt' without knowing. Go to Explorer view settings and check 'File name extensions' to reveal the truth.
- Any God-tier VS Code extensions I should install on day 1?
- Definitely 'Live Server' (auto-reloads your browser the second you hit save) and 'Auto Rename Tag' (because manually changing the closing tag every time you change an opening tag is a form of torture).
- Mac vs Windows?
- Same HTML/CSS/JS; only paths and terminal differ.
- Why not Notepad?
- Highlighting and extensions cut typos—industry uses proper editors.
① Read the explanation. Next: ② Do exercises.
Environment ready! You experienced writing code and seeing results instantly.
Next, we'll dive deeper into HTML basics. Headings, paragraphs, lists, links — we'll cover tags that structure text one by one.