Профессия

Верстальщик

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

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

3 900 ₽ в месяц

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

177 текстовых уроков
3 дипломных проекта
130 упражнений в тренажере
569 проверочных тестов
Помощь в «Обсуждениях»
Доступ к остальным программам

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

  • Тем, кто уже пробовал учиться самостоятельно, но чувствует потребность в наставнике
  • Тем, кто пробовал учиться на сторонних курсах, но до сих пор испытывает сложности в самостоятельном написании кода
  • Новичкам, которые хотят освоить профессию с нуля
Тото обучает студентов
Учим необходимому
HTML5
Язык разметки веб-страниц. Базовый инструмент для формирования контента на сайте с помощью специальных конструкций разметки
CSS
Таблицы стилей веб-страниц. Отвечают за визуальное оформление сайта, анимации интерфейсов, адаптации страниц под разные разрешения и разные устройства
Доступность
Использование сайта людьми с ограниченными возможностями. Доступ к странице с помощью клавиатуры и скринридера
Адаптивность
Стилизация страницы под разные устройства и разрешения экранов. Один из ключевых навыков в 21 веке
Фреймворк Bootstrap
Использование всех возможностей фреймворка Bootstrap для создания собственных компонентов, а так же использования готовых средств
Инструменты автоматизации (SASS, Pug, Gulp)
Расширение возможностей при написании HTML и CSS. Автоматизация рутинных задач с помощью Gulp
Инфраструктура
Помимо навыков вёрстки, необходимы знания по инструментам, позволяющие грамотно организовать рабочее место: командная строка, Git, NPM, линтеры
Хотите подробностей?

Программа курса Верстальщик

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

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

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

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

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

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

Курсы
Теория, квизы, практика в тренажере
HTML5
Developer Tools
CSS3
Верстка
HTML5
CSS Columns
Верстка
селекторы
CSS3
HTML-элементы
позиционирование
Верстка
CSS Flex
CSS3
CSS адаптивность
Верстка
shell
терминал
команды linux
DevOps
рабочая директория
github
клонирование
восстановление
npx
Node js
eslint
зависимости
Итоговый проект
Создайте и опубликуйте свою первую вёрстку. В первом проекте вы примените знания, пройденные в курсах. Используете позиционирование и встретитесь с основными задачами, которые решаются с помощью Flex. Во время вёрстки вы узнаете о распространённых когнитивных искажениях и научитесь их преодолевать. Подробнее
Адаптивная вёрстка и использование SASS

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

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

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

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

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

Курсы
Теория, квизы, практика в тренажере
портфолио
резюме
стажировка
первая работа
Гибкие макеты
Media Queries
CSS3
CSS Flex
вёрстка
Сетки
CSS адаптивность
CSS3
SASS
Расширение CSS
Препроцессоры CSS
Миксины
Циклы SASS
Препроцессоры CSS
вёрстка
Функции SASS
вёрстка
CSS3
HTML5
CSS перспектива
Итоговый проект
Во втором проекте вы создадите две страницы музыкального портала «Music Box». Проект является логическим продолжением первого проекта. В нём вы вернётесь к созданию вёрстки по методологиям OOCSS и Atomic CSS. В процессе выполнения вы используете полученные знания из курсов по адаптивности и SASS. Адаптивность макету вам нужно будет реализовать самим. В проекте вы сможете поработать непосредственно с файлом макета в сервисе Figma. Подробнее
Автоматизация задач и использование Bootstrap

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

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

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

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

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

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

Курсы
Теория, квизы, практика в тренажере
портфолио
опенсорс
первая работа
стажировка
HTML
Pug
вёрстка
Шаблонизатор
CSS3
CSS адаптивность
Bootstrap 5
Верстка
Таск-менеджер
JS
Автоматизация работы
Gulp
Bootstrap 5
HTML
CSS3
CSS адаптивность
Итоговый проект
Создайте свои компоненты и утилиты используя все доступные средства. При выполнении проекта вы используете все знания, которые приобрели в профессии. Структурно проект имеет две страницы и 5 различных экранов. Проект адаптируется под мобильные и десктопные устройства. В проекте вы сможете поработать непосредственно с файлом макета в сервисе Figma. Подробнее

