Веб‑разработка — это огромный мир, где каждый элемент имеет своё место. Если вы начинаете свой путь с HTML и CSS, этот чек‑лист станет вашей картой сокровищ!
Я собрал ключевые идеи в удобный конспект-путеводитель, который можно сразу применять на практике. Каждый блок — это шаг к вашему первому сайту.
Поехали! 👇
📐 1. HTML — Скелет вашей страницы
✨ Что это?
HTML (HyperText Markup Language) — язык разметки. Он создаёт структуру: заголовки, абзацы, картинки, ссылки. Без HTML страница — просто сплошной текст.
🏗️ Базовая структура ВСЕГДА такая:
<!DOCTYPE html> <!-- Говорим браузеру: это HTML5 -->
<html lang="ru"> <!-- Корень документа, язык -->
<head>
<meta charset="UTF-8"> <!-- Кодировка для русских букв -->
<title>Мой первый сайт</title> <!-- Заголовок во вкладке -->
<link rel="stylesheet" href="style.css"> <!-- Подключаем стили -->
</head>
<body>
<!-- Здесь будет ВИДИМАЯ часть -->
<h1>Привет, мир!</h1>
</body>
</html>
📝 6 главных тегов, которые нужно знать сразу:
#1 Заголовки — <h1>Главный заголовок</h1> до <h6>
• Чем меньше цифра, тем важнее заголовок
• h1 должен быть один на странице
#2 Абзац — <p>Это текст абзаца.</p>
• Для основного текста
#3 Ссылка — <a href="https://ya.ru">Яндекс</a>
• Обязательный атрибут href — куда ведёт ссылка
#4 Картинка — <img src="cat.jpg" alt="Милый кот">
• src — путь к картинке
• alt — описание (обязательно!)
#5 Списки — <ul> (маркированный) или <ol> (нумерованный)
• Каждый пункт — <li>Пункт списка</li>
#6 Блок-контейнер — <div class="header">...</div>
• Основной строительный элемент
• Сам по себе не виден, нужен для группировки
🎨 2. CSS — Одеваем скелет в стильный костюм
🔄 Как подключить стили?
Создайте файл style.css и подключите в HTML:
<link rel="stylesheet" href="style.css">
✅ Зачем отдельный файл? Чище код, легче править, страница грузится быстрее.
🎨 Три способа задать цвет:
/* 1. HEX (самый популярный) */
color: #FF5733;
/* 2. RGB */
color: rgb(255, 87, 51);
/* 3. По названию */
color: tomato;
🔗 Ресурс для подбора: htmlcolorcodes.com/color-picker
🎯 Классы — ваше супероружие!
В HTML:
<p class="important-text">Важное сообщение!</p>
<button class="beautiful-button">Нажми меня</button>
В CSS (ставим точку перед именем класса):
css
.important-text {
color: red;
font-weight: bold;
}
.beautiful-button {
background-color: blue;
color: white;
border-radius: 10px;
padding: 15px;
}
✨ 7 самых нужных свойств для старта:
1. color: #333; — цвет текста
2. background-color: #f5f5f5; — цвет фона
3. font-size: 18px; — размер шрифта
4. font-family: Arial, sans-serif; — шрифт
5. text-align: center; — выравнивание текста
6. margin: 20px; — внешние отступы
7. padding: 10px; — внутренние отступы
🆓 Подключаем красивый шрифт с Google Fonts:
- Зайдите на fonts.google.com
- Выберите шрифт → нажмите Select style
- Скопируйте <link> или @import
- Используйте в CSS:
css
body {
font-family: 'Roboto', sans-serif;
}
🎬 3. Практика: Создаём «Список любимых фильмов»
📁 Структура проекта:
мой_проект/
├── index.html
├── style.css
└── images/
📄 Файл 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&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>🎬 Моя личная киноподборка</h1>
<p>Фильмы, которые изменили моё восприятие мира:</p>
<ul class="movie-list">
<li class="top">Побег из Шоушенка</li>
<li>Криминальное чтиво</li>
<li>Тёмный рыцарь</li>
<li>Начало</li>
<li class="top">Форрест Гамп</li>
</ul>
<p class="footer">Обновлено сегодня! 📅</p>
</div>
</body>
</html>
🎨 Файл style.css:
/* Подключаем шрифт */
body {
font-family: 'Montserrat', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
min-height: 100vh;
margin: 0;
padding: 20px;
}
/* Центрируем контент */
.container {
max-width: 600px;
margin: 40px auto;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 30px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}
/* Заголовок */
h1 {
text-align: center;
color: #FFD700;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
/* Список фильмов */
.movie-list {
list-style: none;
padding: 0;
}
.movie-list li {
background: rgba(255, 255, 255, 0.2);
margin: 10px 0;
padding: 15px;
border-radius: 10px;
border-left: 5px solid #4CAF50;
transition: all 0.3s ease;
}
.movie-list li:hover {
transform: translateX(10px);
background: rgba(255, 255, 255, 0.3);
}
/* Особое выделение для топ-фильмов */
.top {
border-left-color: #FF9800 !important;
font-weight: bold;
background: rgba(255, 152, 0, 0.2) !important;
}
.footer {
text-align: center;
margin-top: 30px;
opacity: 0.8;
}
🎉 Результат: современная страница с градиентным фоном, анимированным списком и выделенными любимыми фильмами. Просто скопируйте код и запустите в браузере!
📚 4. Куда двигаться дальше?
🎯 CSS-мастерство
• Flexbox и Grid для сложных макетов
• Анимации и переходы
• Адаптивная вёрстка (чтобы сайт работал на телефоне)
🔗 Ресурсы:
• MDN Web Docs — лучшая документация
• CSS-Tricks — готовые решения и статьи
• Frontend Mentor — реальные проекты для портфолио
⚡ JavaScript
• Оживление страницы
• Работа с формами
• Взаимодействие с сервером
👥 Сообщество
• HW School в Telegram — поддержка и обратная связь
• Stack Overflow — ответы на вопросы
💎 Золотые правила начинающего фронтендера
- 🗂️ Разделяй и властвуй — HTML, CSS и JS в разных файлах
- 🏷️ Именуй понятно — .movie-list лучше, чем .block1
- 🔍 Смотри на код других — используйте «Inspect Element» на любимых сайтах
- 🐛 Не бойтесь ошибок — консоль браузера (F12) ваш лучший друг
- ✨ Экспериментируйте — меняйте цвета, шрифты, отступы
Самый важный шаг — не просто прочитать, а СДЕЛАТЬ. Скопируйте код выше, запустите в браузере, поменяйте что-то своё!
🎯 P.S. Этот конспект — лишь первый шаг. Сохраните его себе, чтобы возвращаться к основам. Дальше — JavaScript и настоящая магия интерактивности!
А вы уже написали свою первую строку HTML? Покажите в комментариях, что получилось! 👇
#вебразработка #html #css #frontend #программирование #сайт #учеба #конспект