HTML, CSS и JavaScript: кто за что отвечает на сайте

Одна карточка, три задачи

Представьте карточку школьного проекта: заголовок, описание и ссылка на результат. HTML задаёт, какие элементы в ней есть и что они означают. CSS определяет расположение, цвет и размеры. JavaScript добавляет поведение: например, фильтрует карточки после выбора темы.

Разделение помогает искать ошибки. Если текст отсутствует в документе, начните с HTML. Если текст есть, но не читается на фоне, проверьте CSS. Если кнопка должна менять содержимое и ничего не делает — исследуйте обработчик действия. Не всякая кнопка требует JavaScript: обычный переход лучше сделать ссылкой.

Начните с содержимого

Вставьте этот фрагмент в HTML-песочницу. Даже без оформления карточка должна объяснять, что это за работа. Название ссылки сообщает её назначение; «нажми здесь» без контекста менее понятно. article подходит для самостоятельного блока содержимого.

<article class="project">
  <h2>Карта звёзд</h2>
  <p>Мой первый проект о созвездиях.</p>
  <a href="/useful">Читать разборы проектов</a>
</article>

Добавьте оформление

CSS выбирает элемент по классу .project и задаёт его внешний вид. max-width ограничивает длину строк, padding создаёт воздух внутри карточки. Не ставьте фиксированную высоту только ради красивого скриншота: длинное описание может выйти за пределы блока.

.project {
  max-width: 32rem;
  padding: 24px;
  border: 1px solid #dce1eb;
  background: #f3f5fa;
  color: #121214;
}
.project a { color: #002fa7; }

Когда появляется JavaScript

Если достаточно прочитать карточку и перейти по ссылке, третьего слоя пока не нужно. Добавляйте его под конкретное действие: поиск по списку, переключение примера или проверку ответа. Сначала запишите ожидаемое поведение, включая пустой результат и повторное нажатие.

Не превращайте весь документ в картинку: тогда заголовки, ссылки и текст теряют свою обычную работу. И не прячьте критически важное описание за действием, которое может не загрузиться.

Проверка на телефоне и клавиатуре

Сузьте окно примерно до ширины телефона: текст должен переноситься, а карточка — помещаться. Нажмите Tab и найдите ссылку по видимой рамке фокуса. Увеличьте масштаб страницы: содержимое должно оставаться доступным.

Практика: замените название и описание на свой проект, затем сделайте длинное название из десяти слов. Если оно ломает карточку, исправьте размеры и перенос, а не сокращайте только тестовый текст. После этого соберите три карточки и переходите к выбору Flexbox или Grid.