Очень много практики

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

3 проекта для портфолио на GitHub – по одному для каждого учебного модуля. Начинаем с простого и погружаемся в разработку для реального бизнеса

11 Open Source проектов Хекслета — научитесь работать с чужим кодом, оформлять пулреквесты. Это ваш опыт реального продакшна и +100 очков в карму программиста

150 тестовых заданий от наших партнеров – работайте с базой типовых задач из настоящих проектов. Это придаст уверенности на собеседованиях

Поможем с трудоустройством

Присоединяйтесь к Карьерному треку — это наш сервис для тех, кто ищет первую работу в IT. Мы расскажем, как правильно составлять резюме и писать сопроводительные письма. А еще подберем вакансии и стажировки в партнерских компаниях и подготовим к собеседованиям
Тото на собеседовании

Наши выпускники работают в известных компаниях

Наставники

Аватар наставника Азамат Шарафутдинов
Азамат Шарафутдинов
HTML-верстальщик в крупной российской компании. Верстает с 2012 года. Более 100 проектов в портфолио – от Landing Page до порталов и интернет-магазинов. Не боится сложных задач, а также терминов Gulp, SASS(SCSS), PUG
Аватар наставника Анастасия Батарей
Анастасия Батарей
В веб-разработке с 2016 года. Начинала как фронтенд-разработчик, но потом с головой ушла в дизайн. Сейчас работает верстальщиком в дизайн-команде, где может совмещать свои навыки разработки и интерес к UX
Аватар наставника Анна Русяева
Анна Русяева
Начинала с вёрстки и разработки приложений на Angular, Ionic и React Native. Основала собственную веб-студию. Активно помогает ребятам в освоении профессии: наставничает на учебных проектах, читает и пишет курсы по вёрстке и JS
Аватар наставника Даниил Григорьев
Даниил Григорьев
Выпускник колледжа информационных технологий и Московского Энергетического Института. Более 4 лет трудится на должности фронтенд-разработчика в различных IT-компаниях. Пришел наставником на Хекслет, чтобы показать новобранцам, что сложные вещи на самом деле простые

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

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

Аватар пользователя Сергей Ампилов
Сергей Ампилов
г. Москва

Тогда я начал смотреть в сторону онлайн-курсов. Особо не вникая и не теряя времени, начал скупать всё подряд. Курсы верстки HTML, CSS. Потом курсы frontend – JavaScript, React. Я проходил одновременно 2-3 курса в ускоренном режиме. Сил уходило много, а прогресс был почти нулевой. Потому что тупо повторяя за преподавателем, как оказалось, ничему научиться нельзя. Я приуныл. И однажды, листая бесконечные отзывы под очередным ютубовским роликом, обнаружил ссылку на Хекслет и несколько комментариев, что там учат хорошо.

Я тем же вечером стартанул на бесплатных курсах и через два дня купил платную подписку. Я реально залип. И, о чудо! У меня пошел прогресс. Я наконец-то начал программировать. Сам! Хоть и на учебных задачах, хоть и очень медленно! Но дело пошло.

Читать полностью
Аватар пользователя Вячеслав Быков
Вячеслав Быков
г. Москва

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

Ну и, конечно, приятный бонус: зарплаты у мидлов гораздо интересней, а зона ответственности меньше, чему у фулстек-самоучки ;)

Читать полностью
Аватар пользователя Роман Авилов
Роман Авилов
г. Хабаровск

После оплаты появилось некое спокойствие: учебная траектория есть, осталось только учиться. Теория плюс практика — то что нужно. Задачи были и лёгкие, и трудные, и очень трудные. Одну три дня решал.

Работу нашел через телеграм-чат местного IT-сообщества. Откликнулся на вакансию. Проект только запускался, и меня взяли фронтом на React. Будущий начальник посмотрел мой домашний проект. Вопросы были не по теории, а именно по практическому применению знаний и по проекту.

