Шаг 0 · Старт · 10 минут
Три слоя
Любой интерфейс, который ты когда-либо рисовала, в браузере состоит из трёх слоёв.
- HTMLСтруктура — что здесь есть и в каком порядке.
- CSSОформление — как это выглядит и где стоит.
- JSПоведение — что происходит, когда пользователь что-то делает.
Рядом — карточка профиля из трёх файлов. Нажми «Подписаться». Потом выключи CSS, затем JS, и посмотри, что от неё останется.
0.2
Ты это уже знаешь по Figma
В Figma три слоя разведены по панелям. Ты переключаешься между ними каждый день.
- HTMLПанель Layers — что есть и что во что вложено.
- CSSВкладка Design — цвет, скругление, отступы, тень.
- JSВкладка Prototype — что происходит по клику.
Панель слоёв — это структура. Панель Design — оформление. Вкладка Prototype — поведение.
Figma разделяет их по панелям, веб — по языкам.
0.3
Откуда они берутся
На первом занятии ты видела во вкладке Network, как браузер просит у сервера файлы. Среди них всегда есть эти три: сервер отдаёт HTML, CSS и JavaScript, а браузер собирает из них страницу.
0.4
Как устроен этот сайт
- Шесть шагов, около двух часов. Можно в несколько подходов: пройденные шаги отмечаются галочкой в шапке и запоминаются в этом браузере.
- В шагах есть демо: код слева, результат справа. Где код можно менять, задание говорит, какое слово или число поменять. Сломать ничего нельзя, у каждого демо есть кнопка «Сбросить».
- Удобнее проходить на ноутбуке.
- В конце каждого шага — «Проверь себя», без оценок. Оценка будет только в шаге 5, и она ни на что не влияет.
- Слова, подчёркнутые пунктиром, открывают словарь. Например, . Весь словарь — по кнопке «Словарь» в шапке.
- 1HTML. Что здесь есть15 мин
- 2CSS. Как выглядит25 мин
- 3JavaScript. Что происходит25 мин
- 4Всё вместе20 мин
- 5Проверка15 мин
- 6Что дальше5 мин
0.5
Чего здесь нет и почему
Здесь нет синтаксиса, списков тегов и свойств, React и бэкенда. Тебе не нужно помнить, как пишется код.
Это помнит Claude. Тебе нужно понимать, какую задачу код решает и в каком слое искать, если что-то не так.