Трек
Для программистов

Верстка на Bootstrap

В этом треке вы освоите основные инструменты верстки — SASS, Bootstrap 5 и Gulp. Эти знания помогут облегчить работу с версткой и сделать ее ближе к программированию.

Начать учиться
Картинка программы Верстка на Bootstrap
Самостоятельно,
в любое время
Обратная связь
по урокам от поддержки Хекслета
Неограниченный доступ
к пройденной теории
489 студентов
проходят трек прямо сейчас

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

Уроки
  • Введение

  • Что такое JS?

  • Установка JavaScript

  • NPM

  • Зависимости

  • Зависимости для разработки

  • Lock-файл

  • Глобальная установка пакетов

  • NPX

  • Точка входа

  • Линтинг


Чему научитесь
  • Настраивать локальное окружение для запуска JavaScript-кода

  • Устанавливать библиотеки и подключать их в коде

  • Использовать программы, улучшающие качество кода

Испытания
Уроки
  • Введение

  • Установка

  • Расширение CSS

  • Шаблонные селекторы

  • Переменные

  • Миксины


Чему научитесь
  • Использовать препроцессор SASS и компилировать его код в CSS.

  • Расширять возможности написания стандартного CSS.

  • Использовать шаблонные селекторы и миксины.

  • Создавать и работать с переменными.

Уроки
  • Введение

  • Миксины как функции

  • Типы данных

  • Функции

  • Условные конструкции

  • Сложные типы данных

  • Циклы


Чему научитесь
  • Использовать миксины в качестве функций.

  • Создавать собственные функции и использовать их.

  • Работать с различными типами данных.

  • Использовать циклы и условные конструкции.

Испытания
Уроки
  • Введение

  • Установка

  • Теги и контент

  • Подключение файлов

  • JavaScript

  • Условные конструкции

  • Циклы

  • Миксины


Чему научитесь
  • Размечать страницу с использованием синтаксиса Pug

  • Подключать файлы и дополнительные модули

  • Использовать JavaScript для добавления логики компиляции шаблона

  • Создавать миксины для переиспользования участков кода

Испытания
Уроки
  • Введение

  • Почему Bootstrap

  • Установка Bootstrap

  • Сетка

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

  • Работа с текстом

  • Таблицы

  • Компоненты

  • Утилиты

  • Bootstrap Icons


Чему научитесь
  • Использовать механизм 12-колоночной сетки.

  • Работать с текстом и таблицами, используя возможности Bootstrap.

  • Использовать стандартные компоненты.

  • Применять встроенные утилиты при создании шаблона.

  • Создавать свои собственные компоненты.

Испытания
Уроки
  • Введение

  • Установка

  • Gulpfile

  • Базовые функции Gulp

  • Watch

  • Сторонние пакеты


Чему научитесь
  • Создавать задачи для выполнения

  • Подключать встроенные и сторонние функции для своих задач

  • Использовать цепочку команд внутри одной команды

  • Экспортировать цепочки команд для создания задач

Уроки
  • Введение

  • Установка

  • Создание пользовательского компонента

  • Создание пользовательских утилит

  • Цветовые схемы Bootstrap

  • Темная и светлая тема

  • Оптимизация проекта


Чему научитесь
  • Устанавливать Bootstrap в свой проект

  • Создавать свои компоненты

  • Добавлять, обновлять и изменять встроенные утилиты

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

Подробнее

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

Курс состоит из учебных модулей с уроками и проектами
  • В каждом уроке — теория, тесты на закрепление изученного и практика прямо в браузере

  • Задания проходят автоматическую проверку тестами и линтером

Теоретический материал
Мы воссоздали реальное рабочее пространство программиста. Прочувствуйте разработку «как есть» — с установкой софта, запуском кода, чтением ошибок и консольными командами
  • Вы прямо в браузере получаете доступ к виртуальной машине, редактору кода и к консоли

  • Сразу видите обратную связь по своему решению в виде тестов и их результатов

Упражнение в IDE
Проходите уроки самостоятельно в любое удобное время
  • Урок — это теория, квиз (проверочный тест) и практика

  • Учебный материал представлен в текстовом формате, иногда встречаются короткие видео

  • Практика может быть в виде упражнений в браузере, испытаний, проектов, самостоятельной работы и домашних заданий

  • Можно задавать вопросы по теории и практике уроков команде поддержки Хекслета

Тесты

Что говорят наши студенты о курсах и проектах

Благодарю за хороший курс по bootstrap. Писать самому html и css больше не хочется)))

Уф-ф. Наконец-то получилось сдать третий проект. Делал его два месяца. Как и в других проектах, было много мест(деталей), где пришлось иной раз долго кружить в танце(разумеется, это танец с бубном). Было интересно работать с новыми для себя инструментами (Pug, Gulp, линтеры) и фреймворком Bootstrap. И, как всегда, самое полезное - это стадия ревью кода. Спасибо Никите за проект.

Задания в Испытаниях интересные, но их слишком мало. Хочется побольше попрактиковаться! `Никита Михайлов`, у Вас отличные курсы, жду продолжения!

Соглашусь с комментарием ниже - задание прям очень крутое, и на циклы, и на составные данные. В качестве дополнения могу предложить в подсказках сделать ссылку на документацию, как, например, делалось в заданиях по каким-нибудь методам массивов. Что-то вроде: > Если вам надо удалить кавычки в строке, то воспользуйтесь функцией [unquote](https://sass-lang.com/documentation/modules/string/#unquote) Там и про другие интересные функции можно почитать )

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

Спасибо большое за курс! Сделал жене сайт-визитку на BS - она и все кому отправляет в восторге просто. А вот не учился бы на Hexlet, так и пришлось бы к кому-нибудь идти за сайтом, а и не факт, что сделали бы так, чтобы нормально...

Получите доступ

К этому треку и ко всем остальным курсам Хекслета по подписке за 3 900 ₽ в месяц

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Кому подойдет обучение

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

Хекслет —
это серьезная подготовка инженеров-программистов

  • Топовые IT-компании обучают своих сотрудников на Хекслете

  • Весь обучающий контент создан практикующими IT-специалистами

  • Программы, направленные на системное развитие инженерного мышления

17 000+

Студентов учатся ежемесячно

4.7+ звезды
4.7+

Рейтинг на отзовиках: Otzyvmarketing

Индекс лояльности

Нашу платформу часто рекомендуют студенты

Нам доверяют обучение своих сотрудников

Контур
Kaiten
СБЕР МАРКЕТ
Bell integrator
QIWI
Agima
Авиасейлc
Альфа Банк
Uchi.ru
Райффайзенбанк
PeterService
Simtech
Itech Group
Хотите учиться от компании?

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

Оформите подписку за 3 900 ₽ в месяц
  • Получите доступ к этому треку и ко всем остальных курсам Хекслета

  • Учитесь сколько нужно, отменить подписку можно в любой момент

  • Задавайте вопросы по урокам — вам ответит поддержка Хекслета

  • Сохраните неограниченный доступ к пройденной теории даже после отмены подписки

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Трек — это набор курсов по определенной теме для повышения квалификации и развития инженерного мышления. Треки подходят как для разработчиков с опытом, так и для новичков в качестве задания «со звёздочкой».

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

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

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

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

Тогда вы можете обучаться вместе с наставником.

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

Наставник помогает справляться с трудностями, отвечает на вопросы и делает ревью проектов.

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

Если решите учиться самостоятельно, оформите подписку на план «Базовый». Доступ ко всем трекам откроется сразу после оплаты.

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