HTML

CSS

SASS

bootstrap

Адаптивная верстка

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

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

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

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

Семен Чернышев

выпускник фронтенд

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

1. Основы вёрстки и позиционирования

88 упражнений

84 квиза

Основы верстки и CSS

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

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

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

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

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

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

Основы Flex

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

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

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

Введение в Git

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

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

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

2. Адаптивная вёрстка и использование SASS

23 упражнения

42 квиза

Адаптация страниц для различных устройств

Позиционирование с помощью CSS Grid

Использование препроцессора SASS

Трансформация объектов

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

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

SASS

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

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

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

3. Автоматизация задач и использование Bootstrap

24 упражнения

31 квиз

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

Использование Bootstrap

Использование Gulp для автоматизации задач

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

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

Bootstrap

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

Gulp

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

Проекты

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

Разработаете лендинг, посвящённый популярным когнитивным искажениям в программировании, который поможет разработчикам осознать и преодолеть типичные мышленческие ловушки. В проекте освоите вёрстку с использованием позиционирования и Flexbox, чтобы создавать адаптивные и устойчивые макеты. Практические навыки закрепите на реальном примере, а готовый сайт сможете опубликовать на хостинге. А чтобы привлечь внимание работодателей, добавите проект в своё портфолио и сделаете его доступным для широкой аудитории

Портал «Music Box»

Разработаете две страницы музыкального портала "Music Box" — логическое продолжение предыдущего проекта. В процессе работы примените методологии OOCSS и Atomic CSS, освоите адаптивную вёрстку и препроцессор SASS, а также поработаете с макетом в Figma. Реализуете адаптивный дизайн вручную, чтобы продемонстрировать уверенное владение современными инструментами. А чтобы повысить шансы на трудоустройство, оформите проект как часть портфолио с акцентом на визуальное и техническое качество

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

Просто и наглядно

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

Проверяем и закрепляем знания

Учитесь на реальных задачах

Ваш AI наставник

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

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

Подписаться →