Профессия

Верстальщик

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

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».

Длительность: 5 месяцев Дата старта: в любой момент
Иконка программы Верстальщик
Обучение

Теория и практика

Портфолио

3 полноценных проекта

Карьера

Подготовка к трудоустройству

Результат

Востребованная профессия

Учебная программа

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

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

Создадите первые страницы с помощью HTML и CSS. Изучите основные свойства оформления элементов на странице. Познакомьтесь с базовыми навыками анимации и типографики. Установите и научитесь пользоваться системой контроля версии git и редактором Visual Studio Code. Научитесь пользоваться командной строкой. Наполните своё портфолио на GitHub первым лендингом.

Программа наставника

Вебинары, слаконары
  • Настройка окружения (npm, stylelint, htmlhint)

  • Отладка кода (Chrome DevTools)

  • Поиск технической информации

  • Организация задач с помощью Kanbanдоски (Trello)

Курсы

Теория, квизы, практика в тренажере
Основы вёрстки контента
CSS3 HTML5 Селекторы Доступность
CSS: Позиционирование
позиционирование HTML-элементы CSS3
CSS: Flex
CSS3 Flex Адаптивность
Основы командной строки
терминал shell команды linux
Введение в Git
github рабочая директория клонирование восстановление

Итоговый проект

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

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

Научитесь адаптировать свои страницы для различных устройств. Начните использовать новый модуль CSS Grid и расширьте возможности написания CSS используя препроцессор SASS. Освойте методы создания доступных сайтов, которые помогут людям удобно и быстро ориентироваться в вашем проекте используя только клавиатуру или screenreader. Добавьте в портфолио ещё один проект с адаптивностью и используя препроцессоры. Научитесь строить архитектуру вашего проекта и разбивать страницу на компоненты.

Программа наставника

Вебинары, слаконары
  • Постпроцессоры (зачем, почему и для кого)

  • Прокачка с помощью OpenSource (где искать проект и как перестать бояться)

  • От макета до деплоя (makefile, docker, хостинги)

  • Инженерная культура

Курсы

Теория, квизы, практика в тренажере
CSS: Адаптивность
CSS3 Flex Viewport Адаптивность
CSS: Grid
CSS3 Grid Сетки Адаптивность
SASS: Основы
Препроцессоры CSS SASS SCSS Миксины
SASS: Программирование
Препроцессоры CSS SASS SCSS Функции SASS

Итоговый проект

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

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

Автоматизируйте свою работу с помощью Gulp и HTML-препроцессора Pug. Научитесь создавать свою среду для разработки проектов, в которой всё, что нужно — ввести одну команду в консоли. Познакомьтесь с фреймворком Bootstrap и узнайте, что он глубже, чем о нём принято думать. Станьте мастером создания своих компонентов и утилит.

Программа наставника

Вебинары, слаконары
  • Построение архитектуры проекта (директории, скрипты, файлы)

  • Flex или Grid (различия и области применения)

  • Эффективная работа (горячие клавиши, организация рабочего пространства, слепая печать)

  • Программирование на препроцессорах CSS (возможности, рабочие кейсы)

  • Будущее CSS (новые стандарты)

Курсы

Теория, квизы, практика в тренажере
HTML: Препроцессор Pug
HTML Pug Миксины
Bootstrap: Основы
Bootstrap 4 HTML CSS3 Адаптивность

Итоговый проект

Мессенджер «Hexlet Chat»
Третий проект посвящён работе с Bootstrap. Создайте свои компоненты и утилиты используя все доступные средства. При выполнении проекта вы используете все знания, которые приобрели в профессии. Структурно проект имеет две страницы и 5 различных экранов. Проект адаптируется под мобильные и десктопные устройства. В проекте вы сможете поработать непосредственно с файлом макета в сервисе Figma. Подробнее

Обучение в браузере: теория, тесты, упражнения

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

  • Новичкам, которые хотят освоить профессию с нуля
  • Тем, кто уже пробовал учиться самостоятельно, но чувствует потребность в наставнике
  • Тем, кто пробовал учиться на сторонних курсах, но до сих пор испытывает сложности в самостоятельном написании кода
Тото обучает студентов

Обучают

Олег Титов
Frontend Developer, Esagency
Дмитрий Бердников
Frontend Developer, MGDes
Даниил Григорьев
Frontend Developer, IGA Technologies
Анастасия Батарей
HTML/CSS Developer, DAXX

Истории успеха

А конкретно со мной случилось следующее: меня нашли в этом списке (топ-100 студентов), связались со мной и предложили работу! Это было очень приятно. Я прошел вводное собеседование, после ответил на тесты, решил пару задачек. По результатам меня пригласили на техническое собеседование.

Аватар пользователя Шухрат Рахимов
Шухрат Рахимов
г. Ташкент

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

Hexlet учит самому важному: тому, как нужно программировать, чтобы проектировать сложные системы качественно и быстро. Hexlet рекомендую теперь всем, да и сам планирую заглянуть туда за новыми профессиями. Спасибо, что дочитали до конца. Успехов в учебе!

Аватар пользователя Константин Булгаков
Константин Булгаков
г. Калининград

Хекслет

C 2012 года на рынке онлайн-образования. Около 10 000 человек обучаются на платформе ежемесячно. Более 20 000 человек в Slack-сообществе Хекслета — это одно из самых больших комьюнити опытных и начинающих программистов в рунете.