🛠️ Установка инструментов

VS Code, Live Server, браузер и DevToolsHTML & CSS

Кратко: самый лёгкий старт из всех курсов: ни интерпретатора, ни пакетов. Нужны только редактор и браузер — страницы открываются прямо с диска.

Что понадобится

Инструмент	Зачем	Обязателен
VS Code	редактор с подсветкой и автодополнением тегов	да
Браузер	результат вёрстки видно только в нём	да
DevTools	встроен в браузер, отдельно ставить не нужно	да
Live Server	страница перезагружается сама при сохранении	желателен

Ничего компилировать не надо. HTML и CSS — это текстовые файлы, браузер открывает их напрямую двойным щелчком.

Редактор

Курс написан под Visual Studio Code — команды и названия расширений ниже даны для него.

Система	Команда
Windows	`winget install Microsoft.VisualStudioCode`
macOS	`brew install --cask visual-studio-code`
Linux	пакет `.deb` / `.rpm` с code.visualstudio.com

Расширения ставятся кнопкой в Marketplace или командой в терминале:

code --install-extension ritwickdey.LiveServer
code --install-extension esbenp.prettier-vscode

Идентификатор	Что даёт
`ritwickdey.LiveServer`	локальный сервер с автообновлением страницы
`esbenp.prettier-vscode`	форматирование разметки по сохранению

Live Server

Расширение VS Code — не отдельная программа. После установки в правом нижнем углу редактора появляется кнопка Go Live; она поднимает локальный сервер и открывает текущую страницу в браузере. При каждом сохранении файла страница перезагружается сама.

У Microsoft есть похожее расширение Live Preview — оно показывает страницу прямо во вкладке редактора. Любое из двух подходит; уроки упоминают оба.

Для первых уроков сервер не обязателен: index.html можно открыть двойным щелчком из проводника.

Браузер и DevTools

Подойдёт любой современный браузер. Инструменты разработчика открываются клавишей F12 и нужны в каждом уроке:

Вкладка	Зачем в курсе
Elements	видеть итоговое дерево документа и править стили вживую
Styles	смотреть, какое правило победило в каскаде и почему
Device toolbar	проверять адаптивность на узких экранах

Правки в DevTools не сохраняются в файл — это черновик. Найдя нужное значение, перенесите его в CSS руками.

Первая страница

Создайте папку курса, откройте её в VS Code через File → Open Folder и добавьте два файла.

index.html

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Первая страница</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Работает</h1>
</body>
</html>

style.css

h1 { color: teal; }

Откройте index.html двойным щелчком или кнопкой Go Live. Бирюзовый заголовок означает, что связка файлов работает.

Проверка, что всё встало

Команды, после которых можно начинать первый урок:

Команда	Ожидаемый результат
`code -v`	три строки: версия, хеш, архитектура
`code --list-extensions`	в списке есть `ritwickdey.LiveServer`
Открыть `index.html`	в браузере виден заголовок
`F12` → Elements	видно дерево тегов вашей страницы

Частые проблемы

Стили не применяются

Проверьте по порядку: путь в href, имя файла, расширение .css и регистр букв. На Windows регистр не важен, на сервере — важен, поэтому привыкайте сразу.

Файл называется index.html.txt

Проводник Windows скрывает расширения, и «Блокнот» дописывает своё. Включите показ расширений в проводнике или создавайте файлы прямо в VS Code.

Кнопки Go Live нет

Расширение Live Server не установлено или окно открыто как одиночный файл. Откройте именно папку проекта.

Изменения не видны в браузере

Страница закэширована. Жёсткая перезагрузка — Ctrl+F5.