Знакомо: хотите начать в веб‑разработке, но тонны информации пугают? Курсы, статьи, видео... А результат где?
👉 Давайте сделаем иначе. Не будем читать 10 статей. Просто создадим красивую страницу прямо сейчас, а по пути разберем всё необходимое.
Я дам вам готовые файлы, которые вы скопируете → откроете в браузере → и увидите свой первый работающий проект. И заодно поймете главные принципы.
📦 Что у нас получится
Современная страница «Моя киноподборка» с:
• Градиентным фоном
• Стильным списком фильмов
• Анимацией при наведении
• Выделением любимых фильмов
• Полной адаптивностью
Выглядит солидно, а делается элементарно! ⬇️
📝 Шаг 1: Создаём файлы
Откройте Блокнот (или любой редактор) и создайте две папки:
ваша_папка/
├── index.html ← этот файл
└── style.css ← и этот
📄 Шаг 2: Копируем HTML (index.html)
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Моя киноколлекция</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<header>
<h1>🎬 Фильмы, которые меня вдохновляют</h1>
<p class="subtitle">Подборка, которая заставляет думать и чувствовать</p>
</header>
<main>
<ul class="movie-list">
<li class="top-movie">Побег из Шоушенка</li>
<li>Криминальное чтиво</li>
<li>Тёмный рыцарь</li>
<li>Начало</li>
<li class="top-movie">Форрест Гамп</li>
<li>Интерстеллар</li>
<li>Леон</li>
<li>Карты, деньги, два ствола</li>
</ul>
<div class="tip">
<p>💡 <strong>Совет:</strong> добавьте свои фильмы! Просто откройте файл index.html в редакторе и вставьте новые названия между тегами <li>...</li></p>
</div>
</main>
<footer>
<p>Обновлено сегодня • Сделано с ❤️ для начинающих разработчиков</p>
<p class="hashtag">#мойпервыйсайт</p>
</footer>
</div>
</body>
</html>
💾 Сохраните как index.html
🎨 Шаг 3: Копируем стили (style.css)
/* === Базовые настройки === */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
min-height: 100vh;
padding: 20px;
line-height: 1.6;
}
/* === Главный контейнер === */
.container {
max-width: 800px;
margin: 40px auto;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(12px);
border-radius: 24px;
padding: 40px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* === Шапка === */
header {
text-align: center;
margin-bottom: 40px;
padding-bottom: 25px;
border-bottom: 2px solid rgba(255, 255, 255, 0.15);
}
h1 {
font-size: 2.5rem;
color: #FFD700;
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
margin-bottom: 10px;
}
.subtitle {
font-size: 1.1rem;
opacity: 0.9;
font-weight: 300;
}
/* === Список фильмов === */
.movie-list {
list-style: none;
margin-bottom: 40px;
}
.movie-list li {
background: rgba(255, 255, 255, 0.12);
margin: 14px 0;
padding: 18px 24px;
border-radius: 14px;
border-left: 6px solid #4CAF50;
transition: all 0.35s ease;
font-size: 1.1rem;
display: flex;
align-items: center;
}
.movie-list li:hover {
transform: translateX(12px);
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}
/* === Топ-фильмы (особые) === */
.top-movie {
border-left-color: #FF9800 !important;
background: rgba(255, 152, 0, 0.18) !important;
font-weight: 600;
position: relative;
}
.top-movie::before {
content: "★";
color: #FFD700;
margin-right: 12px;
font-size: 1.2rem;
}
/* === Блок с советом === */
.tip {
background: rgba(41, 128, 185, 0.25);
border-radius: 16px;
padding: 22px;
margin: 30px 0;
border-left: 5px solid #2980b9;
}
.tip p {
margin: 0;
}
/* === Подвал === */
footer {
text-align: center;
padding-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.15);
opacity: 0.8;
font-size: 0.95rem;
}
.hashtag {
color: #81ecec;
font-weight: 600;
margin-top: 10px;
letter-spacing: 1px;
}
/* === Адаптивность для телефонов === */
@media (max-width: 768px) {
.container {
margin: 20px auto;
padding: 25px;
}
h1 {
font-size: 2rem;
}
.movie-list li {
padding: 16px 20px;
font-size: 1rem;
}
body {
padding: 15px;
}
}
💾 Сохраните как style.css
🚀 Шаг 4: Запускаем!
- Сохраните оба файла в одну папку
- Откройте файл index.html в браузере (просто кликните по нему дважды)
- Готово! Вы только что создали свой первый сайт
🔍 Что мы только что узнали (практически)
✨ HTML — это структура (теги <h1>, <ul>, <li>)
✨ CSS — это стили (цвета, шрифты, отступы)
✨ Классы — как давать имена элементам (.top-movie)
✨ Адаптивность — сайт сам подстраивается под телефон
✨ Анимации — плавные эффекты при наведении
Вы не просто скопировали код — вы создали работающий проект и увидели, как технологии работают вместе.
📈 Что делать дальше?
- Поэкспериментируйте — поменяйте цвета градиента в style.css (строки 10-11)
- Добавьте свой фильм — вставьте новую строку <li>Ваш фильм</li> в список
- Посмотрите «под капот» любых сайтов — нажмите F12 в браузере и исследуйте вкладку Elements
💡 Важная мысль
Большинство курсов заставляют вас месяц изучать теорию. Но результат — лучшая мотивация. Теперь у вас есть:
✓ Работающий проект в портфолио
✓ Понимание связи HTML и CSS
✓ Уверенность, что «это не так сложно»
✓ Основа для экспериментов
Весь код — ваш. Меняйте, ломайте, улучшайте!
🎯 P.S. Если этот подход вам понравился — ставьте плюс и пишите в комментариях, что у вас получилось! Сделали свой вариант? Скидывайте скриншоты — самые интересные опубликую в следующем посте.
Вопросы? Задавайте в комментариях, разберем вместе!
#вебразработка #html #css #первыйсайт #программирование #обучение #практика #код #frontend