HTML and 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.

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

Prefer an in-browser playground?

• 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-course and save files there using the .html or .htm extension.

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

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.

Developer tools (DevTools) are built into every browser.

They let you inspect elements, tweak CSS, and watch network requests.

You can experiment with CSS live before committing changes to your files.

Organize your files so they are easy to scale:

You can start with a single HTML file and one CSS file

Add more folders as your projects grow.

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.

If you see the heading and paragraph in the output, your environment is set up correctly and you can continue with the course.

• You can create, save, and open .html files.
• You can edit CSS in either inline styles or external .css files.
• You know how to inspect HTML and CSS using DevTools.