Загрузка...

Мини-проект HTML — личный сайт

Ранее итог нанёс карту вашего HTML-набора и указал сюда как шаг практики. Этот урок — не ещё одна карта навыков. Это бриф сборки: спланируйте три страницы, разделите одну оболочку навигации, заполните реальным контентом и докажите сайт короткой таблицей приёмки.

Почему мини-проект сейчас

Туториалы показывают одну тему за раз. Крошечный личный сайт заставляет совместить: landmarks на каждой странице, рабочие относительные ссылки, информативное изображение, список или таблицу данных и контактную форму с label. Сдать этот пакет — даже уродливый без CSS — лучше зубрёжки атрибутов. Считайте это чеклистом на одну сфокусированную сессию.

Прямой ответ

1) Создайте минимум три файла: index.html, about.html, contact.html. 2) Повторите одни и те же landmarks header/nav/footer с рабочими ссылками. 3) Реальное intro на home, короткая история на about, помеченная форма name/email/message на contact. 4) Одно информативное изображение с осмысленным alt плюс список навыков или маленькая таблица фактов. 5) Пройдите Tab с клавиатуры; почините отсутствующие label и битые ссылки. 6) Отметьте каждую строку приёмки перед «готово».

📊 Acceptance criteria

Item	Done when
Shared nav	Same landmark links work on every page
Semantics	header, nav, main, and footer on each page
Home & about	Real paragraphs — not placeholder lorem forever
Media	At least one informative image with useful alt
Data	A skills list or a small facts table
Form	Labeled name, email, message + a real submit button
Quality	Keyboard tab order makes sense; no unlabeled controls

Планируйте до набора

Сначала набросайте: имя сайта, цели трёх страниц, какое фото, какие навыки/факты. Решите папки — все три HTML вместе для простых относительных ссылок. Назовите человека/бренд один раз, чтобы h1 и title совпадали.

Общая оболочка — начните здесь

Скопируйте header/nav на каждую страницу; меняйте только main. Относительные href должны точно совпадать с именами файлов. Позже настоящий button type=submit — не подделывайте отправку пустым div.

Shared nav starter

html

<header>
<h1>Alex Site</h1>
<nav aria-label="Main">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>
</header>
<main>
<!-- page content -->
</main>
<footer>
<p>© Alex</p>
</footer>

Читаем оболочку

header+nav+main+footer дают ясные landmarks
aria-label на nav помогает, если появится вторая навигация
Относительные ссылки связывают три файла в сайт
Повторяйте оболочку; меняйте только main
Короткий title на каждой странице тоже
Итог перечислил привычки — здесь они применяются вместе

Стартер контактной формы

Страница contact — где навыки форм встречаются с проектом. Сопоставьте каждый контрол с видимым label. Добавьте name для будущего бэкенда. Настоящий submit в разметке даже без отправки на сервер пока.

Contact form starter

html

<form action="#" method="post">
<p>
<label for="name">Name</label>
<input id="name" name="name" type="text" required>
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
</p>
<p>
<label for="msg">Message</label>
<textarea id="msg" name="message" rows="5" required></textarea>
</p>
<button type="submit">Send</button>
</form>

Порядок сборки, который работает

Дублируйте оболочку в три файла; чините ссылки nav. 2. Напишите intro home и историю about (+ список/таблицу). 3. Фото в images/ с src и конкретным alt. 4. Вставьте форму; проверьте label, name, submit. 5. Откройте три страницы; сузьте; Tab до submit. 6. Отметьте строки приёмки — лёгкий CSS позже.

Лёгкие ошибки на этом проекте

Скопировать nav раз и править только одну страницу, пока ссылки не разъедутся
Поля контакта только с placeholder без label
Таблица вёрстки на всю страницу вместо landmarks
Пустой alt на фото со смыслом
Оставить lorem и сказать «готово»
Прыгнуть к фреймворкам или тяжёлому CSS до проверки трёх страниц
Забыть привычку итога: сначала структура и label

Итог

Эта сессия — практическая сборка личного сайта, не ещё одна карта курса
Три страницы делят header/nav/main/footer с рабочими относительными ссылками
Совместите медиа, список или таблицу и помеченную контактную форму
Таблица приёмки — ваше определение готово
Проверьте клавиатурой до полировки CSS
Следующие опциональные темы (SVG…) — доп. — сначала сдайте этот сайт

Короткое напоминание

Если застряли — вернитесь к таблице приёмки, а не к зубрёжке новых тегов. Цель — практика совмещения навыков курса в маленьком сайте, открываемом в браузере.

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓

Вопросы

🎯

70%

Для Прохождения

♾️

∞

Время

🔄

∞

Попытки

📝 Инструкции

Внимательно прочитайте каждый вопрос
Выберите лучший ответ на каждый вопрос
Вы можете пересдавать тест столько раз, сколько захотите
Ваш прогресс будет показан вверху