Раздел 1:

Знакомство
 Правила игры на лекциях

Большинство организационных вопросов

описаны в интерфейсе ученика
2
 Правила игры на лекциях
– Помечайте вопрос галочкой, иначе мы его не увидим.
– Не помечайте галочкой реплики и ответы — это сбивает с толку лектора и авторов.
– На некоторые вопросы в чате ответят авторы и кураторы, необязательно ждать
ответа лектора.

– Не флудите — нас много и всем сложно. Вы будете отвлекать своих товарищей.

3
 Цель курса
Подготовить полноценных и востребованных
специалистов начального уровня, готовых работать
в веб-индустрии.

4
 Профессии «React-разработчик»

и «Фронтенд-разработчик»

до 15 ноября 2020 до 04 апреля 2021

5
 Как проходит обучение?
Обучение Защита

Неделя 1 Неделя 2 Неделя 3 Неделя 4 Неделя 5 Неделя 6 Неделя 7 Неделя 8 Неделя 9

Старт Финал

– Пять недель на обучение.

– Девять разделов.
– Четыре недели на доработку и защиту проекта.
– Подведение итогов на финальной лекции.

6
 Авторы и преподаватели курса

Николай Вадим
Шабалин Макеев
7
 Профессиональная триада

8
 Профессиональная триада: наставники

9
 Наставники
149 практикующих разработчиков из:

– Агентств.
– Веб-студий.
– Продуктовых компаний.
– И просто фрилансеров.

10
 Работа с наставником
Обязательная часть курса. Наставник:

– Проверяет задания.
– Разбирает тонкости и консультирует.
– Передаёт опыт.
– Оценивает случайный личный проект на защите.

11
 Как выбрать наставника и работать с ним?
– Выбирайте по удобному времени консультирования в интерфейсе ученика.
– Первые несколько наставников будут из вашего часового пояса
– Наставник свяжется с вами в течение первых нескольких дней и уточнит расписание
консультаций.

– Консультации по скайпу: 5 часов на стандартном тарифе, 9 часов на комфортном.

– Время нужно распределять. Например, 1 час в неделю, а лучше 2 раза по полчаса.
– Выбор наставника откроется в конце первой лекции.

12
 Профессиональная триада: проекты

13
 Проекты
Лекторы будут пошагово показывать примеры на учебном проекте «Барбершоп».

Вы будете верстать по личному проекту.

14
 Проекты
Программа курса повторяет процесс работы верстальщика:

1. Разметка.

2. Подготовка графики.

3. Создание сеток.

4. Оформление декоративных элементов.

5. Оформление текстового содержания.

6. Оживление интерактивных элементов.

7. Оптимизация.

15
 Учебный проект «Барбершоп»

16
Личные проекты «Нёрдс», «Седона» и «Техномарт»
 Личные проекты «Глейси» и «Девайс»
Комфортный Комфортный

18
 Сложность личных проектов
1. Нёрдс — лёгкий проект.

2. Седона — лёгкий проект.

3. Техномарт — средний проект.

4. Глейси — сложный проект, доступен на комфортном тарифе.

5. Девайс — сложный проект, доступен на комфортном тарифе.

19
 Формат проектов

Figma

20
 Техническое задание в каждом проекте

21
 Профессиональная триада: критерии

22
 Критерии качества

Программа Прямой эфир Критерии Проекты Материалы Защита Регламент FAQ

23
 Критерии качества
– Все критерии будут разобраны в процессе курса.
– Делятся на базовые и дополнительные.
– Базовые задают минимальный уровень качества для начинающего верстальщика.
– Все базовые критерии обязательны для сдачи личного проекта.
– Дополнительные критерии отражают уровень профессионализма.

HTML и CSS, уровень 1: Критерии

24
 Успешное завершение курса?
Защитить личный проект.

25
 Защита проектов

26
 Регламент защиты проектов

27
 Защита проекта
1. Получить развёрнутую обратную связь от личного наставника.

2. Полностью закончить вёрстку личного проекта.

3. Отправить личный проект на защиту, чтобы получить первую оценку

от случайного наставника.

4. Случайный наставник оценит проект по критериям качества.

