Профессия

Верстальщик

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

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

Иконка программы Верстальщик

Сколько зарабатывает верстальщик

Фактическая зарплата зависит от города и конкретной компании. Выйти на указанный уровень можно за год реальной разработки.
40 000₽
Медианная зарплата в России
По результатам исследования Хабр Карьеры

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

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

Учим необходимому

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)

Курсы

Теория, квизы, практика в тренажере
Основы вёрстки контента
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 Адаптивность
Трудоустройство
стажировка резюме портфолио первая работа
CSS: Transform
CSS3 HTML5 CSS Transforms CSS перспектива

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

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

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

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

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

И, наконец, выполняете тестовые задания наших партнеров, по которым они определяют ваш уровень

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

Наполним портфолио, составим резюме и покажем его всем нашим партнерам. Расскажем, где искать работу, как правильно откликаться на вакансии и проходить собеседования
Тото на собеседовании

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

Альфа Банк Rambler Regru Bookmate Botmother Health Samurai Учи.ру Dualboot partners Funbox

Преподаватели и наставники

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

Сертификат

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

Сертификат

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

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

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

Тогда я начал смотреть в сторону онлайн-курсов. Особо не вникая и не теряя времени, начал скупать всё подряд. Курсы верстки 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-разработчика. До сих пор не могу в это поверить. Читать полностью

Хекслет

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

Хотели бы сказать, что да, точно получится, но не можем — не всё зависит от нас. Не можем и пообещать, что учиться будет легко — изучать новое всегда трудно.

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

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

Мы не будем сравнивать Хекслет с другими школами, это было бы неправильно. Лучше расскажем о том, что считаем важным в обучении.

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

Хекслет создают профессионалы — программисты для программистов. Мы не нанимаем сторонних авторов, а делимся своим опытом, знаниями и экспертизой.

Подробнее об этом можно прочитать в статье основателя Хекслета Кирилла Мокевнина.

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

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

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

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

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

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

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

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

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

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

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