Уроки по тегу «Верстка»
В каталоге хекслета найдено 69 уроков по теме «Верстка». Уроки по теме «Верстка» есть в курсах: CSS: Позиционирование элементов, CSS: Основы Flex, SASS: Основы работы, Основы современной верстки, Bootstrap 5: Основы верстки, Основы верстки контента, Bootstrap 5: Продвинутый уровень.
Выясняем, как браузеры отображают HTML и что такое «нормальный поток документа»
Поговорим о связи абсолютного и относительного позиционирования
Учимся использовать относительное позиционирование
Учимся позиционировать элемент относительно самого браузера
Поговорим о наложении элементов, связи позиционирования и наложения
Выясняем, как выдернуть элемент из нормального потока
Поговорим о плавающих элементах и их особенностях
Поговорим о способах переноса элементов внутри флекс-контейнера и научимся пользоваться свойством flex-wrap
Поговорим о свойствах для работы с элементами внутри флекс-контейнеров, изучим свойства flex-shrink, flex-basis, flex
Поговорим о способах выравнивания элементов по главной оси внутри флекс-контейнера, познакомимся со свойством justify-content
Знакомимся с флекс-контейнерами и возможностями определения главной оси для рендера элементов
Поговорим о способах выравнивания элементов по поперечной оси внутри флекс-контейнера, познакомимся со свойством align-items
Поговорим о свойствах для работы с элементами внутри флекс-контейнеров, изучим свойства order и align-self
Поговорим о концепции Flex, преимуществах и сценариях использования
Поговорим о свойствах для работы с элементами внутри флекс-контейнеров, изучим свойство Flex-grow
Изучаем шаблонные селекторы и узнаем о директиве extend
Учимся использовать переменные, подключать файлы и использовать флаг !default
Обсуждаем возможности SASS, позволяющие немного расширить язык CSS
Для визуального оформления веб-страницы создан язык CSS. Изучаем базовые возможности языка, разбираемся, как их использовать вместе с HTML. Учимся подключать CSS файлы и знакомимся с базовыми типами селекторов.
Изучаем один из самых полезных плагинов для верстальщика — Emmet. Он позволит ускорить разметку HTML-кода и снимет бóльшую часть рутинных действий.
При верстке сайта важно вовремя найти ошибки или понять, как правильно преобразовать нужный нам блок. Ранее это делалось преимущественно вручную. Сейчас современные браузеры имеют функцию веб-инспектора. Рассмотрим возможности одного из них – Chrome DevTools.