HTML и CSS: Основы создания современных веб-сайтов

Этот курс предназначен для начинающих разработчиков, желающих освоить языки разметки и стилизации с нуля. Вы научитесь создавать структуру веб-страниц, оформлять их внешний вид и адаптировать под различные устройства.

1. Основы веб-разработки: структура HTML-документа и работа с основными тегами

Основы веб-разработки: структура HTML-документа и работа с основными тегами

Добро пожаловать в курс «HTML и CSS: Основы создания современных веб-сайтов»! Вы находитесь в самом начале увлекательного пути. Сегодня мы заложим фундамент ваших знаний, подобно тому, как строители закладывают фундамент дома. Мы разберемся, из чего состоит веб-страница, как браузер понимает, что нужно отобразить, и напишем ваш первый код.

Как работает веб: краткий экскурс

Прежде чем погружаться в код, давайте поймем общую картину. Когда вы открываете браузер и вводите адрес сайта, происходит магия общения между клиентом (вашим компьютером) и сервером (удаленным компьютером, где хранятся файлы сайта).

Сервер отправляет вам набор файлов. Браузер получает эти файлы и превращает их в красивую картинку, которую вы видите на экране. Основные файлы, которые приходят с сервера, — это HTML, CSS и JavaScript.

!HTML — это структура, CSS — стиль, JavaScript — поведение.

Чтобы понять роль каждого компонента, представим человека:

* HTML (HyperText Markup Language) — это скелет. Он определяет структуру: где голова, где руки, где ноги. Без него мы бы были просто бесформенной массой. * CSS (Cascading Style Sheets) — это кожа и одежда. Он определяет внешний вид: цвет глаз, прическу, стиль одежды. Скелет без кожи выглядит пугающе, а сайт на чистом HTML выглядит скучно. * JavaScript — это мышцы. Он заставляет нас двигаться, реагировать на прикосновения и взаимодействовать с миром.

В этой статье мы сосредоточимся исключительно на скелете — на HTML.

Что такое HTML и как выглядят теги

HTML — это язык гипертекстовой разметки. Это не язык программирования в привычном смысле (здесь нет переменных или циклов, как в Python или C++). Это язык разметки, который говорит браузеру: «Вот это — заголовок, вот это — абзац текста, а вот это — картинка».

Основа HTML — это теги. Тег — это команда, заключенная в угловые скобки < и >.

Анатомия элемента

Большинство элементов на странице состоят из открывающего тега, содержимого и закрывающего тега.

