🎨 До этого мы разбирали, что тестировать. Теперь — из чего сделаны интерфейсы, которые мы проверяем.

HTML и CSS — это фундамент любого сайта. Без них не существует ни одна веб-страница.

1️⃣ Что такое HTML

📄 HTML — язык разметки. Он отвечает за структуру: где заголовок, где текст, где кнопка, где картинка.

Простыми словами: HTML — это скелет страницы.

2️⃣ Что такое CSS

🎨 CSS — язык стилей. Он отвечает за внешний вид: цвета, шрифты, отступы, расположение блоков.

Простыми словами: CSS — это одежда и макияж страницы.

💡 HTML без CSS — серая простыня текста. CSS без HTML — нечего стилизовать.

3️⃣ Блочная модель (box model)

Каждый элемент на странице — это прямоугольник, у которого есть: ▪️ Content — содержимое ▪️ Padding — внутренний отступ ▪️ Border — граница ▪️ Margin — внешний отступ

Понимание блочной модели — половина вёрстки.

4️⃣ Flexbox и Grid

🧩 Flexbox — для выравнивания элементов в ряд или колонку 🗺 Grid — для сложных сеток и раскладок

Это два главных инструмента современной вёрстки.

5️⃣ Адаптивность

📱 Сайт должен работать на телефоне, планшете и десктопе.

Для этого используют: ▪️ Медиазапросы — разные стили для разных экранов ▪️ Гибкие единицы — %, rem, vw, vh ▪️ Относительные размеры — чтобы ничего не ломалось

6️⃣ Семантика и доступность

🏷 Семантика — использование «правильных» тегов по смыслу: , , , .

♿ Доступность (a11y) — чтобы сайтом могли пользоваться люди с ограничениями: скринридеры, клавиатурная навигация, контрастность.

7️⃣ Инструменты

🛠 DevTools — смотреть структуру и стили в браузере 📐 Figma — макет, с которого верстают 🌿 Git — сохранение версий кода

💡 Главная мысль: вёрстка — это не «нарисовать как на картинке», а сделать так, чтобы страница работала у всех и везде. Ещё новый стиль более яркие и светлые тона. #QA #тестирование #HTML #CSS #вёрстка #фронтенд