5. Личный проект можно дорабатывать два раза.

6. Оценка засчитывается по лучшей попытке.

HTML и CSS, уровень 1: Регламент

28
 Сертификат
– Разные для сдавших и не сдавших личный проект.
– Электронная версия для всех.

HTML и CSS, уровень 1: FAQ

29
 Сертификат для первого уровня вёрстки

30
 Дополнительный сертификат для профессии

31
 А если пропустил лекцию?
Ничего страшного, будут видеозаписи, а также весь наш арсенал:

– Пошаговые демонстрации.
– Скринкасты.
– Подборки ссылок на лучшие статьи.
– Вопросы авторам.

32
 Как задать вопрос автору?

33
 Наши кураторы

34
 Связь с кураторами
С любым вопросом или проблемой можно обратиться к кураторам курса с помощью
специальной формы в интерфейсе ученика.

Кураторы ответят и помогут.

HTML и CSS, уровень 1: FAQ

35
 Что на самом деле происходит, когда...

36
 вы вводите в браузере адрес сайта и нажимаете Enter?

37
 Открывается сайт!

38
 Верно, но копнём глубже
1. Где физически расположен сайт?

2. Как об этом узнаёт ваш браузер?

3. Какую службу доставки использует браузер?

4. Из каких частей и по каким инструкциям браузер создаёт картинку сайта?

39
Где же находится сайт?
Люди живут в домах, у которых есть адрес.
Доехать от дома до дома можно по дорогам.
 Сайты живут на серверах,
у которых есть IP-адрес.

42
«Доехать» от сервера до сервера
можно по кабелям сети.
 IP-адрес — 178.79.181.169.

44
 В доме может быть много квартир, у них есть номера.

45
 На сервере запущено много программ.
У них тоже есть номера: «порты».

46
 Сайты живут в программе «веб-сервер»
– Номер порта веб-сервера по умолчанию — 80 или 443.
– Популярные веб-сервера: Apache HTTP Server, nginx.
– Пример адреса — 178.79.181.169:80 или 178.79.181.169:443.

47
 Но и это не всё. Коммуналки!
В коммуналках есть комнаты.

48
 Веб-сервер-коммуналка
– Такие сервера содержат виртуальные хосты.
– Веб-сервер отдаёт нужный сайт по его названию.
nginx.conf

1 server {
2 listen 80;
3 server_name htmlacademy.ru;
4 root /Users/simonenko/Sites/htmlacademy/public;
5 }
6 server {
7 listen 80;
8 server_name assets.htmlacademy.ru;
9 root /Users/simonenko/Sites/assets/public;
10 }
11 server {
12 listen 80;
13 server_name up.htmlacademy.ru;
14 root /Users/simonenko/Sites/up/public;
49}
15
 Письмо человеку и письмо сайту
– Адрес дома: Санкт-Петербург, – Адрес дома (сервера):
Набережная реки Карповки 5 Л. 178.79.181.169.

– Квартира: 24. – Квартира (порт): 80.

– Кому: Кексу. – Кому (какой сайт показать):
htmlacademy.ru.

50
 Где же находится сайт
– На железном сервере в сети.
– Внутри программы веб-сервера.
– На своём виртуальном хосте.

Разобрались!

51
 Прогресс раскопок
1. Где физически расположен сайт?

2. Как об этом узнаёт ваш браузер?

3. Какую службу доставки использует браузер?

4. Из каких частей и по каким инструкциям браузер создаёт картинку сайта?

52
 Но как браузер узнаёт адрес?
– Дано: htmlacademy.ru.
– Надо получить: 178.79.181.169.

53
 C помощью системы DNS

DNS — Domain Name System

54
 Вот так и работает DNS

DNS — Domain Name Servers

55
 Правда, всё не так просто
– DNS очень большая и медленная распределённая система с огромным количеством
серверов.

– Ведь DNS должна быть очень надёжной системой.

56
 DNS обновляется медленно
Срок добавления и обновления записей в DNS
может составлять до 48 часов.

57
58
 Прогресс раскопок
1. Где физически расположен сайт?

2. Как об этом узнаёт ваш браузер?

