HTML
CSS
SASS
bootstrap
Адаптивная верстка

Профессиональная верстка

Навык адаптивной вёрстки с современными подходами для корректного отображения сайтов на любых устройствах и разрешениях

Начать обучение

Входит в подписку (более 50 навыков)

Евгений Филиппов

выпускник Хекслета

Программа обучения

Основы современной верстки

Основы верстки и CSS, Публикация сайта, Сложные селекторы, CSS Columns, работа со шрифтами

Позиционирование элементов

Управление потоком документа, Различные виды позиционирования элементов, Добавление интерактивности на страницу

Основы Flex

Базовые свойства CSS Flexible Box Layout, Управление элементами с помощью Flex, Адаптивные элементы для различных устройств

Основы командной строки

Навигация в файловом дереве, Переменные окружения, Настройка доступов к файлам, Использование пакетных менеджеров

Введение в Git

Работа с Git, Работа с Github, Эффективное управление исходным кодом

Настройка окружения

Настройка окружения для запуска JavaScript-кода, Основные команды npm, Установка и подключение библиотек npm

Адаптивность сайта

Проверка адаптивности сайта, Работа с различными типами устройств и создание стилей под них, Работа с Flex для создания адаптивных сайтов, Grid, работа с сеткой

SASS

Использование препроцессора SASS, компиляция в CSS, Шаблонные селекторы и миксины, Переменные, Миксины в качестве функций, создание собственных функций, Типы данных, Циклы, условные конструкции

CSS: Transform (трансформация объектов)

Вращение, перемещение, искажение объектов, Объемные объекты, Трансформации для трехмерных объектов

Препроцессор Pug

Синтаксис Pug, Использование JavaScript в шаблонах, Создание миксинов

Bootstrap

Механизм 12-колоночной сетки, Компоненты Bootstrap, Встроенные утилиты, Создание собственных компонентов и утилит, Цветовые схемы Bootstrap, Оптимизация проекта

Gulp

Создание задач для выполнения в Gulp, Функции для задач, Работа с цепочками команд для работы с задачами

Проекты

Мессенджер «Hexlet Chat»

Создайте свои компоненты и утилиты используя все доступные средства. При выполнении проекта вы используете все знания, которые приобрели в профессии. Структурно проект имеет две страницы и 5 различных экранов. Проект адаптируется под мобильные и десктопные устройства. В проекте вы сможете поработать непосредственно с файлом макета в сервисе Figma.

Портал «Music Box»

Во втором проекте вы создадите две страницы музыкального портала «Music Box». Проект является логическим продолжением первого проекта. В нём вы вернётесь к созданию вёрстки по методологиям OOCSS и Atomic CSS. В процессе выполнения вы используете полученные знания из курсов по адаптивности и SASS. Адаптивность макету вам нужно будет реализовать самим. В проекте вы сможете поработать непосредственно с файлом макета в сервисе Figma.

Когнитивные искажения

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

Как проходит обучение

Теория в удобном текстовом формате — легко читать даже с телефона. Живые примеры помогают понять, как всё работает. Материал выстроен так, чтобы вы двигались шаг за шагом, не упуская важных деталей

Подписка от 2 400 ₽/мес

Этот навык уже входит в подписку. Оформи доступ и открывай все навыки сразу (50+)

Подписаться →
  • 50+ навыков в одной подписке
  • Пожизненный доступ к теории
  • Обучение с ИИ-ассистентом
  • Отмена в любой момент