Мини-проект: лендинг курса + деплой
Применяем всё, что изучили: HTML-семантика, CSS Grid/Flexbox, адаптив, формы, безопасность. Делаем лендинг учебного курса и деплоим в интернет.
Что будем делать
Одностраничный лендинг с секциями:
1. TopBar (логотип + навигация)
2. Hero (заголовок + описание + кнопка CTA)
3. Карточки тем (Grid)
4. Форма «Начать обучение»
5. Footer (ссылки + контакты)
Структура проекта
course-landing/
├── index.html
├── styles.css
└── assets/
├── logo.svg
└── og-image.png
Минимальная структура: один HTML, один CSS, папка с ресурсами.
HTML: семантическая разметка
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Курс по бэкенд-разработке: Go, SQL, Docker" />
<meta property="og:title" content="BackendStart - Обучение бэкенду" />
<meta property="og:description" content="20 треков, 173 урока" />
<meta property="og:image" content="/assets/og-image.png" />
<title>BackendStart - Обучение бэкенд-разработке</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header class="topbar">
<a href="/" class="logo">MyApp</a>
<nav class="nav">
<a href="#topics">Темы</a>
<a href="#signup">Начать</a>
</nav>
</header>
<main>
<section class="hero">
<h1>Стань бэкенд-разработчиком</h1>
<p>20 треков, 173 урока: Go, SQL, Docker, Linux и другие</p>
<a href="#signup" class="btn">Начать бесплатно</a>
</section>
<section id="topics" class="topics">
<h2>Что изучишь</h2>
<div class="cards">
<article class="card">
<h3>Go</h3>
<p>Основной язык бэкенда: горутины, каналы, HTTP-сервер</p>
</article>
<article class="card">
<h3>SQL</h3>
<p>Базы данных: запросы, индексы, транзакции, изоляция</p>
</article>
<article class="card">
<h3>Docker</h3>
<p>Контейнеризация: образы, volumes, Compose, CI/CD</p>
</article>
<article class="card card--wide">
<h3>Архитектура</h3>
<p>Clean Architecture, DDD, CQRS, Event-Driven</p>
</article>
<article class="card">
<h3>Linux</h3>
<p>Терминал, файлы, процессы, права доступа</p>
</article>
<article class="card">
<h3>Git</h3>
<p>Ветки, мержи, ребейзы, CI/CD</p>
</article>
</div>
</section>
<section id="signup" class="signup">
<h2>Начать обучение</h2>
<form class="signup-form" method="post" action="/api/signup">
<label for="email">Email</label>
<input id="email" name="email" type="email" required
placeholder="ivan@example.com" />
<button type="submit" class="btn">Начать</button>
</form>
</section>
</main>
<footer class="footer">
<p>© 2026 BackendStart</p>
<nav>
<a href="/privacy">Конфиденциальность</a>
<a href="https://t.me/myapp">Telegram</a>
</nav>
</footer>
</body>
</html>
Обрати внимание: <header>, <main>, <section>, <article>, <footer>, <nav> - семантические теги. meta description и OG-теги - для SEO и соцсетей.
CSS: стили + адаптив
/* Reset и базовые стили */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--color-primary: #3182ce;
--color-primary-dark: #2c5282;
--color-text: #1a202c;
--color-muted: #718096;
--color-bg: #ffffff;
--color-card: #f7fafc;
--radius: 12px;
--spacing: 24px;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 16px;
line-height: 1.6;
color: var(--color-text);
background: var(--color-bg);
}
/* TopBar */
.topbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 var(--spacing);
height: 64px;
border-bottom: 1px solid #e2e8f0;
}
.logo {
font-weight: 700;
font-size: 1.25rem;
text-decoration: none;
color: var(--color-primary);
}
.nav {
display: flex;
gap: 24px;
}
.nav a {
text-decoration: none;
color: var(--color-muted);
transition: color 0.2s;
}
.nav a:hover { color: var(--color-primary); }
/* Hero */
.hero {
text-align: center;
padding: 80px var(--spacing);
}
.hero h1 {
font-size: clamp(1.75rem, 5vw, 3rem);
margin-bottom: 16px;
}
.hero p {
font-size: 1.25rem;
color: var(--color-muted);
margin-bottom: 32px;
}
/* Кнопка */
.btn {
display: inline-block;
background: var(--color-primary);
color: white;
padding: 12px 32px;
border: none;
border-radius: var(--radius);
font-size: 1rem;
cursor: pointer;
text-decoration: none;
transition: background 0.2s;
}
.btn:hover { background: var(--color-primary-dark); }
/* Карточки */
.topics {
padding: 64px var(--spacing);
max-width: 1200px;
margin: 0 auto;
}
.topics h2 {
text-align: center;
margin-bottom: 40px;
font-size: 2rem;
}
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--spacing);
}
.card {
background: var(--color-card);
padding: var(--spacing);
border-radius: var(--radius);
border: 1px solid #e2e8f0;
}
.card h3 { margin-bottom: 8px; }
.card p { color: var(--color-muted); }
.card--wide {
grid-column: span 2;
}
/* Форма */
.signup {
padding: 64px var(--spacing);
text-align: center;
background: var(--color-card);
}
.signup h2 { margin-bottom: 24px; }
.signup-form {
display: flex;
gap: 12px;
justify-content: center;
align-items: end;
flex-wrap: wrap;
}
.signup-form label {
text-align: left;
}
.signup-form input {
padding: 12px 16px;
border: 1px solid #e2e8f0;
border-radius: var(--radius);
font-size: 1rem;
width: 300px;
}
.signup-form input:focus {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* Footer */
.footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing);
border-top: 1px solid #e2e8f0;
color: var(--color-muted);
font-size: 0.875rem;
}
.footer nav {
display: flex;
gap: 16px;
}
.footer a {
color: var(--color-muted);
text-decoration: none;
}
.footer a:hover { color: var(--color-primary); }
/* Адаптив */
@media (max-width: 768px) {
.card--wide { grid-column: span 1; }
.footer { flex-direction: column; gap: 12px; }
.signup-form { flex-direction: column; align-items: center; }
.signup-form input { width: 100%; max-width: 400px; }
}
Чеклист перед деплоем
HTML:
☐ Семантические теги (header, main, footer, nav, section, article)
☐ meta viewport
☐ meta description (150-160 символов)
☐ Open Graph теги (og:title, og:description, og:image)
☐ lang="ru" на <html>
☐ alt на всех <img>
CSS:
☐ box-sizing: border-box на всех элементах
☐ CSS-переменные в :root
☐ Адаптив (mobile-first или min-width media queries)
☐ Hover-эффекты с transition
Безопасность:
☐ HTTPS (обязательно для продакшна)
☐ Формы используют POST для данных
☐ Внешние ссылки: target="_blank" rel="noopener noreferrer"
Производительность:
☐ Изображения оптимизированы (WebP, сжатие)
☐ CSS подключён в <head> (не блокирует рендеринг)
Деплой
Vercel (самый простой)
npm install -g vercel
cd course-landing
vercel
Vercel даст URL вида course-landing.vercel.app. HTTPS включён автоматически.
Netlify
Перетащи папку проекта в Netlify Drop (app.netlify.com/drop) - готово за 10 секунд.
GitHub Pages
git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/user/course-landing.git
git push -u origin main
Settings → Pages → Source: main branch → Save. Через минуту сайт на user.github.io/course-landing.
VPS (свой сервер)
scp -r course-landing/ user@server:/var/www/course-landing/
Nginx конфиг:
server {
listen 80;
server_name course.example.com;
root /var/www/course-landing;
index index.html;
location / {
try_files $uri $uri/ =404;
}
}
Lighthouse - проверка качества
Открой DevTools → Lighthouse → Generate report. Проверяет:
Performance - скорость загрузки (FCP, LCP, CLS)
Accessibility - доступность (alt, label, контраст)
Best Practices - лучшие практики (HTTPS, console errors)
SEO - мета-теги, заголовки, мобильность
Целься в 90+ по всем метрикам.
Мини-задание
- Создай лендинг с HTML-семантикой, Grid-карточками и формой
- Добавь CSS-переменные, hover-эффекты и адаптив для мобильных
- Добавь meta description и Open Graph теги
- Задеплой на Vercel, Netlify или GitHub Pages
- Запусти Lighthouse и добейся 90+ по всем метрикам
- Отправь ссылку другу - пусть откроет с телефона и скажет «норм»