🚀

Модуль 3. Проектная работа

Занятие 31
Проект: доработка

Сегодня мы станем «тестировщиками» и найдём все ошибки в своём сайте до презентации.

🕵️

Сегодня ты — тестировщик

Ошибки есть у всех. Находят их по списку, а не «на глаз».

Одна проверка за раз → по всем страницам → исправил → отметил.

✅

Чек-лист: структура

  1. 🧭 Меню работает со всех страниц
  2. 🖼 Картинки загружаются, у всех есть alt
  3. 🦴 DOCTYPE, lang, charset, viewport, title
  4. 📚 Один h1, заголовки по порядку
  5. 🏷 header, nav, main, footer
✅

Чек-лист: вид и безопасность

  1. 🎨 Один CSS на всех страницах
  2. 📱 360px — без горизонтальной прокрутки
  3. 🧹 Теги закрыты, есть отступы
  4. 🔤 Нет опечаток — читай вслух
  5. 🛡 Нет личных данных, указаны источники картинок
🧪

Валидатор HTML

  • 🌐 validator.w3.org
  • Вставь код или загрузи файл
  • Исправляй ошибки сверху вниз
  • Одна ошибка может дать много сообщений — не пугайся
<ul>
  <li>Кот
  <li>Пёс</li>
</ul>
<img src="cat.jpg">
🔴

Консоль: ошибка 404

F12 → Console

GET images/Cat.jpg 404 (Not Found)

Файл не найден. Проверь:

  • путь к папке
  • имя буква в букву
  • расширение: .jpg ≠ .JPG
👀

Взгляд со стороны

  • ☕ Перерыв — и проверка на следующий день
  • 👨‍👩‍👧 Попроси близких найти на сайте нужную страницу
  • 🔃 Прочитай код снизу вверх

Мозг видит задуманное, а не написанное.

🃏

Запомни!

  • validator.w3.orgПроверка HTML
  • F12 → ConsoleОшибки загрузки файлов
  • alt=""Описание у каждой картинки
  • Alt + Shift + FФорматировать код в VS Code
⌨️

Практика: Проверяем и исправляем сайт

  1. Пройди чек-лист требований на странице «Итоговый проект» и отметь выполненное (отметки сохраняются только после входа).
  2. Проверь HTML в валидаторе и исправь ошибки.
  3. Попроси близких пройти по сайту и найди с их помощью 3 недочёта.
  4. Исправь всё найденное и отформатируй код.

🚀 Со звёздочкой: Проверь сайт в Lighthouse (F12 → Lighthouse) и улучши оценку доступности.

🔒 Без входа в аккаунт работу из практики нельзя сохранить на сайте, а занятие — отметить пройденным.

🪞

Подведём итоги

  • Что нового я сегодня узнал(а)?
  • Что получилось лучше всего?
  • Где было трудно и что поможет в следующий раз?

✨ По желанию: Подготовь 3–5 предложений для презентации: о чём сайт, что было трудно, чем гордишься.