Ваш первый сайт
Восемь последовательных уроков: создайте HTML-страницу, добавьте стили, подготовьте файлы и опубликуйте сайт.
Первая HTML-страница: от пустого файла до браузера
Создаём папку проекта, сохраняем index.html и проверяем минимальную страницу без сервера.
Структура сайта: заголовки, разделы и навигация
Превращаем набор текста в понятную страницу с шапкой, основной областью и подвалом.
Первые стили: подключаем CSS и оформляем страницу
Добавляем отдельный style.css, настраиваем текст, ширину колонки и карточки.
Адаптивная страница: от телефона до большого экрана
Собираем сетку карточек, убираем переполнение и проверяем текст при масштабировании.
Файлы и изображения: подготовка к публикации
Организуем папки, проверяем относительные пути и уменьшаем вес изображений.
Как выбрать хостинг для первого сайта
Определяем требования статического сайта и WordPress, сравниваем размещение без лишних услуг.
Публикация сайта: загрузка и первые проверки
Переносим файлы в корень сайта, проверяем адрес и разбираем типичные ошибки 403 и 404.
Домен, HTTPS и SEO: проверка перед запуском
Подключаем постоянный адрес, проверяем редиректы и открываем индексацию только для готовой версии.
Локальный просмотр: файл и HTTP-сервер
Локальный HTTP-сервер помогает проверять учебный сайт в условиях, более похожих на публикацию, чем открытие через file://.
Первый снимок проекта в Git
История Git помогает сохранять осмысленные состояния учебного проекта и видеть, какие изменения привели к текущему результату.
Просмотр изменений перед сохранением
Просмотр diff помогает заметить случайные правки до коммита и отделить изменение содержания от технического шума.
Регистр путей: почему картинка исчезает после публикации
Различие регистра в имени файла и ссылке может остаться незаметным локально и привести к отсутствию ресурса на сервере.
Проверка head первой страницы
Секция head описывает документ для браузера и других потребителей, не заменяя видимое содержание страницы.
Прототип формы до подключения сервера
Форму полезно сначала собрать и проверить как интерфейс, явно отделив учебный прототип от настоящей отправки данных.
Один CSS-файл и границы правил
Небольшому учебному сайту достаточно понятного CSS-файла с последовательными правилами, прежде чем понадобится сложная сборка.
Первое DOM-действие без inline-обработчика
Небольшое действие JavaScript удобно связать с нативной кнопкой через addEventListener, оставляя HTML понятным и без скрипта.
Копия выпуска перед публикацией
Отдельная копия готового выпуска помогает понимать, какие именно файлы планируется опубликовать и к какому состоянию можно вернуться.
Проверка после публикации без нагрузочного теста
После загрузки сайта нужно проверить основные пользовательские действия и сетевые ответы, а не ограничиваться открытием главной страницы.
Первый 404: проверить URL до изменения сервера
Если ресурс не загрузился, сначала нужно определить точный запрос и ответ, прежде чем менять конфигурацию сервера.
Публикация в подпапке: относительный путь и путь от корня
Сайт, открывающийся в корне домена, может потерять ресурсы после переноса в подпапку из-за другого разрешения адресов.
Валидатор HTML: ошибки структуры до оформления
Проверка HTML валидатором помогает обнаружить недопустимую вложенность, повторные идентификаторы и другие ошибки разметки.
Computed: найти итоговое значение CSS
Вкладка Computed показывает вычисленные стили выбранного элемента и помогает отделить написанное правило от фактического результата каскада.
Делегирование событий: один обработчик для списка
Делегирование позволяет обрабатывать всплывающие события дочерних элементов через один общий контейнер.
preventDefault: отмена стандартного действия
Метод preventDefault отменяет стандартное действие события, если оно допускает отмену и обработчик может это сделать.
Сводка ошибок формы: найти проблемные поля
Для длинной формы сводка ошибок помогает быстро увидеть, что нужно исправить, и перейти к соответствующему полю.
Создание DOM-элементов без склейки HTML
createElement и textContent позволяют собрать небольшой фрагмент интерфейса, явно отделяя структуру от текстовых данных.
README учебного проекта: запуск без догадок
Короткий README фиксирует назначение проекта, способ локального просмотра и границы готовности.
Регрессионная проверка после маленькой правки
Регрессионная проверка подтверждает, что изменение одного участка не сломало ранее работавшие сценарии.
Закрытый стенд: доступ по паролю и запрет индексации
Тестовая версия сайта должна быть отделена от публичной, особенно если содержит незавершённые страницы или копию рабочих данных. Запрет индексации и ограничение доступа решают разные задачи.
Проверка canonical: один основной адрес для страницы
Canonical обозначает предпочтительный URL среди дублирующих или очень похожих страниц. Сигнал должен согласовываться с внутренними ссылками, перенаправлениями и картой сайта.