Мне дали время подумать, я подумал и согласился, о чём не жалею. Зарплата, кстати, выросла в два раза. Новый проект предполагал TypeScript. Я его не знал, но сошлись на том, что внедрим постепенно. Теперь я люблю TypeScript.

Да, забыл сказать, сейчас мне 43 года :-)

Читать полностью
Аватар пользователя Денис Солодухин
Денис Солодухин
г. Долгопрудный

Меня повысили на работе. Мне 40 лет. У меня двое маленьких детей. Есть первая работа в жизни, которая мне настолько нравится, что когда еду домой, то, бывает, проезжаю остановку, потому что меня прёт от новой задачи.

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

'Даже в 40 лет можно реализовать казалось бы невозможное: изучить программирование с нуля и устроиться на работу.'

Читать полностью
Аватар пользователя Владислав Гончаренко
Владислав Гончаренко
Stamford, USA

Когда я прошёл нужные темы на Хекслете и почувствовал, что третий глаз на ООП открылся, начал рассылать резюме. В какой-то момент наткнулся на курсы в EPAM. Так как курс по Java на Хекслете дал мне огромный и правильно структурированный багаж знаний, то я с легкостью прошел все собеседования и сам курс EPAM, который длился несколько месяцев. Окончив курс, не узнал ничего нового, связанного с джавой. Но впервые в жизни в процессе обучения достиг уровня, на котором мог помогать окружающим, а не спрашивать постоянно что-то у людей вокруг.

Вот с тех самых пор я и работаю в EPAM. Пришел туда Junior, стал Middle через полгода, а ещё через полтора сдал экзамен, стал Senior и уехал в США.

Читать полностью
Аватар пользователя Дарья Харитонова
Дарья Харитонова
г. Санкт-Петербург

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

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

Читать полностью
Аватар пользователя Сергей Желудков
Сергей Желудков
г. Москва

Во втором проекте начинают использоваться дополнительные библиотеки, которые не изучаются в курсах — и вот тут было просто оцепенение. Что это? Как это работает? Кто-то начал жаловаться, что этого не было в курсах и как теперь самостоятельно разбираться в этом. И вот ответ от Кирилла Мокевнина перевернул мое сознание на тот момент. Он сказал, что сейчас существуют тонны разных библиотек и материалов, но основная задача Хекслета — не обучить нас пользоваться всеми этими библиотеками, а научить нас мыслить как разработчики, разбираться и копаться в библиотеках, в документации и в итоге учиться самостоятельно.

Читать полностью
Аватар пользователя Виктория Музычук
Виктория Музычук
г. Москва

Признаюсь сразу — я пришла на Хекслет всего лишь попробовать. Сама не заметила, как погрузилась в него с головой. Мы очень многое прошли вместе: были как падения — страх, неуверенность, отчаяние даже, так и взлеты — радость, удовлетворение, ощущение собственной значимости. Ощущение огромной, неописуемой благодарности к этому проекту и людям, которые с каждым днем делают его лучше. Недавно исполнился год, как я учусь на Хекслете. Год, как я учусь программированию. Отметила эту дату прохождением испытательного срока на должности PHP-разработчика. До сих пор не могу в это поверить.

Читать полностью

Корпоративное обучение для команд и организаций

hexlet logo
Хекслет

C 2012 года на рынке онлайн-образования. Около 17 000 человек обучаются на платформе ежемесячно. Более 30 компаний-партнеров гарантированно собеседуют наших выпускников.

Многие наши студенты так и делают: учатся и работают одновременно. Мы понимаем, не у всех есть возможность посвящать всё время обучению. Поэтому сделали формат асинхронным. Доступ к платформе открыт 24/7, вы проходите уроки, когда удобно вам и учитесь в своем темпе.

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

Достаточно просто зарегистрироваться, сразу после регистрации вам будут доступны первые курсы профессии. Проходите их бесплатно, чтобы понять, как устроено обучение на Хекслете и подходит ли оно вам.

Чтобы пройти профессию полностью, нужно оформить подписку.

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

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

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

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

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