Для кого эта статья?
- Хочешь показать свои работы, навыки или просто красиво оформить резюме?
- Только начал изучать фронтенд и не знаешь, с чего начать?
- Хочешь «оживить» свою визитку в интернете?
Отлично, тогда эта статья для тебя. Мы вместе создадим простой, стильный сайт-портфолио, используя только HTML и CSS — никакого JavaScript (пока 😏).
🧱 Что мы будем делать?
Создадим одностраничный сайт с такими блоками:
- Шапка с именем и меню
- О себе
- Мои проекты (портфолио)
- Контакты
В конце получим готовую страницу, которую можно выложить на GitHub Pages или хостинг.
📁 Структура проекта
Создай папку my-portfolio и внутри:
my-portfolio/
├── index.html
└── style.css
✏️ Шаг 1. Создаём HTML-шаблон (index.html)
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Моё портфолио</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Анна Иванова</h1>
<nav>
<a href="#about">Обо мне</a>
<a href="#projects">Проекты</a>
<a href="#contacts">Контакты</a>
</nav>
</header>
<section id="about">
<h2>Обо мне</h2>
<p>Привет! Я начинающий веб-разработчик, люблю HTML, CSS и уютные интерфейсы.</p>
</section>
<section id="projects">
<h2>Проекты</h2>
<div class="project">
<h3>Мини-сайт рецептов</h3>
<p>Мой первый сайт с любимыми блюдами.</p>
</div>
<div class="project">
<h3>Список дел</h3>
<p>Простой todo-лист с HTML и CSS.</p>
</div>
</section>
<section id="contacts">
<h2>Контакты</h2>
<p>📧 Email: anna@example.com</p>
<p>💼 GitHub: <a href="https://github.com/anna">github.com/anna</a></p>
</section>
<footer>
<p>© 2025 Анна Иванова</p>
</footer>
</body>
</html>
🎨 Шаг 2. Добавим стиль (style.css)
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: sans-serif;
}
body {
background-color: #f5f5f5;
color: #333;
line-height: 1.6;
padding: 20px;
}
header {
background: #333;
color: white;
padding: 20px;
text-align: center;
}
header h1 {
margin-bottom: 10px;
}
nav a {
color: white;
margin: 0 15px;
text-decoration: none;
font-weight: bold;
}
section {
padding: 30px 0;
border-bottom: 1px solid #ddd;
}
.project {
background: white;
padding: 15px;
margin-top: 15px;
border-radius: 8px;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
footer {
text-align: center;
margin-top: 30px;
font-size: 0.9em;
color: #888;
}
🧪 Что получилось?
Ты создал мини-сайт с:
- Адаптивной структурой
- Блоками "О себе", "Проекты", "Контакты"
- Простым, но стильным дизайном
🚀 Что можно улучшить?
- Добавить фото и аватарку
- Сделать адаптивную верстку (media queries)
- Подключить Google Fonts
- Сделать анимации при прокрутке
- Или... добавить JS-фильтрацию проектов 🧙♂️
🎁 Бонус: как опубликовать?
GitHub Pages — бесплатно и за 2 минуты.
- Заведи репозиторий на GitHub
- Закинь туда index.html и style.css
- В настройках репозитория включи GitHub Pages
- Получи ссылку: https://твой_логин.github.io/имя-репозитория
✅ Итог
Мы сделали:
- Минималистичное, но функциональное портфолио
- Разобрали HTML-структуру и базовый CSS
- Научились размещать сайт в интернете