# Web Weekend 1 день

## План курса
1 день:

* Первое знакомство с веб-страницей
* Работа с дизайном
* Этапы разработки сайта
* HTML-верстка
* Работа с CSS
* JavaScript
* Итоги дня, домашнее задание

2 день:

* Разминка
* Работа с backend. PHP
* Взаимодействие Frontend и Backend
* Форма обратной связи. Frontend + backend
* Работа с веб-аналитикой
* Публикация проекта. Git, GitGub Pages

---

# Расписание

10.00 - 19.00

Перерыв 12.45- 13.00
Обед 14.30 - 15.30
Перерыв 17.00 - 17.15

## После курса вы точно будете знать, как решить задачи:

1. Установить счётчик Яндекс. Метрики
2. Сверстать лендинг (или несколько экранов). Адаптив
3. Скопировать сайт
4. Поменять логотип на сайте
5. Восстановить меню сайта
6. Добавить номер телефона на страницу
7. Установить рекламу Яндекса на сайт
8. Добавить фото на сайт
9. Поправить адаптивность фотогалереи

---

## Концептуальные задачи курса

1. Из картинки сделать сайт
2. Чтобы открывался в браузере у друзей и знакомых
3. Научить править чужие сайты

---

## Итоговый проект

Сайт книжного магазина

Реализуем часть из этого функционала:

1. Регистрация/авторизация
2. Рейтинг популярных книг
3. Топ авторов
4. Последние книжные новинки
5. Карточка пользователя
6. Подписка на обновления
7. Страница рецензии
8. Меню
9. Адаптивный дизайн

## Программы, которые нам понадобятся:

1. Google Chrome
2. WebStorm
3. FileZilla
4. Графический редактор с инструментом «Пипетка» (?)

# Первое знакомство с web-страницей

## Сайт

// ниже есть слайд "как работает сайт", а тут что?

## Браузер

// ниже есть слайд "как работает браузер", а тут что?

## Знакомство с разработкой #1 (30 мин)

Клиент - разработчик

Самая типичная ситуация на фрилансе. У клиента уже есть какой-то
проект, который до него делали другие разработчики.
Необходимо внести правки в этот код. Всю работу клиент предоставил в zip-архиве.

1. Поменять контакты
2. Заменить картинку
3. Добавить ссылку

### Первое знакомство с web-страницей

Рассказываю, что у нас в проекте есть файлы .html,
которые открываются в браузере

### Знакомство с редактором

Для начала научимся править готовый код, ничего в нём не понимая.

#### Сменить контакты

Рассказываю про «Поиск» / «Поиск по проекту» и «Поиск/Замену»

#### Заменить картинку

1. Ищем старый файл в структуре проекта
2. Копируем новый файл по соседству со старым
3. Меняем ссылку

#### Добавить ссылку в тексте

1. Находим нужное слово в тексте
2. Находим любую ссылку на странице
3. Находим этот текст в коде
4. Копируем код ссылки для нашего слова

### Как работает браузер

Рассказ о том, как браузер загружает HTML-файл

1. Весь код HTML-файла браузер обрабатывает
2. Находит там вспомогательные файлы, подгружает их и также обрабатывает

### Знакомство с консолью. Вкладка «Сеть»

1. Открываем консоль
2. Находим вкладку «Сеть»
3. Смотрим на те файлы, которые страница уже подгрузила
4. Находим в редакторе упоминания этих файлов

# Работа с дизайном

### Клиент - дизайнер - разработчик

Клиент нашёл дизайнера для доработки сайта. Он скинул фотографию того,
как должна выглядеть кнопка на сайте.

Необходимо поменять её цвет.

### Знакомство с графическим редактором

1. Открываем картинку
2. Выбираем инструмент «Пипетка»
3. Определяем цвет кнопки в hex/rgb

### Знакомство с консолью. Вкладка «Элементы»

1. Находим кнопку и смотрим её стили
2. Находим что-то, отвечающее за её текущий цвет
3. Меняем этот цвет на тот, что получили в графическом редакторе

### Адаптивный дизайн

Клиент просит сделать заголовок на телефоне меньше, чем сейчас

### Принцип адаптивного дизайна

