HTML and CSS Environment Setup
HTML & CSS: Environment Setup
You only need a browser and a text editor to start building with HTML and CSS.
This chapter helps you assemble a more productive, but optional toolkit.
Essential tools
- Modern browser: Chrome, Edge, Firefox, or Safari. Keep it updated for the latest developer features.
- Code editor: Start with Notepad/TextEdit or move to VS Code, Sublime Text, or any editor you enjoy.
- Try it Yourself editor: Use W3Schools' built-in editor to experiment quickly without leaving the page.
Prefer an in-browser playground?
Launch W3Schools Spaces to create projects without installing anything.
Set up a local workspace
Windows
- Open Notepad (press the Windows key and type "Notepad").
- From the File menu choose Save As, then set Save as type to All Files.
- Create a folder like
htmlcss-courseand save files there using the.htmlor.htmextension.
macOS
- Open TextEdit.
- In Preferences > Format, choose Plain Text.
- Under Open and Save, enable Display HTML files as HTML code.
- Create a workspace folder and save with UTF-8 encoding.
Install a code editor (optional but recommended)
If you want syntax highlighting (colorful code), multi-file search, and source control integration (keeping track of changes), install an editor like VS Code:
- Download from code.visualstudio.com.
- Install the HTML CSS Support and Live Server extensions for an enhanced experience.
- Open your course folder in the editor and create new files directly from there.
Other great choices include Atom, Sublime Text, and WebStorm.
Pick the editor that fits your workflow.
Know your browser developer tools
Developer tools (DevTools) are built into every browser.
They let you inspect elements, tweak CSS, and watch network requests.
Learn these shortcuts:
- Open DevTools: Usually F12 (or Ctrl + Shift + I (Windows/Linux) or Cmd + Option + I (macOS) )
- Inspect Element: Right-click any element and choose Inspect.
- Responsive Design Mode: Toggle device simulation to test different screen sizes.
Tip: Keep DevTools open while you edit.
You can experiment with CSS live before committing changes to your files.
Create a project folder structure
Organize your files so they are easy to scale:
htmlcss-course/
index.html
css/
styles.css
images/
You can start with a single HTML file and one CSS file
Add more folders as your projects grow.
Setup check demo
This demo renders a minimal HTML page so you can confirm your editor and browser are working.
Syntax highlights: document structure (<!DOCTYPE html>, <head>, <body>) and a simple heading + paragraph.
Example
<!DOCTYPE html>
<html>
<head>
<title>Setup Check</title>
</head>
<body>
<h1>Ready to build!</h1>
<p>If you can see this in your browser, your environment works.</p>
</body>
</html>
If you see the heading and paragraph in the output, your environment is set up correctly and you can continue with the course.
Checklist
- You can create, save, and open
.htmlfiles. - You can edit CSS in either inline styles or external
.cssfiles. - You can preview pages locally and in the Try it Yourself editor.
- You know how to inspect HTML and CSS using DevTools.
