Пора применить всё, чему мы научились! В этом проекте создадим одностраничную визитку — личную страницу с информацией о себе. Это первый проект курса, аналог «Генератор историй» из курса Python.
Проект объединяет: HTML (структура, семантика), списки, ссылки, изображения, CSS (селекторы, цвета, шрифты), блочная модель.
header, main, footer).target="_blank").Создать одностраничный сайт «О себе», который:
placeholder), имя, краткое описание.<header>, <main>, <footer><img src alt><ul>, <li><a href> с target="_blank" для внешнихpadding, margin, border-radiusmax-width и центрированиемСоздай файл index.html с базовой разметкой:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Моя визитка</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
В <main> добавь:
https://via.placeholder.com/200)<main class="main">
<div class="container">
<img src="photo.jpg" alt="Моё фото" class="avatar">
<h2>О себе</h2>
<p>Текст о себе...</p>
<h3>Интересы</h3>
<ul>
<
В footer или в main добавь блок контактов:
<h3>Контакты</h3>
<ul class="contacts">
<li><a href="mailto:ivan@example.com">ivan@example.com</a></li>
<li><a href="https://vk.com/..." target="_blank">ВКонтакте</a></li>
<li><a href=
Создай style.css:
* { box-sizing: border-box; }
body {
font-family: Arial, sans-serif;
line-height: 1.5;
margin: 0;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.
Адаптируй цвета, шрифты и отступы под свой стиль.
charset)target="_blank"Мы создали первую полноценную веб-страницу — визитку. На следующем уроке изучим Flexbox и улучшим расположение элементов.
alt у изображения — страница потеряет доступность и валидность.target="_blank" у внешних ссылок — тогда страница начнёт открываться в текущей вкладке, а не в новой.<head> или с ошибкой в пути — стили не применятся.max-width контейнеру — на широких экранах контент растянется по ширине.Добавь на страницу визитки:
header (можно градиент: background: linear-gradient(...))Сделай две версии визитки в разных стилях:
index.html + style.css — светлая темаindex-dark.html + style-dark.css — тёмная темаСодержимое одинаковое, меняются только цвета и, при желании, шрифты.
Добавь на визитку блок «Мои проекты»: 2–3 карточки (название и краткое описание). Пока без реальных ссылок. Оформи карточки с рамкой и отступами.
Добавь в <head> viewport и попробуй изменить ширину окна браузера. Убедись, что контент не «уезжает» за экран. Используй max-width: 100% для изображений.
Создай визитку для друга или вымышленного персонажа. Используй другую цветовую схему и структуру блоков.
Рядом с каждой ссылкой в блоке контактов добавь эмодзи или символ (✉️, 🔗) как «иконку». Можно оформить ссылки в виде кнопок.
Добавь на визитку блок с любимой цитатой или девизом. Оформи его отдельным стилем (курсив, отступ слева, другой цвет).