Вёрстка

Урок посвящён первому знакомству с веб-разработкой. Мы разберём, за что отвечают HTML и CSS, создадим проект с файлами index.html и style.css и посмотрим, как браузер отображает HTML-код.

Далее мы познакомимся с базовой структурой HTML-документа: тегами html, head, body и title. После этого подключим CSS с помощью тега link и напишем первые стили для заголовков: изменим цвет, размер текста и выравнивание.

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

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

HTML-элемент на странице занимает определённую прямоугольную область. CSS позволяет управлять этой областью: задавать ей ширину и высоту, фон, границу и отступы. В ходе урока мы постепенно оформим обычный блок <div>, а затем соберём простую карточку, используя знания из предыдущих занятий.

Урок посвящён практической вёрстке небольшого элемента интерфейса. Мы соберём карточку товара внутри <div>, оформим её с помощью уже знакомых width, padding и border, настроим изображение по ширине карточки и создадим кнопку. В конце добавим реакцию кнопки на наведение мыши и плавный переход между состояниями.

Урок посвящён двум важным способам представления информации на веб-странице — спискам и таблицам. Мы разберём теги <ul>, <ol> и <li>, поймём разницу между нумерованным и ненумерованным списком и познакомимся со свойством list-style-type. После этого перейдём к таблицам: создадим структуру из <table>, <tr>, <th> и <td>, добавим границы, объединим одинаковые CSS-правила для нескольких селекторов и используем border-collapse и padding для аккуратного оформления.

До этого мы создавали элементы, которые пользователь в основном просматривает: текст, изображения, ссылки, списки и таблицы. Теперь познакомимся с элементами, через которые пользователь может вводить данные. Создадим поля для имени, email, пароля и возраста, большое текстовое поле, выпадающий список и кнопку. В конце объединим всё внутри формы и применим CSS для размеров, отступов и оформления.

Раньше блочные элементы div располагались друг под другом. Flexbox позволяет легко ставить элементы в строку или колонку, центрировать их, распределять свободное пространство и задавать расстояния между ними. На уроке мы создадим простой flex-контейнер с несколькими блоками и по шагам посмотрим, как каждое свойство меняет расположение элементов.

В предыдущем уроке мы познакомились с основными свойствами Flexbox на простых блоках. Теперь применяем их в реальной вёрстке. На странице MyShop создаём header с логотипом, меню и кнопкой входа, а ниже — контейнер с карточками товаров. Внутри карточек Flexbox используется повторно, но уже с направлением column. Также закрепляем gap, justify-content, align-items, hover-эффекты, transition и transform.

В предыдущем уроке мы собрали страницу интернет-магазина с шапкой и карточками товаров. На широком экране она выглядит нормально, но на небольших экранах карточки и элементы header могут перестать помещаться. В этом уроке мы исправляем эту проблему: добавляем flex-wrap, знакомимся с media query, создаём два breakpoint для планшета и телефона, меняем ширину карточек и направление Flexbox в шапке и меню. В конце проверяем результат в DevTools.