3. Какую службу доставки использует браузер?

4. Из каких частей и по каким инструкциям браузер создаёт картинку сайта?

59
 Службы доставки

– Возят самолётами, поездами, автомобилями, почтальонами и курьерами.

– Доставляют конверты, бандероли, посылки и коробки.

60
 Службы доставки в Сети
– Служба доставки — протокол TCP/IP.

TCP/IP

– Доставляет HTTP-пакеты.

HTTP

61
 HTTP-запрос

Accept-Encoding: gzip, deflate, br

Accept-Language: ru-RU, en-US
Accept: text/html, image/webp
Connection: keep-alive
Referer: https://htmlacademy.ru
User-Agent: Mozilla/5.0 ...

62
 HTTP-ответ

Accept-Encoding: gzip, deflate, br

Accept-Language: ru-RU, en-US
Accept: text/html, image/webp
Connection: keep-alive
Referer: https://htmlacademy.ru
User-Agent: Mozilla/5.0 ...

Status HTTP/2.0 200

Cache-Control: no-store, no-cache, must-revalidate
Content-Encoding: br
Content-Type: text/html; charset=UTF-8
Date: Mon, 06 May 2019 12:10:10 GMT
Last-Modified: Wed, 01 May 2019 12:10:10 GMT
Server: nginx

63
 <!DOCTYPE html><html lang="ru" class="no-js"><head><meta
charset="utf-8"><meta name="viewport" content="width=device-
width,initial-scale=1"><link rel="dns-prefetch" href="https://
assets.htmlacademy.ru"><link rel="stylesheet" href="https://
assets.htmlacademy.ru/css/core.css"><link rel="stylesheet" href="https://
Тело ответа
assets.htmlacademy.ru/css/index-page.css"><link rel="preload" as="script"
href="https://assets.htmlacademy.ru/js/general.js"><title>HTML Academy:
интерактивные онлайн-курсы по HTML, CSS и JavaScript</title><meta
name="theme-color" content="#2f358f"><link rel="mask-icon" href="/
favicon.svg" color="#2f358f"><link rel="manifest" href="/
htmlacademy.webmanifest"><meta name="format-detection"
content="telephone=no"></head><body><header class="page-header page-
header--home"><h1 class="sr-only">Интерактивные онлайн-курсы HTML
Academy</h1><div class="page-header__inner"><div class="page-
header__top"><a class="page-header__logo" href="/" aria-label="На главную
HTML Academy"><img src="https://assets.htmlacademy.ru/img/logo.svg"
width="104" height="36" alt="HTML Academy"></a><nav class="main-nav"
aria-label="Основное меню" itemscope itemtype="http://schema.org/
SiteNavigationElement"><ul class="main-nav__list main-nav__list--main
main-nav__list--adaptive"><li class="main-nav__item"><a class="main-
nav__link" href="/courses"><span class="main-nav__icon"><svg
aria-hidden="true"><use xlink:href="/img/sprites/
general.svg#course"></use></svg></
span>Курсы</a></li><li
class="main-

HTTP/2.0 200 OK
Cache-Control: no-store, no-cache, must-revalidate
Content-Encoding: br
Content-Type: text/html; charset=UTF-8
Date: Mon, 06 May 2019 12:10:10 GMT
Last-Modified: Wed, 01 May 2019 12:10:10 GMT
Server: nginx

64
 Откроем инструменты разработчика,
чтобы увидеть HTTP-запросы.

65
Для загрузки сайта браузер делает
много HTTP-запросов.
Последовательная и параллельная
загрузка ресурсов.
Пример объёмного сайта:
379 запросов, 8.5 мегабайт.
 Прогресс раскопок
1. Где физически расположен сайт?

2. Как об этом узнаёт ваш браузер?

3. Какую службу доставки использует браузер?

4. Из каких частей и по каким инструкциям браузер создаёт картинку сайта?

69
 Как браузер собирает сайт?
– Браузер не закачивает «готовый сайт».
– Вспомним Икею.

70
 Исходные детали для браузера

HTML-код

CSS-код

И картинки

71
 Перед сборкой сайта
