Все курсы Hexlet на одной странице

Курс посвящён модулю CSS Grid Layout — технологичному инструменту для создания сеток в CSS. После прихода модуля Flex появилась потребность в контролировании элементов по двум осям одновременно. Разработчики хотели взять систему сеток, которая используется в печатной продукции сотню лет. Для этого использовали табличную вёрстку, вёрстку с помощью Float и Flex. Каждый из этих способов имел ограничения и сложности при разработке. CSS Grid Layout появился в 2011 году и за много лет приобрёл множество свойств и подходов, которые упрощают создание макетов с помощью CSS.

Курс посвящён HTML препроцессору Pug, основной целью которого является ускорение разработки и облегчение работы со структурой приложения. Pug позволяет добавить новую функциональность при разметке страниц: подключение модулей и файлов, шаблонизация, миксины, взаимодействие с JS. Это позволяет оптимизировать работу с вёрсткой и уменьшить количество ошибок в ней.

Расположение элементов на странице — это обширная тема со множеством нюансов. Их возможно учесть, зная фундаментальные правила CSS и способы управления потоком документов внутри HTML-разметки. Данный курс шаг за шагом через практику раскрывает базовые принципы позиционирования элементов.

С ростом количества веб-страниц и усложнением дизайна возникла острая проблема расположения элементов. Появление мобильных устройств показало, что текущих возможностей позиционирования недостаточно — у разработчиков возникла потребность в новом механизме, который позволит управлять элементами на экране. Таким механизмом стал CSS Flexible Box Layout. В этом курсе вы шаг за шагом изучите возможности механизма Flex и научитесь использовать его в проектах.

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

Создаёт страницы с помощью HTML и CSS. Умеет пользоваться возможностями модулей Flex и Grid. Использует препроцессор SASS, шаблонизатор Pug и собирает проекты с помощью Gulp. Следит за доступностью сайта, создавая семантически правильную разметку. Создаёт компоненты и утилиты на Bootstrap. Верстает адаптивные проекты.

Курс посвящён Bootstrap 5 — одному из самых популярных фреймворков для верстальщиков. Его многогранность позволяет быстро создавать сложные макеты. Встроенные механизмы адаптивности и доступности снимают множество проблем верстальщика. В этом курсе раскроются механизмы работы Bootstrap: сетка, адаптивность, компоненты и утилиты. В конце курса вы узнаете о том, как самостоятельно создать свой компонент, используя встроенные механизмы Bootstrap.

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

С развитием технологий и сложности макетов возникла потребность в автоматизации написания CSS свойств. Наличие цветовых схем и дополнительных значений, которые определяют значения свойств выявили сложности при разработке. Чтобы избавиться от рутины и превратить написание CSS в процесс, похожий на программирование были придуманы препроцессоры — специальные языки, которые компилировались в CSS. Они позволяют создавать переиспользуемый CSS код, использовать переменные и расширить возможности написания CSS. В этом курсе вы изучите основы препроцессора SASS, который позволит в короткие сроки писать поддерживаемый и удобный CSS код.

Изучите HTML, CSS и современные модули для позиционирования элементов: Flex, Grid, Columns. Научитесь разворачивать окружение, которое поможет в разметке и написании CSS стилей.