Войти Регистрация
🔒 Ты не вошёл(вошла) в аккаунт — прогресс, работы и результаты теста не сохраняются. Что недоступно?

✅ Без входа можно

  • читать все 33 занятия, смотреть слайды и шпаргалку;
  • пробовать код в редакторе и песочнице.

⛔ Без входа нельзя

  • сохранять работы — черновик живёт только в этом браузере и пропадёт при очистке истории, в режиме инкогнито или на другом устройстве;
  • отмечать пройденные занятия и видеть свой прогресс;
  • выбрать тему итогового проекта и отмечать чек-лист;
  • отправить итоговый тест и сохранить результат.
Зарегистрироваться бесплатно У меня есть аккаунт
Модуль 3. Проектная работа Занятие 31

Проект: доработка

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

Изучаем: Чек-лист, ошибки, ссылки, alt
Результат: Проверяем и исправляем сайт

🎬 Слайды для урока Листай стрелками ← →, F — весь экран, N — подсказки

💡 Объяснение

Тестировщик собственного сайта

Даже опытные разработчики не выпускают сайт, не проверив его. Ошибки есть всегда: сломанная ссылка, картинка без alt, опечатка в заголовке. Хорошая новость — большинство из них легко найти, если проверять по списку, а не «на глаз». Сегодня ты сам(а) себе тестировщик.

Как проверять

Главное правило: одна проверка за раз. Не пытайся найти всё сразу. Возьми один пункт чек-листа, пройди по всем страницам, исправь найденное, отметь пункт — и только потом переходи к следующему.

Заведи список ошибок на листочке или в текстовом файле. Записанную ошибку не забудешь исправить.

Чек-лист проверки

  1. Навигация. С каждой страницы можно попасть на каждую. Логотип ведёт на главную. Активный пункт меню правильный.
  2. Картинки. Все загружаются, у всех есть осмысленный alt, ни одна не вылезает за экран.
  3. Каркас. На каждой странице есть <!DOCTYPE html>, lang="ru", meta charset, meta viewport и свой title.
  4. Заголовки. Один h1 на странице, дальше h2, h3 по порядку.
  5. Семантика. Есть header, nav, main, footer.
  6. Стили. Внешний CSS подключён на всех страницах, сайт выглядит единым.
  7. Адаптивность. На ширине 360px нет горизонтальной прокрутки, всё читается.
  8. Код. Все теги закрыты, есть отступы, нет лишнего закомментированного мусора.
  9. Текст. Нет орфографических ошибок — прочитай все тексты вслух.
  10. Безопасность. Нет фамилии, адреса, телефона, номера школы. У чужих картинок указан источник.

Требования итогового проекта отмечай на странице «Итоговый проект». Важно: без входа в аккаунт отметки не сохраняются — зарегистрируйся, чтобы сайт запомнил твой прогресс.

Инструменты

  • Валидатор HTML — validator.w3.org, вкладка «Validate by File Upload» или «Direct Input». Он покажет незакрытые теги, ошибки вложенности и пропущенные атрибуты. Не пугайся длинного списка: часто одна ошибка вызывает несколько сообщений. Исправляй сверху вниз и проверяй снова.
  • Консоль браузера — F12 → Console. Красные сообщения вида «404 Not Found» означают, что файл (картинка, CSS) не найден: проверь путь и имя.
  • Форматирование — Shift+Alt+F в VS Code выровняет код, и незакрытые теги станут заметны по «лесенке».
  • Lighthouse — F12 → Lighthouse → «Analyze page load». Покажет оценки доступности и советы. Это задание со звёздочкой.

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

Своим глазам сложно заметить собственные ошибки — мозг «видит» то, что задумано, а не то, что написано. Помогают три приёма:

  • Сделай перерыв и вернись к проверке на следующий день.
  • Попроси близкого человека открыть сайт и найти, например, страницу с галереей. Молча наблюдай, где он запутается.
  • Прочитай код снизу вверх — так внимание не скользит по привычному тексту.

Проверь себя

  1. Почему проверять лучше по одному пункту чек-листа?
  2. Что означает ошибка 404 в консоли браузера?
  3. Какие личные данные нельзя оставлять на сайте?

⌨️ Практика

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

🪞 Рефлексия

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

🔒 Отметить занятие пройденным можно только после входа. Без аккаунта сайт не запомнит, до какого занятия ты дошёл(дошла). Регистрация · Вход