Итак, все части доставлены. В наличии:

– HTML-код, 1 штука.
– CSS-код, 1 штука.
– Картинки, 10 штук.
– Инструкции нет.

72
 А где инструкция?
– А инструкция — это стандарты HTML и CSS.
– Они зашиты внутрь браузера.
– И эти стандарты мы и будем изучать!

73
 Прогресс раскопок
1. Где физически расположен сайт?

2. Как об этом узнаёт ваш браузер?

3. Какую службу доставки использует браузер?

4. Из каких частей и по каким инструкциям браузер создаёт картинку сайта?

74
 Повторим?
1. Где физически расположен сайт?

На веб-сервере в дата-центре.

2. Как об этом узнаёт ваш браузер?


С помощью DNS по названию сайта.

3. Какую службу доставки использует браузер?


Протоколы TCP/IP и HTTP.

4. Из каких частей и по каким инструкциям браузер создаёт картинку сайта?


HTML- и CSS-код, картинки и стандарты.

75
 Как зарегистрировать домен?
Обратиться к регистратору

76
 Как зарегистрировать домен?
1. Проверить, что он свободен с помощью WHOIS-сервиса.

2. Регистрируем домен у регистратора доменов.

3. Предоставляем ему свои паспортные данные.

4. Указываем нужный домен, оплачиваем.

5. Регистратор вносит запись в систему DNS.

6. Запись распространяется по DNS.

7. Если в настройках DNS был указан IP-адрес сервера, то он «привязывается»

к домену.

77
 Как зарегистрировать хостинг?
Обратиться к хостеру

78
 Как зарегистрировать хостинг
1. Выбираем хостинг, регистрируемся, оплачиваем если необходимо.

2. Хостер выдаёт вам доступ к серверу, на котором настроен веб-сервер.

3. И свой временный адрес sitename.hosting.ru.

4. Хостер может зарегистрировать и привязать к веб-серверу домен (нужен паспорт).

5. Или вы можете «привязать» ранее купленный домен к хостингу.

6. Загружаем сайт на хостинг.

79
 Экосистема

80
 Экосистема технологий

Клиент-сайд
 Сервер-сайл

HTML, CSS, JavaScript, медиа
Фронтенд Бэкенд

Браузер Сервер

HTTP-ответ

HTTP-
HTML, CSS, Серверные языки
запрос
JavaScript PHP, Python, Ruby

TCP/IP

Уровень транспорта
81
 Вывод по экосистеме
– Браузер и сервер обмениваются HTTP- или HTTPS-запросами.
– Браузер в ответах сервера получает HTML, CSS, JavaScript и медиа (картинки, видео
и так далее).

– Браузер не знает, как и на каком языке программирования сервер формирует

ответы.

– Без верстальщика — никуда!

82
 Вывод по экосистеме
Верстальщику нужно:

– Отлично владеть HTML и CSS.

– Желательно знать JavaScript.
– Иметь чувство прекрасного и представление о UX.
– Иметь представление о серверных языках и HTTP.
– Иметь представление о безопасности и работе с персональными данными.
– Об остальном можно не беспокоиться.

83
 Команда

Менеджер

Дизайнер
Программист
Верстальщик

Фронтенд Бэкенд

84
 Инструменты

85
 Инструменты верстальщика
– Браузер.
– Инструменты разработчика в браузере.
– Графический редактор.
– Редактор кода.
– Система контроля версий.

86
 Браузеры

– Google Chrome.
– Mozilla Firefox.
– Safari.
– Яндекс.Браузер.
– Microsoft Edge.
– Opera.
87
 Браузерные движки
– Blink

– Gecko

– WebKit

– MSHTML и EdgeHTML

88
 Инструменты разработчика
Встроенные инструменты разработчика есть во всех браузерах.

– На Windows их можно открыть с помощью клавиш:

— F12,

— Ctrl + Shift + I.

– На macOS их можно открыть с помощью клавиш:

— Command + Option + I.

89
 Chrome Developer Tools
90
 Графические редакторы
Figma.

91
 Редакторы кода
Любой текстовый редактор с подсветкой синтаксиса.

