Финишная прямая: проверяем сайт по чек-листу, ускоряем его и выкладываем в интернет.
| Проверка | Описание |
|---|---|
| Микро-ошибки | HTML-валидатор |
| Изображения | Все ли изображения корректно загружаются |
| Ссылки | Работают ли все ссылки |
| Обратная связь | Обязательная секция для любого сайта |
| Мобильные устройства | Сайт правильно выглядит на всех устройствах |
| Chrome — Lighthouse | Проверка Lighthouse для мобильных и компьютеров |
| Кросс-браузерный тест | Сайт работает во всех современных браузерах — список браузеров |
За подробным руководством обращайся в службу поддержки хостинга
| Проверка | Описание |
|---|---|
| Корректность URL | Перенаправления ведут на нужные страницы |
| robots.txt | Что такое robots.txt |
CSS/JS minifier — сжимает код
Sass compiler — превращает Sass в CSS
Live Server — обновляет страницу при сохранении
Пройди по чек-листу выше. Открой свой сайт в Chrome, нажми F12 → вкладка Lighthouse → Analyze page load. Исправь всё, что подсветится красным, и добейся хотя бы 90 баллов.
🖥️ Это большое задание — делай его в VS Code на компьютере и открывай страницу в браузере. Не забудь выложить результат на свой сайт на GitHub!
Сожми картинки (squoosh.app, compressjpeg, compresspng) и выложи сайт на GitHub Pages или хостинг. Пришли ссылку преподавателю!
🖥️ Это большое задание — делай его в VS Code на компьютере и открывай страницу в браузере. Не забудь выложить результат на свой сайт на GitHub!
С помощью тега <picture> покажи на узких экранах (до 600px) картинку img/35_phone.png, а на остальных — img/35_tablet.png. У <img> обязательно заполни alt. Как это работает.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Моя страница</title>
</head>
<body>
<picture>
<source media="(max-width: 600px)" srcset="img/35_phone.png">
<img src="img/35_tablet.png" alt="Макет моего сайта" width="300">
</picture>
</body>
</html>