### Практика

1. Находим на вкладке «Элементы» нужный элемент.
2. Ищем его стиль. Переходим в режим адаптивного дизайна
3. Находим что-то похожее в нашем проекте
4. Меняем стиль

# Этапы разработки сайта

### HTML и CSS. В чём отличия?

1. Заходим во вкладку консоли «Элементы»
2. Удаляем всё, что относится к тегам <link>
3. Смотрим на «голую» страницу.

### Далее

1. Перезагружаем страницу
2. Всё возвращается на место!

### Протокол HTTP и FTP

Смотрим в консоли, вкладка «Сеть» HTTP запросы

### IP-адрес. DNS. Домен. Хостинг

### Практика. Публикация проекта

Размещаем проект по FTP

1. Открываем Filezilla
2. Вводим логин/пароль
3. Создаём персональную папку
4. Закачиваем файлы
5. Находим свой сайт по ссылке вида *домен/папка*

### Знакомство с разработкой #3. Backend

Клиент попросил в подвал добавить текущий год копирайта.
Для этого он нанял backend-разработчика.

Он предоставил специальный код <?= date('Y') ?>,
который необходимо вставить на страницу, переименовав его в php.

### Backend. Клиент и сервер

### Практика

1. Меняем расширение у страницы на .php
2. Вставляем вместо года код от разработчика
3. Сохраняем файл
4. Заходим в консоль, вкладка «Элементы» и смотрим,
что на месте кода появилось число

### Знакомство с разработкой #4. Frontend

Клиент попросил добавить кнопку «Сделать хорошо» для поднятия настроения.
При клике на неё должно появляться окно «Хорошо сделано».
Для этого он обратился к JavaScript-разработчику, который выдал такой код:

<div onclick="alert('Хорошо сделано')" class="btn">Сделать хорошо</div>

### Frontend

### Практика

1. Добавляем код в правую колонку (Её необходимо будет найти)
2. Нажимаем на кнопку

### Языки программирования

### Summary 1

### Перерыв

# Тест на прошлый блок

# HTML

### Об HTML

// ДЗ можем взять из курса HTML:

// Теги для разметки текста и атрибуты
https://github.com/netology-code/wm-homeworks/tree/master/tags

// Списки и таблицы: https://github.com/netology-code/wm-homeworks/tree/master/lists

// Инструкция по Codepen
https://github.com/netology-code/guides/tree/master/codepen

### Задача

Делаем текст отзыва о книге. Благодаря уже готовым CSS стилям он будет выглядеть хорошо. Для отзыва уже есть заготовка. Необходимо найти блок основного содержимого
и добавить туда теги.

На слайде добавляем картинку финального результата.

### Семантическая разметка

Разбиваем увиденное на логические части

### Основная структура документа. Кодировка. Тип документа

### Тег/Атрибут

### Вложенность тегов

### Взаимосвязь тегов

### Форматирование кода

### Гиперссылка

### URL в ссылках

### Использование ссылок

### Картинки

### Маркированные, нумерованные списки

### Форма

### Emmet

# Перерыв

### Summary 2

### Тест на прошлый блок

# CSS

### Задача

Верстаем блок «Топ авторов» / «Популярные книги»

### Что такое CSS и где он используется

### Вкладка «Стили»

### Стили по умолчанию

### Как подключить CSS, где его написать

Если чего, у нас он уже частично подключен

### Селекторы. Что может быть селектором

### Комбинации селекторов

### Селектор класса

### Основные характеристики шрифта

### Цвета в hex, rgb, rgba

### Свойства фоновых изображений

### Emmet для CSS

### PixelPerfect

### БЭМ или соглашение по диплому

### Summary 3

# Перерыв на обед

### Тест на прошлый блок

# JavaScript

### Задача

Делаем виджет рецензии книги (в виде звёзд)

### Запуск кода в консоли

### Переменные let

### Типы данных

### Операторы

### Условные конструкции

### Функции

### Поиск элементов

Всё, что есть в глобальной области видимости с идентификатором

### Введение в события

Пользуемся глобальной областью видимости и атрибутами тега.
Аппелируем к тому, что в React'е всё похоже

### Summary #4

### Задача на дом