– Atom.
– Sublime Text.
– VS Code.
– WebStorm.
Обзор редакторов для верстальщика.

92
 Git — система контроля версий
– Введение в системы контроля версий.
– Четыре скринкаста о работе с Git через консоль.

93
 Клиенты систем контроля версий
– GitHub Desktop.
– GitKraken.
– SourceTree.
– Sublime Merge.
– Tower.

94
 Рабочий процесс на курсе

95
96
 Короткий список задач раздела

Программа Прямой эфир Критерии Проекты Материалы Защита Регламент FAQ

97
 Выбор проекта и наставника

Программа Прямой эфир Критерии Проекты Материалы Защита Регламент FAQ

98
 Выбор личного проекта

Программа Прямой эфир Критерии Проекты Материалы Защита Регламент FAQ

99
 Создание репозитория в GitHub

Программа Прямой эфир Критерии Проекты Материалы Защита Регламент FAQ

100
 Кексобот и мастер-репозиторий

Создаёт
мастер-репозиторий

101
 Ссылка на мастер-репозиторий

Программа Прямой эфир Критерии Проекты Материалы Защита Регламент FAQ

102
 Мастер-репозиторий в GitHub

103
 Что такое форк?

Создаёт
мастер-репозиторий

Форкаем
мастер-репозиторий

104
 Форкаем мастер-репозиторий

105
 Форк в GitHub

106
 Что такое клонирование?

Создаёт
мастер-репозиторий

Форкаем
мастер-репозиторий

Клонируем форк

107
 Клонируем форк

108
 Клонируем форк

109
 Клонируем форк

110
 Схема подготовки к работе

Создаёт
мастер-репозиторий

Форкаем
мастер-репозиторий

Клонируем форк

111
 Первичная настройка завершена
Можно выполнять задания на работу с кодом
проекта.

112
 Первое задание

Программа Прямой эфир Критерии Проекты Материалы Защита Регламент FAQ

113
 Первое задание

Программа Прямой эфир Критерии Проекты Материалы Защита Регламент FAQ

114
Исходное состояние репозитория
Фиксируем изменения
Изменения зафиксированы
 Проверяем историю

120
Фиксируем изменения
Изменения зафиксированы
 Проверяем историю

124
 Синхронизируем изменения

125
 Форк в GitHub

126
 Коммиты в форке в GitHub

127
Создаём пулреквест

Windows: Control + R
macOS: Command + R
 Создаём пулреквест

129
 Создаём пулреквест

130
 Пулреквест в GitHub

131
 Привязываем пулреквест к заданию

Программа Прямой эфир Критерии Проекты Материалы Защита Регламент FAQ

132
 Пулреквест привязан

Программа Прямой эфир Критерии Проекты Материалы Защита Регламент FAQ

133
 Публикуем задание

Программа Прямой эфир Критерии Проекты Материалы Защита Регламент FAQ

134
 Задание опубликовано

Программа Прямой эфир Критерии Проекты Материалы Защита Регламент FAQ

135
 Опубликованное задание

136
 Отправляем задание на проверку наставнику

Программа Прямой эфир Критерии Проекты Материалы Защита Регламент FAQ

137
 Задание можно отозвать с проверки

Программа Прямой эфир Критерии Проекты Материалы Защита Регламент FAQ

138
 Пулреквест в GitHub

139
 Пулреквест принят

140
 Коммит

Коммит

Синхронизация

Создание пулреквеста

Комментарии

от наставника
Коммит

Синхронизация
Слияние

141 пулреквеста
 Оценка наставника после каждого задания

Программа Прямой эфир Критерии Проекты Материалы Защита Регламент FAQ

142
 Оценка наставника после каждого задания

Программа Прямой эфир Критерии Проекты Материалы Защита Регламент FAQ

143
 Задания на дом
1. Определиться с наставником и проектом.

2. Выбрать и настроить инструменты.

3. Отработать рабочий процесс.

4. Посмотреть скринкасты.

5. Подготовиться к следующему разделу.

6. Пройти шесть глав интерактивного курса «Основы HTML» (но лучше больше).

По желанию читайте статьи в дополнительных материалах.

144