Тело и одежда твоего сайта Module 1 · Foundations
Если JS — это мозги, то HTML и CSS — это тело и одежда твоего сайта. Без них скрипты — просто строчки в пустоте. Погнали делать интерфейсы, которые выглядят на миллион долларов.
<!DOCTYPE html>
<html lang="ru">
<header>
<h1>WAIproger</h1>
<nav>
<a href="/">Home</a>
</nav>
</header>
<main>
<section>
<h2>Твой сайт 🚀</h2>
</section>
</main>
</html>Скелет интернета — Основы HTML
Три урока, которые покажут как браузер читает разметку, как теги получают суперсилу через атрибуты и как навести порядок в контенте через списки и таблицы.
HTML (HyperText Markup Language) — это не язык программирования, это язык разметки. Представь, что ты строишь дом: HTML — это кирпичи и балки.
<!DOCTYPE html> — это сигнал браузеру:
«Эй, я современный сайт!». Без него браузер падает в режим совместимости с 1999 годом 😅
<div> везде — <header>, <main>, <footer>. Google это обожает 🚀<nav> вместо <div class="nav"> — и Google тебя замечает.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>WAIproger — Главная</title>
</head>
<body>
<header>
<h1>WAIproger</h1>
<p>Web. AI. Intelligence.</p>
</header>
<main>
<section>
<h2>О нашем проекте</h2>
<p>Мы учим коду и нейросетям.</p>
</section>
</main>
</body>
</html>
Просто текст — это скучно. Нам нужны связи и визуал. Теги могут иметь «настройки» — атрибуты. Они живут внутри открывающего тега.
href — куда лететь при клике.target="_blank" — открыть в новом окне.
src — путь к картинке.alt — для поисковиков и accessibility.
alt у картинок.
Это и SEO, и доступность. Google штрафует сайты без alt-текстов.
<nav>
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="courses.html">Курсы</a></li>
<li>
<a href="https://t.me/waiproger"
target="_blank">Наш Telegram</a>
</li>
</ul>
</nav>
<img src="logo.png"
alt="Логотип WAIproger"
width="200">
Когда данных много (например, план уроков) — их нужно структурировать. HTML предлагает два вида списков и таблицы для табличных данных.
<tr>, ячейки — <td>.<table> только для реальных данных!
<h3>Программа курса JS:</h3>
<ol>
<li>Основы и переменные</li>
<li>Циклы и функции</li>
<li>DOM и События</li>
<li>AI и API</li>
</ol>
Стиль и Характер — Погружение в CSS
HTML построил дом. CSS делает его красивым. Три урока — от первого цвета до fixed-хедера, который держится сверху, пока пользователь скроллит.
CSS (Cascading Style Sheets) говорит браузеру, как именно должны выглядеть твои кирпичи HTML. Чтобы покрасить заголовок — надо его выбрать (селектор) и дать команду (свойство).
h1 { color: green; } — работает для всех <h1> на странице сразу..btn { background: black; } — самый частый способ. Класс можно повесить на любой тег.!important — это костыль. Если используешь его часто, значит архитектура CSS сломана. Классы решают большинство задач.
body {
background-color: #1a1a1a;
color: white;
font-family: Arial, sans-serif;
}
h1 {
color: #00FF00; /* Наш изумрудный WAIproger */
text-transform: uppercase;
}
Всё в вебе — это прямоугольники. Даже если картинка круглая — она лежит в квадратной коробке. Box Model — это как устроена эта коробка.
width и height.2px solid red — толщина, стиль, цвет.width не включает padding и border.
Поэтому всегда добавляй box-sizing: border-box — тогда размер считается честно.
.buy-button {
padding: 15px 30px;
background-color: #00FF00;
color: black;
border: 2px solid white;
border-radius: 5px; /* Скругление углов */
cursor: pointer;
margin-top: 20px;
}
Как закрепить меню сверху или наложить текст на картинку?
Свойство position вырывает элемент из обычного потока и
даёт тебе полный контроль над координатами.
top/left не работают.relative-родителю.absolute нужен relative-родитель.
Без него элемент прилипает к <body>. Почти всегда пишут:
.parent { position: relative; }
header {
position: fixed;
top: 0;
width: 100%;
background: rgba(0, 0, 0, 0.8); /* Полупрозрачный чёрный */
padding: 10px;
z-index: 1000; /* Поверх всего остального */
}
/* Чтобы контент не прятался под хедером */
body {
padding-top: 60px;
}
Современная верстка — Flexbox и Grid
Забудь про float и таблицы. Flexbox и Grid — это два супероружия современного верстальщика. Плюс адаптивность под любой экран и финальный аккорд — формы.
До Flexbox верстка была адом — float, clearfix, хаки.
Теперь расставить элементы в ряд — дело одной строки: display: flex.
Пишешь родителю — и все дети встают в ряд автоматически.
wrap — элементы переносятся на новую строку если не влезают. Спасает на мобилках..courses-container {
display: flex;
justify-content: space-around;
flex-wrap: wrap; /* На мобилках падают вниз */
}
.course-card {
width: 300px;
background: #333;
padding: 20px;
}
Если Flexbox хорош для рядов, то Grid — для целых макетов. Ты буквально рисуешь сетку: «Тут будет 3 колонки, первая в два раза шире остальных».
1fr 2fr — первая колонка занимает 1/3 пространства, вторая 2/3. Гибко!repeat(3, 1fr) — три равные колонки. Короче чем писать 1fr 1fr 1fr..benefits {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px; /* Расстояние между ячейками */
}
Твой сайт должен идеально выглядеть и на 27-дюймовом мониторе, и на старом iPhone. Media Queries говорят браузеру: «если ширина меньше X — применяй эти стили».
min-width добавляешь для больших экранов.
Это лучший подход в 2026 — 60%+ трафика идёт с мобил.
/* Стили по умолчанию — для десктопа */
.courses-container {
display: flex;
gap: 20px;
}
/* Телефон — всё в одну колонку */
@media (max-width: 600px) {
.courses-container {
flex-direction: column;
}
h1 {
font-size: 24px;
}
}
Форма — это мост между пользователем и сервером. Без форм нет регистраций, платежей, обратной связи. HTML + CSS дают тебе полный контроль над их внешним видом.
text, email, password, checkbox.:hover — мышка навелась. :focus — поле активно (клик / Tab).<!-- HTML -->
<form class="contact-form">
<label for="name">Ваше имя:</label>
<input type="text" id="name"
placeholder="Арман">
<label for="email">Email:</label>
<input type="email" id="email"
required>
<button type="submit" class="buy-button">
Записаться
</button>
</form>
/* CSS */
.contact-form input {
display: block;
width: 100%;
margin-bottom: 15px;
padding: 10px;
border-radius: 4px;
border: 1px solid #00FF00;
}
.buy-button:hover {
background-color: white;
color: #00FF00;
transition: 0.3s; /* Плавный переход */
}
Поздравляю! Ты прошёл путь
W-разработчика
Теперь у тебя есть всё:
WAIproger официально укомплектован знаниями 🚀
Весь курс пройден?
Ты прошёл весь путь от <!DOCTYPE> до display: grid.
Теперь ты официально верстальщик WAIproger! 🏆
HTML & CSS курс — 100% Завершён