Предисловие
Для вашего удобства текстовый курс перенесен на отдельную платформу. Ссылка для поступления: тык
Мы настоятельно рекомендуем пользоваться именно этой платформой по ходу курса. Ссылка на текущее занятие: тык
⚠️Прежде чем переходить к заданиям - обязательно зарегистрируйтесь на курс. Иначе вас закинет на общий поток и вы не сможете взаимодействовать с сверстниками во втором модуле курса. Это не смертельно и вполне решаемо, но тем не менее.
Введение: как устроен веб и что такое фронтенд
Что происходит, когда вы открываете сайт
Сайт — это набор файлов, которые хранятся на компьютере где-то в интернете. Когда вы открываете сайт, браузер скачивает эти файлы и показывает их на экране.
Разберём, что происходит после того, как вы ввели адрес https://doka.guide/ и нажали Enter.
Браузер разбирает адрес и находит в нём имя сервера:
doka.guide.Компьютеры в интернете находят друг друга не по именам, а по числовым IP-адресам вида
185.199.108.153. Чтобы узнать IP-адрес по имени, браузер обращается к системе DNS.Браузер подключается к серверу по полученному IP-адресу и отправляет ему HTTP-запрос. В запросе написано, какой документ нужен: в нашем случае главная страница
/.Сервер отправляет HTTP-ответ. В ответе лежит HTML-документ страницы.
Браузер читает HTML, скачивает стили, скрипты и картинки, на которые ссылается документ, и рисует страницу.
Эти шаги повторяются каждый раз, когда вы переходите по ссылке или обновляете страницу. Главное в этой схеме — пара «запрос и ответ»: браузер всегда начинает общение первым, а сервер отвечает на его запросы.
Подробно про HTTP-запросы мы поговорим на шестом занятии, когда начнём получать данные с сервера из JavaScript.
Почитать ещё
Клиент и сервер
В общении по сети участвуют две стороны.
Клиент — программа, которая отправляет запросы. Чаще всего клиентом выступает браузер, но это может быть и мобильное приложение, и программа без интерфейса, которая скачивает данные по расписанию.
Сервер — программа, которая принимает запросы и отвечает на них. Сервером также называют компьютер, на котором такая программа работает. Сервер хранит файлы сайта и данные пользователей, проверяет права доступа и решает, что отправить в ответ.
Один сайт может получать данные сразу с нескольких серверов. Например, страница загружается с сервера магазина, шрифты — с сервера Google Fonts, а картинки товаров — с отдельного сервера для файлов. Браузер обращается к каждому серверу по его адресу и собирает страницу из всех ответов.
Во время разработки ваш компьютер выполняет обе роли. Программа Live Server, которую мы установим в этом занятии, работает как сервер, а браузер на том же компьютере — как клиент. Такой сервер доступен по адресу 127.0.0.1 или по имени localhost: оба означают «этот же компьютер».
Почитать ещё
MDN: Обзор HTTP
Из чего состоит адрес
Адрес страницы называется URL. Он состоит из нескольких частей, и у каждой своя задача. Разберём адрес https://shop.example.com/catalog?sort=price#reviews.
Часть | Название | Что означает |
|---|---|---|
| Протокол | Правила, по которым браузер и сервер обмениваются данными. |
| Домен | Имя сервера. По нему браузер узнаёт IP-адрес через DNS. |
| Путь | Какой документ нужен на этом сервере. |
| Параметры запроса | Дополнительные данные для сервера, записанные парами |
| Якорь | Место на странице, к которому браузер прокрутит после загрузки. На сервер якорь не отправляется. |
Обязательны только протокол и домен. Если путь не указан, сервер отдаёт главную страницу. Если браузер открывает локальный сервер, после имени появляется номер порта: http://127.0.0.1:5500/index.html. Порт нужен, чтобы на одном компьютере одновременно могли работать несколько серверов.
Почитать ещё
MDN: Что такое URL
Что приходит в ответ
На запрос страницы сервер первым делом отправляет HTML-документ. Это текстовый файл с разметкой: в нём описано, какие на странице заголовки, абзацы, картинки и ссылки.
В HTML-документе есть ссылки на другие файлы:
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<img src="images/laptop.jpg" alt="Ноутбук" />
Встретив такую ссылку, браузер отправляет на сервер ещё один запрос и скачивает файл. Поэтому открытие одной страницы — это не один запрос, а десятки: HTML-документ, файлы стилей, скрипты, картинки, шрифты.
Все запросы страницы можно посмотреть во вкладке Network в инструментах разработчика браузера. Вкладка показывает адрес каждого запроса, его статус, размер ответа и время загрузки. Если на странице не появилась картинка или не применились стили, первым делом стоит проверить, какой ответ пришёл на запрос этого файла.
Если страница не открывается, проблема может возникнуть на любом шаге: нет подключения к интернету, DNS не нашёл домен, сервер не отвечает или отвечает ошибкой. По тому, на каком шаге всё остановилось, разработчик понимает, где искать причину.
Почитать ещё
Фронтенд и бэкенд
Код сайта делят на две части по месту, где он выполняется.
Фронтенд — часть, которая работает в браузере пользователя. Сюда входят разметка страницы, её внешний вид, кнопки, формы, анимации и запросы к серверу за данными.
Бэкенд — часть, которая работает на сервере. Бэкенд хранит данные в базе, проверяет, кто вошёл в систему и что ему разрешено, выполняет расчёты и отправляет клиенту готовые данные.
Возьмём интернет-магазин. Фронтенд показывает каталог, фильтрует товары по цене, открывает карточку товара и отправляет заказ, когда пользователь нажал «Оформить». Бэкенд хранит список товаров и остатки на складе, проверяет, что товар ещё есть в наличии, сохраняет заказ и списывает деньги.
Фронтенд и бэкенд общаются через API — набор адресов, на которые фронтенд отправляет запросы, и описание того, какие данные придут в ответ. Фронтенд-разработчик постоянно работает с API: читает его документацию, отправляет запросы и показывает полученные данные пользователю. Во втором модуле курса вы будете работать с настоящим API, который развёрнут специально для курса.
Почитать ещё
HTML, CSS и JavaScript
Браузер понимает три языка, и у каждого своя роль.
Язык | За что отвечает | Пример |
|---|---|---|
HTML | Структура и содержимое | На странице есть заголовок, абзац и кнопка |
CSS | Внешний вид | Заголовок синего цвета, кнопка со скруглёнными углами |
JavaScript | Поведение | По нажатию на кнопку меняется текст на странице |
В этом примере все три языка работают вместе в одном файле. Разметка описывает заголовок, абзац и кнопку, стили в теге <style> задают их внешний вид, а скрипт в теге <script> меняет текст абзаца после нажатия на кнопку.
<h1>Laptop 14</h1>
<p id="status">Товар в наличии</p>
<button id="buy">Купить</button>
<style>
h1 {
color: #4f46e5;
}
button {
padding: 8px 16px;
border: 0;
border-radius: 8px;
background: #4f46e5;
color: white;
}
</style>
<script>
const button = document.querySelector('#buy');
const message = document.querySelector('#status');
button.addEventListener('click', () => {
message.textContent = 'Товар добавлен в корзину';
});
</script>
Нажмите «Показать результат» под примером, а затем нажмите кнопку «Купить» на получившейся странице. Такая кнопка предпросмотра будет у многих примеров в курсе.
Без CSS страница продолжит работать, но все элементы будут выглядеть как простой текст. Без JavaScript страница будет оформлена, но кнопка перестанет реагировать на нажатия. Без HTML страницы не будет вовсе, поэтому HTML — единственный обязательный из трёх языков.
В настоящих проектах стили и скрипты хранят в отдельных файлах style.css и script.js. HTML изучим на втором занятии, CSS — на третьем, JavaScript — с четвёртого.
Почитать ещё
Как браузер строит страницу
Браузер не показывает HTML-файл как текст. Он обрабатывает его в несколько этапов.
Браузер читает HTML и строит из него дерево элементов. У каждого элемента в дереве есть родитель и могут быть дочерние элементы. Такое дерево называется DOM (Document Object Model).
Браузер читает CSS и определяет, какие стили относятся к каждому элементу дерева.
Браузер вычисляет, где на экране расположен каждый элемент и какого он размера.
Браузер рисует элементы на экране.
Когда JavaScript меняет страницу, он меняет не HTML-файл, а элементы в DOM. Браузер замечает изменения и заново выполняет нужные этапы: пересчитывает размеры и перерисовывает затронутую часть страницы. Так работала кнопка «Купить» из прошлого раздела: скрипт поменял текст элемента в DOM, и браузер показал новый текст.
Про DOM мы подробно поговорим на втором занятии, а на пятом начнём менять его из JavaScript.
Почитать ещё
Дока: Как браузер создаёт страницу, DOM
Чем занимается фронтенд-разработчик
Работа фронтенд-разработчика обычно состоит из таких задач:
сверстать страницу по макету дизайнера, то есть написать HTML и CSS так, чтобы страница выглядела как в макете;
написать на JavaScript логику интерфейса: фильтры, формы, переходы между страницами;
договориться с бэкенд-разработчиком о формате данных и подключить API;
проверить, что интерфейс работает в разных браузерах и на экранах разного размера;
опубликовать готовое приложение в интернете.
В современных проектах поверх HTML, CSS и JavaScript используют дополнительные инструменты.
TypeScript добавляет в JavaScript типы. Редактор кода и сборка проверяют типы и находят часть ошибок ещё до запуска программы.
React — библиотека, с которой интерфейс собирают из компонентов: независимых частей со своей разметкой и логикой.
Vite собирает файлы проекта в готовый сайт и запускает сервер для разработки.
Все эти инструменты в итоге превращаются в HTML, CSS и JavaScript, которые выполняет браузер. Поэтому курс начинается с основ, а к инструментам мы перейдём в конце первого модуля.
Почитать ещё
Дока: React и альтернативы
Как устроен курс
Курс состоит из двух модулей по восемь занятий.
Первый модуль посвящён основам. На втором занятии вы сверстаете страницу каталога товаров на HTML, на третьем оформите её с помощью CSS. С четвёртого по седьмое занятие вы изучите JavaScript: научитесь выводить товары из массива, обрабатывать действия пользователя и загружать данные с сервера. На восьмом занятии вы познакомитесь с TypeScript и создадите первый проект на Vite.
Второй модуль посвящён React. Вы напишете приложение ITAM Board: доску событий, идей и вопросов для вашего потока. Приложение будет работать с настоящим API, который развёрнут для курса. Вы освоите компоненты, состояние, роутинг, формы с валидацией и сторы, а на последнем занятии поговорим про Git, Figma, командную работу и публикацию приложения.
Каждое занятие состоит из трёх частей:
теория, которую вы сейчас читаете;
квиз «Проверь себя» по материалу теории;
практическое задание, которое вы выполняете и отправляете на проверку.
Почитать ещё
Дока: главная страница — справочник, на который ссылаются разделы курса
VS Code
Код можно писать в любом текстовом редакторе, но удобнее делать это в редакторе, созданном для программистов. В курсе мы используем VS Code. Это бесплатный редактор, в котором работает большинство фронтенд-разработчиков.
Установите VS Code с официального сайта. При установке на Windows отметьте пункты «Add to PATH» и «Open with Code»: они позволят открывать папки в редакторе из контекстного меню и из терминала.
После установки настройте две вещи.
Автосохранение. Включите пункт меню File → Auto Save. Редактор будет сохранять файл сам, и вам не придётся нажимать
Ctrl+Sпосле каждого изменения.Расширение Live Server. Откройте панель расширений сочетанием
Ctrl+Shift+X(на Mac —Cmd+Shift+X), найдите в поиске «Live Server» и нажмите Install. Зачем нужно это расширение, разберём в следующих разделах.
Интерфейс редактора можно оставить на английском. В документации, статьях и ответах на вопросы пункты меню называют по-английски, и так их будет проще найти.
В VS Code проект открывают как папку, а не как отдельный файл: File → Open Folder. Слева появится дерево файлов папки, а расширения вроде Live Server начнут работать со всем проектом.
Почитать ещё
Первая страница
Создадим первую страницу.
Создайте папку для курса, например
frontend-itam, а внутри неё папкуlesson-01.Откройте папку
lesson-01в VS Code через File → Open Folder.Создайте в ней файл
index.html. Так называют главную страницу папки: сервер отдаёт её, когда в адресе не указан конкретный файл.Напечатайте в файле символ
!и нажмите Tab. VS Code вставит заготовку HTML-документа.Замените
lang="en"наlang="ru", впишите название страницы в<title>, а внутри<body>добавьте заголовок и абзац.
Должен получиться такой файл:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Моя первая страница</title>
</head>
<body>
<h1>Привет, фронтенд!</h1>
<p>Это моя первая страница.</p>
</body>
</html>
Из чего состоит заготовка и зачем нужна каждая строка, разберём на следующем занятии.
Файлы и папки проекта называйте латинскими буквами, в нижнем регистре и без пробелов: product-card.html, а не Карточка товара.html. Серверы различают заглавные и строчные буквы, а пробелы и кириллица в адресе превращаются в последовательности вида %20 и %D0%BA, из-за которых ссылки ломаются.
Почитать ещё
VS Code: Emmet (англ.)
MDN: Работа с файлами
Live Server
Файл index.html можно открыть в браузере двойным щелчком. Тогда адрес в браузере начнётся с file://, например file:///C:/frontend-itam/lesson-01/index.html. Браузер прочитает файл прямо с диска, без сервера.
В таком режиме часть возможностей браузера работает иначе, чем на настоящем сайте. Например, браузер из соображений безопасности не разрешает скрипту страницы прочитать соседний файл проекта и не загружает JavaScript-модули, которые понадобятся нам позже. Страница, которая работает через file://, может сломаться после публикации в интернете, и наоборот.
Расширение Live Server запускает на вашем компьютере небольшой сервер. Браузер получает страницу по протоколу HTTP так же, как с настоящего сайта, и все возможности работают без ограничений.
Чтобы запустить сервер, щёлкните правой кнопкой мыши по файлу index.html и выберите Open with Live Server или нажмите кнопку Go Live в правом нижнем углу VS Code. Откроется браузер с адресом http://127.0.0.1:5500/index.html.
У Live Server есть ещё одна полезная функция: он следит за файлами проекта и обновляет страницу в браузере после каждого сохранения. Если включено автосохранение, изменения появляются в браузере почти сразу после того, как вы их напечатали.
Если Live Server не запускается, проверьте, что в VS Code открыта папка проекта, а не отдельный файл.
Почитать ещё
Инструменты разработчика
В каждом браузере есть инструменты разработчика, их часто называют DevTools. Их открывают клавишей F12, сочетанием Ctrl+Shift+I (на Mac — Cmd+Option+I) или через контекстное меню страницы, пункт «Просмотреть код».
В курсе мы будем постоянно пользоваться тремя вкладками.
Elements показывает DOM страницы. Если навести курсор на элемент в дереве, браузер подсветит его на странице. Текст элемента и его стили можно изменить прямо во вкладке и сразу увидеть результат. Изменения действуют до перезагрузки страницы, потому что меняется только DOM в памяти браузера, а не файл.
Console показывает сообщения и ошибки JavaScript. В консоли также можно выполнить код: напечатайте document.title и нажмите Enter, и консоль выведет название текущей страницы. Если на странице что-то не работает, первым делом откройте консоль и проверьте, нет ли в ней ошибок. Ошибки выделены красным цветом, а рядом указан файл и номер строки, где они произошли.
Network показывает все запросы, которые отправила страница. Чтобы увидеть запросы, которые выполняются при загрузке, откройте вкладку и обновите страницу.
Держите инструменты разработчика открытыми, пока работаете над проектом. Так вы сразу заметите ошибку и сможете проверить, что происходит на странице.
Почитать ещё
Chrome for Developers: Обзор DevTools