Профессия

Верстальщик

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

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

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

3 900 ₽ в месяц

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

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

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

  • Новичкам, которые хотят освоить профессию с нуля
  • Тем, кто уже пробовал учиться самостоятельно, но чувствует потребность в наставнике
  • Тем, кто пробовал учиться на сторонних курсах, но до сих пор испытывает сложности в самостоятельном написании кода
Тото обучает студентов
Учим необходимому
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
CSS3
Developer Tools
вёрстка
CSS3
HTML5
селекторы
Доступность
позиционирование
HTML-элементы
CSS3
CSS3
вёрстка
CSS Flex
CSS адаптивность
терминал
shell
команды linux
github
рабочая директория
клонирование
восстановление
eslint
prettier
зависимости
npx
Итоговый проект
Создайте и опубликуйте свою первую вёрстку. В первом проекте вы примените знания, пройденные в курсах. Используете позиционирование и встретитесь с основными задачами, которые решаются с помощью Flex. Во время вёрстки вы узнаете о распространённых когнитивных искажениях и научитесь их преодолевать. Подробнее
Адаптивная вёрстка и использование SASS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Альфа Банк Rambler Regru Авиасейлc Bookmate Учи.ру Яндекс Тинькофф Agima Funbox PeterService Simtech Health Samurai Dualboot partners Abbyy Delivery Club Itech Group Avito Tech QIWI VC.RU Ростелеком ИТ Simple life Комтек Greenatom CSSSR JetRockets Sber Devices Flant CДЭК IT Контур Timeweb EPAM OZON EVRONE Bell integrator Банк Открытие МТС One Two Trip Онлайн кинотеатр КИОН Зарплата.ру СитиМобил

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

Аватар наставника Азамат Шарафутдинов
Азамат Шарафутдинов
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-разработчика. До сих пор не могу в это поверить. Читать полностью

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

Хекслет

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

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

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

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

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

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

Отношением к трудоустройству. Мы не обещаем его как другие. При этом студенты Хекслета получают оффер еще во время обучения, а некоторые работодатели указывают курсы Хекслета как преимущество при найме. Как такое возможно? Просто в процессе обучения мы прорабатываем те моменты, которые не оставляют шансов остаться без работы: мощные проекты, Open Source для командной практики и масса образовательных вебинаров по развитию карьеры.

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

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

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

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

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

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

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

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

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

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

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