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

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

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

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

5 месяцев
52 часа теории
268 часов практики
Что важно знать заранее
Для успешного прохождения курса предварительная подготовка не нужна
Если вы пока не знакомы с программированием, не переживайте!
У нас есть вводные курсы, которые помогут вам освоить основы и подготовиться к обучению. Мы объясним всё с нуля — доступно и наглядно
Основы современной верстки
Основы верстки и CSS, Публикация сайта, Сложные селекторы, CSS Columns, работа со шрифтами
Позиционирование элементов
Управление потоком документа, Различные виды позиционирования элементов, Добавление интерактивности на страницу
Основы Flex
Базовые свойства CSS Flexible Box Layout, Управление элементами с помощью Flex, Адаптивные элементы для различных устройств
Основы командной строки
Навигация в файловом дереве, Переменные окружения, Настройка доступов к файлам, Использование пакетных менеджеров
Введение в Git
Работа с Git, Работа с Github, Эффективное управление исходным кодом
Настройка окружения
Настройка окружения для запуска JavaScript-кода, Основные команды npm, Установка и подключение библиотек npm
Проект
Когнитивные искажения
<span class="translation_missing" title="translation missing: ru.web.programs.track.blocks_ru.new_identity.syllabus.illustration">Illustration</span>

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

Адаптивность сайта
Проверка адаптивности сайта, Работа с различными типами устройств и создание стилей под них, Работа с Flex для создания адаптивных сайтов, Grid, работа с сеткой
SASS
Использование препроцессора SASS, компиляция в CSS, Шаблонные селекторы и миксины, Переменные, Миксины в качестве функций, создание собственных функций, Типы данных, Циклы, условные конструкции
CSS: Transform (трансформация объектов)
Вращение, перемещение, искажение объектов, Объемные объекты, Трансформации для трехмерных объектов
Проект
Портал «Music Box»
<span class="translation_missing" title="translation missing: ru.web.programs.track.blocks_ru.new_identity.syllabus.illustration">Illustration</span>

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

Препроцессор Pug
Синтаксис Pug, Использование JavaScript в шаблонах, Создание миксинов
Bootstrap
Механизм 12-колоночной сетки, Компоненты Bootstrap, Встроенные утилиты, Создание собственных компонентов и утилит, Цветовые схемы Bootstrap, Оптимизация проекта
Gulp
Создание задач для выполнения в Gulp, Функции для задач, Работа с цепочками команд для работы с задачами

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

Просто, наглядно и всегда под рукой
Вы изучаете теорию в удобном текстовом формате — легко читать даже с телефона. Живые примеры помогают сразу понять, как всё работает на практике. Материал выстроен так, чтобы вы шаг за шагом двигались от простого к сложному, не упуская важных деталей
Проверяем и закрепляем знания
После каждой темы вы проходите квизы, которые помогают убедиться, что вы всё поняли. Вопросы разного уровня сложности дадут возможность как проверить базу, так и попрактиковаться в применении знаний
Учитесь на реальных задачах
Мы создали удобную виртуальную среду, где вы решаете задачи прямо в браузере. У вас есть редактор кода, консоль и автоматические тесты, которые моментально показывают результат
Ваш AI-наставник в учебе
Наш Учебный помощник на базе ИИ — это как наставник, который всегда под рукой. Он понимает, где вы находитесь в курсе, что нужно сделать, и как выглядит ваш код. Если что-то пошло не так, вы сразу получите понятные и полезные подсказки
Занимаетесь сами, но не в одиночестве
Тяжело сохранять мотивацию, если обучаешься самостоятельно, поэтому мы создали крепкое IT-сообщество, где каждый студент получает поддержку и находит полезные контакты среди других разработчиков
IT-сообщество
Стоимость курса
Старт в любой момент
Продолжительность 2 месяца
Свободный режим учебы
AI-помощник
Интегрированное обучение: теория, тесты, тренажеры, проекты
Членство в IT-сообществе
от 3 900 ₽/мес
Начать учиться
Хотите учиться от компании?

Расскажите вашему работодателю о Хекслете

Иллюстрация
Подробнее

Вопрос-ответ

Даже опытные разработчики найдут в наших курсах полезные знания. Мы подробно изучаем сложные структуры данных и их применение в задачах оптимизации кода.

Занятия помогут вам укрепить навыки программирования, улучшить архитектуру кода и глубже понять принципы работы алгоритмов. Курс поможет не только укрепить текущие навыки, но и подготовиться к следующему карьерному шагу

Вы можете учиться в своём темпе, срок обучения не ограничен.

Мы рекомендуем выделять 5-10 часов в неделю. Так с одной стороны обучение будет достаточно интенсивным, чтобы не растягивать его надолго, а с другой — достаточно комфортным, чтобы совмещать с работой и успевать отдыхать

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

Мы принимаем карты Visa, MasterCard и МИР любого банка, валюта счёта тоже может быть любой