Разберем этот пример:

  • <p> — открывающий тег. Он говорит: «Здесь начинается абзац».
  • Привет, мир! — содержимое. Текст, который увидит пользователь.
  • </p> — закрывающий тег. Обратите внимание на слэш /. Он говорит: «Здесь абзац заканчивается».

    • Существуют также одиночные (пустые) теги, которым не нужно ничего внутри себя содержать, и поэтому их не нужно закрывать. Например, тег переноса строки <br> или тег картинки <img>.

    Структура HTML-документа

    Любой правильно написанный HTML-файл имеет строгую структуру. Если вы напишете текст просто так, браузер, скорее всего, его отобразит, но это будет считаться ошибкой. Правильный документ выглядит как «матрешка» из вложенных тегов.

    Вот шаблон (или «бойлерплейт») любого HTML-документа:

    Давайте разберем каждую строчку, так как это критически важно для понимания.

    1. <!DOCTYPE html>

    Это не совсем тег, это инструкция для браузера. Она говорит: «Я использую современный стандарт HTML5». Без этой строчки браузер может включить «режим совместимости» со старыми сайтами из 90-х, и ваша верстка может сломаться.

    2. <html>

    Это корневой элемент. Весь ваш код должен находиться внутри него (кроме DOCTYPE). Атрибут lang="ru" подсказывает браузерам и поисковикам, что основной язык страницы — русский.

    3. <head> (Голова)

    Это служебная часть документа. Всё, что находится внутри <head>, не отображается на самой странице (кроме заголовка вкладки). Здесь хранится информация для браузера и поисковых роботов.

    * <meta charset="UTF-8">: Критически важная строка. Она устанавливает кодировку UTF-8, которая поддерживает все языки мира, включая кириллицу и эмодзи. Без неё вместо текста вы можете увидеть «кракозябры». * <title>: Заголовок, который отображается на вкладке браузера.

    4. <body> (Тело)

    Это видимая часть документа. Всё, что вы хотите показать пользователю — текст, картинки, видео, кнопки — пишется строго внутри тега <body>.

    !Древовидная структура HTML-документа.

    Основные теги для разметки контента

    Теперь, когда у нас есть структура, давайте наполним <body> содержимым.

    Заголовки: от <h1> до <h6>

    Заголовки важны не только для размера шрифта, но и для структуры документа (это очень любят поисковики вроде Google и Яндекс).

    * <h1> — Самый главный заголовок. Обычно используется один раз на странице (например, название статьи или имя товара). * <h2> — Заголовок раздела. * <h3> — Подзаголовок внутри раздела. * ... и так далее до <h6>.

    Абзацы: <p>

    Для обычного текста используется тег <p> (paragraph). Браузеры автоматически добавляют отступы сверху и снизу от абзацев, чтобы текст было удобно читать.

    Списки: <ul>, <ol> и <li>

    Информацию часто удобно представлять в виде списков. В HTML их два основных вида:

  • Маркированный список (<ul> — unordered list). Элементы помечаются точками (буллитами).
  • Нумерованный список (<ol> — ordered list). Элементы помечаются цифрами (1, 2, 3...).

    • Внутри обоих типов списков каждый пункт должен быть обернут в тег <li> (list item).

    Атрибуты: делаем теги умнее

    Теги могут иметь атрибуты — дополнительные настройки, которые пишутся внутри открывающего тега. Атрибут состоит из имени и значения: имя="значение".

    Ссылки: <a>

    Чтобы создать ссылку, используется тег <a> (anchor — якорь). Но просто тега <a> недостаточно, браузер должен знать, куда вести пользователя. Для этого нужен атрибут href.

    * href — адрес страницы, куда мы переходим. * Текст между <a> и </a> — это то, на что можно кликнуть.

    Если вы хотите, чтобы ссылка открылась в новой вкладке, добавьте атрибут target="_blank".

    Изображения: <img>

    Для вставки картинок используется одиночный тег <img>. Ему нужны два важных атрибута:

  • src (source) — путь к файлу картинки (это может быть ссылка из интернета или файл на вашем компьютере).
  • alt (alternative text) — описание картинки.

    • > Важно: Всегда заполняйте атрибут alt. Если картинка не загрузится (например, из-за плохого интернета), пользователь увидит этот текст. Кроме того, этот текст читают скринридеры — программы для незрячих людей.

    Вложенность тегов

    Очень важно соблюдать правильную вложенность. Правило простое: кто последним открылся, тот первым закрывается.

    Правильно:

    Неправильно:

    Во втором примере тег <strong> закрывается после того, как закрылся его родитель <p>. Это грубая ошибка, которая может «сломать» верстку.

    Заключение

    Сегодня мы изучили анатомию HTML-документа. Вы узнали, что: * HTML — это каркас страницы. * Документ состоит из head (служебной информации) и body (видимого контента). * Теги бывают парными (<p>...</p>) и одиночными (<img>). * Атрибуты расширяют возможности тегов (например, href для ссылок).

    В следующей статье мы начнем украшать наш «скелет» с помощью CSS, добавляя цвета, шрифты и отступы.

    2. Введение в CSS: селекторы, каскадность, наследование и блочная модель

    Введение в CSS: селекторы, каскадность, наследование и блочная модель

    В предыдущей статье мы создали «скелет» нашей страницы с помощью HTML. Но давайте будем честны: пока что он выглядит довольно блекло. Черный текст на белом фоне, стандартные шрифты, всё выстроено в одну колонку. Настало время вдохнуть в этот скелет жизнь, добавить красок и стиля. Для этого нам понадобится CSS.

    Что такое CSS?

    CSS (Cascading Style Sheets) — это каскадные таблицы стилей. Если HTML отвечает за то, что находится на странице (структура), то CSS отвечает за то, как это выглядит (оформление).

    Представьте, что вы строите дом. HTML — это кирпичи, балки и перекрытия. CSS — это обои, краска, расстановка мебели, освещение и ландшафтный дизайн. Без CSS интернет был бы функциональным, но очень скучным местом.

    Синтаксис CSS

    Правило CSS состоит из двух основных частей: селектора и блока объявлений.

    Разберем этот код:

  • p — это селектор. Он указывает браузеру, какой именно элемент мы хотим стилизовать (в данном случае — все абзацы).
  • Фигурные скобки { ... } ограничивают блок объявлений.
  • color: red; — это объявление. Оно состоит из свойства (color) и значения (red). Обратите внимание на двоеточие после свойства и точку с запятой после значения.

    • > Важно: Всегда ставьте точку с запятой ; в конце каждой строки со свойством. Если вы забудете её поставить, браузер может не понять следующую строку, и ваши стили сломаются.

    Как подключить CSS к HTML

    Существует три способа добавить стили на страницу, но профессионалы используют в основном один.

  • Инлайновые стили (Inline): Пишутся прямо в HTML-теге через атрибут style.
    • Пример:* <p style="color: red;">...</p> Вердикт:* ~~Плохая практика~~. Это захламляет HTML и делает код неудобным для поддержки.
  • Внутренние стили (Internal): Пишутся в head внутри тега <style>.
    • Вердикт:* Подходит для маленьких одностраничных сайтов.
  • Внешние стили (External): Стили выносятся в отдельный файл с расширением .css (обычно style.css), который подключается к HTML.
    • Вердикт:* Золотой стандарт. Вы разделяете структуру и оформление.

    Для подключения внешнего файла мы используем тег <link> внутри секции <head>:

    Селекторы: как найти нужный элемент

    Чтобы покрасить стену, нужно сначала указать маляру, какую именно стену красить. Селекторы — это ваш палец, указывающий на элементы.

    1. Селектор по тегу

    Выбирает все элементы с указанным именем тега.

    Этот код сделает все заголовки первого уровня на странице синими.

    2. Селектор по классу

    Это самый часто используемый селектор. Классы позволяют группировать элементы. В CSS имя класса начинается с точки ., а в HTML мы используем атрибут class.

    HTML:

    CSS:

    Только элементы с классом highlight получат желтый фон.

    3. Селектор по ID

    Идентификатор (id) должен быть уникальным на странице. Элемент с конкретным id может быть только один. В CSS он обозначается решеткой #.

    HTML:

    CSS:

    4. Универсальный селектор

    Звездочка * выбирает вообще все элементы на странице. Часто используется для сброса стандартных отступов браузера.

    Каскадность: кто здесь главный?

    Почему CSS называется Каскадными таблицами стилей? Потому что правила применяются сверху вниз, как водопад, и могут перекрывать друг друга.

    Представьте ситуацию: у вас есть тег <p class="text" id="unique">.

    Какого цвета будет текст? Красного, зеленого или синего? Здесь вступает в игру понятие специфичности (веса) селектора.

    Браузер начисляет баллы каждому правилу:

  • ID — самый тяжелый (условно 100 баллов).
  • Класс — средний вес (условно 10 баллов).
  • Тег — самый легкий (условно 1 балл).

    • В нашем примере победит #unique, и текст будет красным, потому что ID «сильнее» класса и тега. Если веса равны (например, два класса), побеждает тот, который написан в коде ниже.

    Наследование

    Некоторые свойства CSS передаются от родителей к детям. Это называется наследованием.

    Если вы зададите font-family: Arial; для тега <body>, то все параграфы, заголовки и списки внутри <body> тоже станут отображаться шрифтом Arial. Вам не нужно прописывать это для каждого элемента отдельно.

    Однако наследуются не все свойства. Например, свойства, связанные с размерами и отступами (width, margin, padding, border), обычно не наследуются. Было бы странно, если бы вы задали рамку для всего сайта, и каждый маленький кусочек текста внутри тоже получил бы свою рамку.

    Блочная модель (Box Model)

    Это, пожалуй, самая важная концепция для понимания того, как строится макет (layout) веб-страницы.

    В глазах браузера каждый элемент HTML — это прямоугольный ящик (box). Даже если он выглядит круглым или имеет форму текста, он все равно живет внутри невидимого прямоугольника.

    Этот прямоугольник состоит из четырех слоев (изнутри наружу):

  • Content (Контент): Собственно текст, картинка или видео.
  • Padding (Внутренний отступ): Пространство между контентом и границей. Представьте это как наполнитель в коробке, защищающий товар.
  • Border (Граница): Рамка вокруг элемента.
  • Margin (Внешний отступ): Пространство между границей этого элемента и соседними элементами. Это «личное пространство» элемента.

    • !Визуализация блочной модели: контент, внутренний отступ, граница и внешний отступ.

    Математика блочной модели

    Когда вы задаете элементу ширину width: 200px, новички часто думают, что элемент займет на экране ровно 200 пикселей. Но это не всегда так. В стандартной модели браузера общая ширина элемента рассчитывается по формуле:

    Где: * — общая ширина, которую элемент занимает на странице. * — ширина контента (то, что вы задали в свойстве width). * и — левый и правый внутренние отступы (padding). * и — толщина левой и правой границы (border). * и — левый и правый внешние отступы (margin).

    Пример: Вы написали такой код:

    Давайте посчитаем реальную ширину видимой части элемента (без margin):

    Элемент займет 250 пикселей, а не 200! Это часто приводит к тому, что блоки не помещаются в одну строку и «съезжают» вниз.

    Решение проблемы: box-sizing: border-box

    Чтобы избежать сложной математики и головной боли, современные разработчики используют свойство box-sizing: border-box.

    Когда вы используете это свойство, width начинает включать в себя и контент, и padding, и border. Браузер сам автоматически уменьшит место для контента, чтобы общая ширина осталась такой, как вы указали.

    Это настолько удобно, что данный код часто пишут в самом начале CSS-файла для всех элементов сразу.

    Основные свойства для работы с блочной моделью

    Вот краткий список свойств, с которыми вы будете работать постоянно:

    * width / height: Ширина и высота. * padding: Внутренний отступ. Можно задать одно значение для всех сторон (padding: 10px) или для каждой отдельно (padding-top, padding-left и т.д.). * margin: Внешний отступ. Работает аналогично padding. Уникальная фишка: margin: 0 auto; позволяет отцентровать блок по горизонтали. * border: Граница. Обычно пишется сокращенно: border: 1px solid black; (толщина, стиль, цвет).

    Заключение

    Сегодня мы познакомились с CSS — языком, который делает веб красивым. Мы разобрали: * Как писать CSS-правила (селектор + свойства). * Как выбирать элементы с помощью классов и ID. * Что такое каскадность и специфичность. * Как работает блочная модель (Box Model) и почему важно учитывать отступы.

    В следующей статье мы углубимся в работу с текстом и цветом, научимся подключать красивые шрифты и использовать цветовые палитры.

    3. Современная верстка: позиционирование элементов с помощью технологий Flexbox и CSS Grid

    Современная верстка: позиционирование элементов с помощью технологий Flexbox и CSS Grid

    В предыдущей статье мы разобрали блочную модель (Box Model). Мы узнали, что каждый элемент — это прямоугольник с отступами и границами. Это знание фундаментально, но когда дело доходит до создания полноценного макета сайта, одной блочной модели недостаточно.

    Раньше, чтобы расположить элементы в ряд (например, пункты меню) или создать сетку товаров, разработчикам приходилось использовать «костыли»: таблицы, обтекания (float) и позиционирование (position). Это было сложно, ненадежно и часто ломалось.

    К счастью, современный CSS предлагает два мощных инструмента, созданных специально для управления макетом: Flexbox и CSS Grid. Сегодня мы научимся ими управлять.

    Flexbox: Одномерная магия

    Flexbox (Flexible Box Layout) — это модуль макета гибкого контейнера. Его главная суперсила — умение управлять элементами в одном измерении: либо в строку, либо в колонку. Он идеально подходит для выравнивания элементов внутри контейнера и распределения свободного места между ними.

    Основная концепция: Оси

    Чтобы понять Flexbox, нужно мыслить осями. У нас есть две оси:

  • Главная ось (Main Axis): Направление, в котором выкладываются элементы (по умолчанию — слева направо).
  • Поперечная ось (Cross Axis): Перпендикулярна главной оси (по умолчанию — сверху вниз).

    • !Схематичное изображение осей во Flexbox-контейнере.

    Как включить Flexbox?

    Магия начинается с родительского элемента. Достаточно задать ему одно свойство, и все его прямые потомки становятся «флекс-элементами».

    Как только вы напишете этот код, все дочерние элементы .container выстроятся в один ряд, даже если это были блочные элементы (как <div>), которые обычно занимают всю ширину.

    Управление направлением: flex-direction

    Это свойство определяет направление Главной оси.

    * row (по умолчанию): элементы идут в строку слева направо. * column: элементы идут в колонку сверху вниз. * row-reverse: строка, но справа налево. * column-reverse: колонка, но снизу вверх.

    Выравнивание по Главной оси: justify-content

    Это свойство отвечает за то, как элементы и свободное пространство распределяются вдоль главной оси (обычно по горизонтали).

    * flex-start: прижать к началу (слева). * flex-end: прижать к концу (справа). * center: выровнять по центру. space-between: крайние элементы прижимаются к краям, свободное место равномерно распределяется между* элементами. * space-around: свободное место распределяется вокруг элементов (отступы с краев будут меньше, чем между элементами).

    Выравнивание по Поперечной оси: align-items

    Это свойство управляет выравниванием перпендикулярно главной оси (обычно по вертикали).

    * stretch (по умолчанию): элементы растягиваются, чтобы заполнить контейнер по высоте. * flex-start: прижать к верху. * flex-end: прижать к низу. * center: выровнять по центру (идеально для вертикального центрирования!).

    Пример: Центрирование элемента

    Раньше отцентровать блок по вертикали и горизонтали было настоящей головной болью. С Flexbox это делается в три строки:

    CSS Grid: Двумерная сила

    Если Flexbox — это король линий, то CSS Grid — это император сеток. Grid Layout позволяет управлять расположением элементов одновременно в двух измерениях: и по строкам, и по столбцам.

    Grid идеально подходит для создания общего каркаса страницы (шапка, боковая панель, контент, подвал) или сложных галерей изображений.

    Создание сетки

    Как и в случае с Flexbox, мы начинаем с контейнера:

    Но просто включить Grid недостаточно. Нам нужно определить структуру сетки: сколько будет колонок и рядов.

    Этот код создаст сетку, в которой 3 колонки по 200 пикселей и 2 ряда по 100 пикселей.

    Единица измерения fr

    В Grid появилась новая единица измерения — fr (fraction — доля/фрагмент). Она позволяет гибко распределять свободное пространство.

    Представьте, что у нас есть контейнер шириной . Мы хотим разделить его на три колонки: две одинаковые и одну в два раза шире. Мы напишем: grid-template-columns: 1fr 2fr 1fr;.

    Математически ширина одной доли () рассчитывается так:

    Где: * — ширина одной доли (1fr) в пикселях. * — доступная ширина контейнера. * — сумма всех долей (в нашем примере ).

    Если контейнер имеет ширину 1000px, то:

    Где: * — это размер 1fr в пикселях. * — ширина контейнера. * — общее количество долей.

    Таким образом, колонки будут иметь ширину: 250px, 500px и 250px.

    Отступы: gap

    Вам не нужно использовать margin для создания отступов между ячейками сетки. Для этого есть специальное свойство gap.

    Это создаст «дорожки» пустого пространства шириной 20px между всеми колонками и рядами.

    Размещение элементов по областям

    Одна из самых мощных функций Grid — это grid-template-areas. Вы можете дать имена своим элементам и нарисовать макет прямо в CSS коде текстом.

    HTML:

    CSS:

    Посмотрите на значение grid-template-areas. Мы буквально нарисовали структуру сайта! Шапка занимает всю ширину сверху, меню слева, контент справа (занимает 2 части), и подвал внизу.

    !Визуализация макета страницы, созданного с помощью Grid Areas.

    Flexbox или Grid: что выбрать?

    Новички часто путаются, когда использовать Flexbox, а когда Grid. Вот простое правило:

  • Используйте Flexbox, когда вам нужно расположить элементы в одном направлении (в ряд или в колонку). Примеры: меню навигации, список тегов, карточки товаров в одну строку, выравнивание иконки и текста внутри кнопки.
  • Используйте Grid, когда вам нужно контролировать расположение элементов в двух направлениях (строки и колонки одновременно) или когда вам важна строгая привязка к сетке. Примеры: общий макет страницы, сложная фотогалерея, расписание.

    • > Часто эти технологии работают вместе. Вы можете использовать Grid для создания общего каркаса страницы, а внутри ячейки Grid (например, в шапке) использовать Flexbox для выравнивания логотипа и меню.

    Адаптивность без медиа-запросов

    И Flexbox, и Grid позволяют создавать адаптивные интерфейсы, которые подстраиваются под размер экрана.

    Во Flexbox свойство flex-wrap: wrap; разрешает элементам переноситься на новую строку, если им не хватает места.

    В Grid есть магическая комбинация repeat(auto-fit, minmax(...)), которая автоматически создает столько колонок, сколько поместится на экране.

    Этот код создаст идеальную галерею, которая будет выглядеть хорошо и на телефоне (1 колонка), и на планшете (3 колонки), и на широком мониторе (5+ колонок) без единого медиа-запроса.

    Заключение

    Мы прошли путь от простых текстовых документов до сложных макетов. Теперь в вашем арсенале есть: * Flexbox для выравнивания и распределения элементов в рядах или колонках. * CSS Grid для создания глобальной сетки и сложных двумерных структур.

    Эти технологии — стандарт современной веб-разработки. Практикуйтесь в их использовании, экспериментируйте со свойствами, и вы сможете сверстать любой дизайн, который только сможете вообразить.

    4. Адаптивный дизайн: использование медиа-запросов для мобильных устройств и планшетов

    Адаптивный дизайн: использование медиа-запросов для мобильных устройств и планшетов

    В предыдущих статьях мы проделали большой путь. Мы научились создавать структуру с помощью HTML, стилизовать элементы через CSS и даже строить сложные макеты, используя Flexbox и Grid. Однако, если вы откроете созданные нами страницы на смартфоне, результат может вас разочаровать. Текст может оказаться слишком мелким, колонки — слишком узкими, а горизонтальная прокрутка будет раздражать.

    Сегодня мы решим эту проблему. Мы поговорим об адаптивном дизайне (Responsive Web Design) — подходе, который позволяет веб-страницам выглядеть великолепно на любом устройстве: от огромного монитора дизайнера до старенького смартфона.

    Что такое адаптивный дизайн?

    Раньше, в «нулевых», разработчики часто создавали две разные версии сайта: одну для компьютеров (например, site.com) и отдельную для телефонов (m.site.com). Это было неудобно: приходилось поддерживать две кодовые базы, а контент часто рассинхронизировался.

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

    Ключевым инструментом для этой магии являются медиа-запросы (Media Queries).

    Подготовка: Тег Viewport

    Прежде чем писать CSS, нам нужно добавить одну критически важную строку в HTML. Без неё адаптивность работать не будет, даже если вы напишете идеальный код.

    Мобильные браузеры по умолчанию пытаются «схитрить». Они открывают сайт так, будто ширина экрана составляет 980 пикселей (стандартный монитор прошлого), а затем просто уменьшают масштаб, чтобы всё поместилось на экране телефона. В итоге пользователь видит крошечный текст, который нужно приближать пальцами.

    Чтобы запретить это поведение и сказать браузеру: «Я сам буду управлять размерами», нужно добавить мета-тег viewport в секцию <head>:

    Разберем, что здесь написано: * width=device-width: Ширина области просмотра должна быть равна реальной ширине устройства. * initial-scale=1.0: Начальный масштаб равен 100% (без зума).

    Медиа-запросы: @media

    Медиа-запрос — это логическое условие в CSS. Оно говорит браузеру: «Применяй эти стили только если условие выполняется».

    Синтаксис выглядит так:

    Основные условия

    Чаще всего мы проверяем ширину экрана (width). Для этого используются два параметра:

  • max-width (максимальная ширина): Стили применяются, если экран меньше или равен указанному значению.
  • min-width (минимальная ширина): Стили применяются, если экран больше или равен указанному значению.

    • Пример: Представьте, что у нас есть заголовок, который обычно черный. Но мы хотим, чтобы на телефонах (шириной до 600px) он становился красным.

    Если вы откроете этот код на компьютере, заголовок будет черным. Если начнете уменьшать окно браузера, в момент пересечения отметки 600px заголовок мгновенно покраснеет.

    Брейкпоинты (Контрольные точки)

    Ширины экранов, на которых дизайн меняется, называются брейкпоинтами (breakpoints). Не существует единственно верного стандарта, так как устройств тысячи, но есть общепринятые диапазоны:

    * 320px — 480px: Мобильные телефоны. * 481px — 768px: Планшеты и большие телефоны в горизонтальной ориентации. * 769px — 1024px: Ноутбуки и планшеты в горизонтали. * 1025px — 1200px: Десктопы. * 1201px и более: Большие экраны TV и широкоформатные мониторы.

    !Визуализация популярных брейкпоинтов для различных типов устройств.

    Стратегии верстки: Desktop First vs Mobile First

    Существует два подхода к написанию медиа-запросов.

    1. Desktop First (Сначала десктоп)

    Вы сначала верстаете сайт для большого монитора, а затем с помощью max-width «упрощаете» его для планшетов и телефонов, убирая лишнее и перестраивая колонки.

    2. Mobile First (Сначала мобильные)

    Это современный стандарт. Вы сначала пишете стили для самого маленького экрана (телефон), а затем с помощью min-width добавляете сложности для планшетов и ПК.

    Почему это лучше? Потому что на мобильных устройствах код должен быть максимально легким и быстрым. Начиная с мобильной версии, вы фокусируетесь на главном контенте.

    Адаптация макетов на Flexbox и Grid

    Самое мощное применение медиа-запросов — это изменение раскладки страницы (Layout). Вспомним наши знания о Flexbox и Grid.

    Flexbox: Из строки в колонку

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

    HTML:

    CSS (Mobile First):

    Grid: Изменение количества колонок

    Допустим, у нас есть галерея товаров. На телефоне мы хотим 1 товар в ряд, на планшете — 2, а на компьютере — 3.

    CSS (Mobile First):

    Обратите внимание, как элегантно это выглядит. Нам не нужно менять ширину каждого элемента, мы просто меняем настройки сетки контейнера.

    Резиновые картинки

    Еще одна частая проблема: картинка имеет фиксированную ширину (например, 800px) и «вылезает» за пределы экрана телефона, создавая горизонтальную прокрутку.

    Решение очень простое и должно быть в каждом вашем проекте:

    * max-width: 100%: Картинка никогда не станет шире своего родительского контейнера. Если контейнер сужается, картинка сужается вместе с ним. * height: auto: Высота меняется пропорционально ширине, чтобы картинка не сплющилась и не растянулась.

    Типографика и удобство нажатия

    Адаптивность — это не только про то, чтобы блоки влезали в экран. Это еще и про удобство использования (User Experience).

  • Размер шрифта: Читать мелкий текст с телефона неудобно. Иногда имеет смысл увеличить шрифт для мобильных устройств или, наоборот, уменьшить огромные заголовки, которые занимают весь экран телефона.
  • Кнопки и ссылки: На компьютере у нас есть точный курсор мыши. На телефоне — толстый палец. Убедитесь, что кнопки достаточно большие, а ссылки в тексте не слипаются.

    • Логические операторы

    Иногда условий нужно несколько. Например, мы хотим применить стиль только для планшетов (от 600px до 900px), но не для ПК.

    Для этого используется ключевое слово and:

    Заключение

    Адаптивный дизайн — это стандарт индустрии. Сегодня поисковые системы (Google, Яндекс) понижают в выдаче сайты, которые не оптимизированы для мобильных устройств.

    Мы изучили: * Зачем нужен тег viewport. * Как работают медиа-запросы @media. * Разницу между min-width (Mobile First) и max-width (Desktop First). * Как перестраивать Flexbox и Grid макеты под разные экраны.

    Теперь ваши сайты будут выглядеть профессионально на любом устройстве. В следующей статье мы поговорим о том, как добавить на страницу интерактивность и анимацию, чтобы сделать взаимодействие с пользователем еще более приятным.

    5. Лучшие практики: семантическая верстка, доступность и оптимизация кода

    Лучшие практики: семантическая верстка, доступность и оптимизация кода

    Поздравляю! Вы уже прошли огромный путь. Вы знаете, как создать структуру страницы с помощью HTML, как стилизовать её с CSS, как выстраивать сложные макеты на Flexbox и Grid, и даже как адаптировать сайт под мобильные устройства. Технически вы уже можете создавать веб-сайты.

    Но есть разница между сайтом, который «просто работает», и сайтом, который сделан профессионально. Профессиональный код должен быть понятен не только браузеру, но и поисковым роботам, людям с ограниченными возможностями и другим разработчикам (включая вас самих через полгода).

    В этой статье мы разберем три кита качественной веб-разработки: семантику, доступность и оптимизацию.

    Семантическая верстка: смысл превыше всего

    В ранние годы веб-разработки (и, к сожалению, иногда и сейчас) верстальщики использовали тег <div> для всего подряд. Шапка сайта? <div>. Меню? <div>. Статья? <div>. Это называется «div-суп» (div soup).

    Браузеру всё равно: он отобразит <div> с классом header так же, как тег <header>. Но для поисковых систем (Google, Яндекс) и скринридеров (программ, читающих экран вслух) разница колоссальная.

    Семантическая верстка — это использование HTML-тегов в соответствии с их смыслом (семантикой), а не внешним видом.

    !Сравнение несемантической «div-верстки» и правильной семантической структуры.

    Основные семантические теги

    В HTML5 появился набор тегов, которые описывают структуру документа:

    * <header> — вводная часть страницы или раздела. Обычно содержит логотип, поиск и навигацию. * <nav> — блок навигации с основными ссылками. * <main> — основное, уникальное содержимое страницы. На странице должен быть только один тег <main>. * <article> — независимый, самодостаточный контент (пост в блоге, новость, комментарий). * <section> — тематический раздел контента, обычно имеющий заголовок. * <aside> — контент, косвенно связанный с основным (боковая панель, реклама, список похожих статей). * <footer> — подвал страницы или раздела (копирайт, контакты, ссылки на соцсети).

    Почему это важно?

  • SEO (Search Engine Optimization): Поисковые роботы лучше понимают структуру вашего сайта. Если вы обернете статью в тег <article>, Google поймет, что это важный контент, а не просто служебный блок.
  • Поддержка кода: Читать код, где написано <nav>, <header>, <footer>, гораздо приятнее и быстрее, чем разбирать бесконечные `<div class=