Урок 0 · Подготовка
Настраиваем VS Code и Figma — стартовый набор
Перед первым уроком: ставим редактор кода с нужными плагинами и регистрируемся в Figma, чтобы открывать макет кинотеатра. На всё уйдёт 15–20 минут.
Видео 1 — Настройка VS Code
vimeo.com/418346075
Что устанавливаем в VS Code
Открой VS Code → вкладка Extensions (иконка с кубиками в левом меню) и поставь по очереди:
- Emmet — уже встроен в VS Code, ничего ставить не нужно. Это автодополнение HTML и CSS: пишешь
!+ Tab — получаешь готовый шаблон страницы. - Live Server — обновляет страницу в браузере автоматически, когда ты сохраняешь файл. Незаменимая штука для вёрстки.
- All Autocomplete — подсказывает названия классов, которые ты уже использовал в проекте.
- Prettier — форматирует код, чтобы он выглядел опрятно. Включи «Format on Save» в настройках.
Видео 2 — Редактор макетов Figma
vimeo.com/554273797
Регистрируемся в Figma
В Figma лежит макет кинотеатра, с которого мы будем верстать. Зарегистрируйся на figma.com — бесплатного тарифа хватит с головой.
Обязательно установи плагин Inspect Styles — без него снимать стили с макета будет неудобно. Плагин показывает CSS-свойства любого элемента в один клик.