Скидка до 60% и курс в подарок : : Выбрать курс Скидка до 60% и курс в подарок
Образовательная платформа

Верстальщик

Научим зарабатывать на вёрстке сайтов за 6 месяцев
−50% 0 дня 00:00:00
Записаться на курс
  • Практика на реальных задачах

    От IT-компании «Газпромбанк.Тех» и агентства WhiteMark

  • 33 проекта

    Мощное портфолио, которое поможет быстрее найти работу

  • Полная поддержка

    Куратор не просто проверяет ДЗ — он помогает разобрать сложные темы и даёт практические советы

  • −50%

    Скидка действует
    0 дня 00:00:00

Что делает верстальщик?

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

Вёрстка — комфортный первый шаг в IT

  • Вёрстку легко освоить

    В профессии верстальщика нет сложного программирования и математики.

  • Начнёте работать на фрилансе

    Задачи по вёрстке сайтов — одни из самых распространённых на фриланс-биржах.

  • Навыки пригодятся в дальнейшей карьере

    Знания вёрстки нужны во фронтенд-разработке, в бэкенде, веб-дизайне, веб-аналитике, менеджменте проектов и других IT-направлениях.

Этот курс подойдёт

  • Новичкам в IT

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

  • Тем, кто пробовал учиться верстать сам

    Структурируете знания и разберётесь в темах, в которых раньше «плавали». Закрепите навыки на реальных проектах, получите обратную связь и код-ревью от опытных разработчиков.

Дадим все навыки для работы верстальщиком

  • Изучите HTML — чтобы собрать структуру сайта Без HTML невозможно представить современный интернет — все сайты написаны именно на этом языке.
  • Освоите CSS — чтобы сделать сайт красивым и удобным Сможете менять оформление страниц, подключать шрифты, добавлять анимацию и адаптировать сайты для отображения на компьютере и смартфонах.
  • 🎁 Добавите интерактив с помощью JavaScript Освоите язык программирования, который выделит вас на фоне обычных верстальщиков и поможет зарабатывать больше. Сможете добавлять на сайты интерактивные элементы: формы, модальные окна, галереи, выпадающие меню и многое другое.

А ещё вы прокачаете полезные софт-скилы — они пригодятся на будущей работе

  • Умение работать в команде

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

  • Коммуникативные навыки

    Научитесь чётко понимать задачи, взаимодействовать с наставником, а также уверенно презентовать и защищать свои идеи и решения в коде.

  • Навыки планирования

    Благодаря практическим заданиям, которые разбиты на этапы, научитесь организовывать свою работу по шагам по понятному алгоритму.

  • Опыт решения проблем

    Узнаете, как работать с документацией и самостоятельно искать ответы на вопросы.

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

Должность

Верстальщик сайтов

Навыки

  • Владею навыками адаптивной вёрстки на HTML и CSS
  • Работаю в графическом редакторе Figma
  • Работаю в VS Code и CodePen
  • Использую препроцессор Sass
  • Пишу код на JavaScript
  • Владею инструментами оптимизации изображений и кода
  • Верстаю по Pixel Perfect
  • Придерживаюсь компонентного подхода
  • Коммуникабельный, понимаю свою роль в команде разработки

Инструменты

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

  • Занимаетесь в удобное время

    Всё обучение проходит в удобном личном кабинете. Доступ к материалам курса останется у вас навсегда.

  • Практикуетесь

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

  • Получаете обратную связь

    Наставник проверит вашу работу в течение 24 часов с момента её отправки. Если возникнут вопросы, он ответит на них прямо на платформе и в чате.

  • Присоединяетесь к комьюнити

    B Telegram-чате эксперты и другие студенты подскажут, где найти ответы на самые сложные вопросы.

Найдите первых заказчиков
в «Скил Маркете»

  • Комьюнити
  • Реальные заказы
  • Первые клиенты
  • Кейсы в портфолио

«Скил Маркет» — это комьюнити Skillbox в чат-канале, в котором участники публикуют заказы на коммерческие и некоммерческие проекты. Там вы сможете откликаться на задачи и собирать команды для совместных проектов.

Узнать больше

Программа курса

  • 27+ теоретических материалов
  • 40+ часов видеоуроков
  • 33 проекта
  • Регулярно мониторим рынок и обновляем курс
  1. Веб-вёрстка 3.0
    1. Этап 1. Готовим контент к публикации Перенесёте контент из макета в вёрстку, разметите шаблоны статей и подготовите для них графику.
      • Познакомитесь с языком разметки HTML
      • Научитесь создавать первые теги, вкладывать их друг в друга, добавлять к ним атрибуты, а также наполнять теги контентом
      • Перенесёте изображения и текст из графического редактора Figma и создадите свои первые страницы
      • Узнаете, как форматировать код и с помощью специальных инструментов (Emmet, подсветки и других) писать его проще и быстрее
    2. Этап 2. Верстаем контентный блок Углубитесь в разработку текстовых шаблонов и информационных страниц: создадите дополнительные текстовые блоки с помощью новых тегов и выполните стилизацию с помощью CSS.
      • Познакомитесь с языком разметки CSS: селекторами, стилизуемыми свойствами и их значениями, комбинациями и особыми правилами
      • С помощью CSS и новых тегов HTML глубже подойдёте к разработке и оформлению текстовых страниц, подключите внешние шрифты и освоите дополнительные форматы графики
    3. Этап 3. Верстаем информационный блок Разработаете компоненты (блоки-конструкторы), из которых будут собираться веб-страницы, с помощью методологии БЭМ.
      • Изучите методологию БЭМ: поймёте, как писать нейминг для блоков, организовывать внутри них элементы и модификаторы
      • Познакомитесь с потоком документа и блочной моделью
      • Разберётесь с отступами элементов и новыми CSS-свойствами
      • Узнаете, что такое семантика и как она связана с доступностью
    4. Этап 4. Верстаем гибкий компонент Сформируете сетки страницы с помощью технологии Flexbox: упорядочите контент внутри блоков и расположите крупные блоки относительно друг друга, подготавливая страницу к завершённому виду.
      • Освоите базовые навыки работы с редактором кода — Visual Studio Code
      • Познакомитесь с файловой структурой проекта и правилами разделения файлов стилей внутри неё
      • Погрузитесь в CSS, изучите глобальные стили и рассмотрите Flexbox — одну из самых популярных технологий для создания гибких сеток
      • Научитесь управлять расположением элементов на странице, организуя их по своим правилам
    5. Этап 5. Верстаем раздел страницы Разработаете основные смысловые блоки страницы с помощью технологии Grid: сверстаете шапку, подвал и крупные секции.
      • Продолжите изучать создание сеток на страницах и освоите новую технологию — CSS Grid
      • Узнаете, как использовать новые семантические теги для структурирования разделов страницы, углубите знания в области доступности сайтов и компонентного подхода к разработке
      • Познакомитесь с принципами самотестирования кода и рассмотрите методы работы с динамическим контентом — сможете эффективно управлять его изменениями на странице
    6. Этап 6. Верстаем форму Сверстаете разные формы для проекта: входа и регистрации, подписки, отправки заявки, фильтра каталога.
      • Научитесь создавать и стилизовать формы в HTML, которые будут удобны и понятны для пользователей
      • Узнаете, как сделать так, чтобы сайт одинаково отображался в разных браузерах
      • Будете использовать современные селекторы CSS для более точной и гибкой стилизации
      • Освоите методы позиционирования элементов, чтобы располагать их именно там, где вам нужно
      • Познакомитесь с техникой использования SVG-спрайтов для оптимизации графики
      • Глубже разберёте понятие доступности, чтобы делать сайты удобными для всех пользователей
    7. Этап 7. Создаём адаптивную стилизацию Разработаете адаптив с помощью технологии Sass — подготовите страницу к отображению на планшетах и мобильных устройствах.
      • Познакомитесь с основами адаптива страниц, чтобы ваши сайты отлично выглядели и работали на любом устройстве
      • Изучите, как адаптировать изображения под разные размеры экранов и обеспечивать их чёткость на retina-дисплеях
      • Узнаете, как создавать кросс-платформенные сайты, которые одинаково хорошо функционируют на всех устройствах и платформах
      • Погрузитесь в мир препроцессора SCSS, чтобы упрощать и ускорять работу с CSS
      • Углубитесь в знакомство с Figma и разберёте новые возможности этого инструмента
    8. Этап 8. Верстаем адаптивные разделы Создадите резиновые страницы — подготовите максимально гибкую вёрстку для отображения на экране любой ширины и на любом устройстве.
      • Научитесь создавать резиновую вёрстку, чтобы ваши сайты динамически подстраивались под размеры экрана
      • Узнаете, как использовать адаптивное позиционирование элементов, чтобы они оставались на своих местах вне зависимости от устройства
      • Углубитесь в создание адаптивных сеток с помощью Grid, чтобы легко управлять расположением контента
      • Познакомитесь с чек-листом для самотестирования, который поможет вам самостоятельно проверять и улучшать качество своего кода
    9. Этап 9. Разрабатываем интерфейсные анимации Анимируете страницу: оживите отдельные элементы и создадите анимации для крупных блоков, состоящие из десятков шагов.
      • Погрузитесь в мир анимации — начнёте со знакомства с её историей и основными принципами
      • Поймёте, как создавать микроанимации, которые добавят интерактивности и живости вашим проектам
      • Освоите многоступенчатые анимации, которые позволят вам создавать сложные и плавные переходы
      • Научитесь анимировать SVG-графику, чтобы ваши изображения оживали на странице
      • Узнаете, как использовать режим Present в Figma для создания анимаций, чтобы понимать, что всё работает именно так, как задумано
    10. Этап 10. Готовим вёрстку к продакшену Подготовите готовую вёрстку страницы к публикации: исправите баги и оптимизируете скорость загрузки страницы с помощью Lighthouse.
      • Познакомитесь с ключевыми принципами оптимизации сайтов для повышения их производительности
      • Научитесь проверять качество своего сайта с помощью инструмента Lighthouse, чтобы выявлять и исправлять проблемы
      • Узнаете, как создавать и подключать графику в формате WebP для уменьшения размера изображений без потери качества
      • Изучите процессы подготовки сайта к публикации, чтобы он был готов к запуску и работал максимально эффективно
  2. JavaScript
    1. Введение
      • Познакомитесь с возможностями языка JavaScript
      • Настроите среду разработки и напишете первую программу
    2. Переменные и простые выражения
      • Поймёте, что такое алгоритм и блок-схема
      • Разберёте правила оформления кода
      • Напишете несколько простых программ — отработаете навыки работы с переменными и выражениями
    3. Boolean, условные операторы
      • Научитесь работать с типом данных Boolean, логическими операторами и выражениями
      • Освоите условные (тернарные) операторы
      • Напишете программы для банкомата и расчёта налога
    4. Функции. Основы
      • Узнаете, что такое аргументы
      • Научитесь правильно называть переменные и функции в коде
      • Напишете несколько программ, чтобы закрепить навыки работы с функциями
    5. Введение в DOM
      • Познакомитесь с DOM — объектной моделью документа
      • Научитесь работать с HTML-элементами
      • Создадите приложение для интернет-магазина и интерактивное меню навигации для сайта
    6. Циклы и массивы
      • Научитесь добавлять и удалять элементы массива
      • Поймёте, как работать с циклами while, do while, for, for in, for of
      • Создадите веб-страницу со списком товаров
    7. Работа с массивами
      • Разберётесь, как сортировать, фильтровать, искать элементы в массиве
      • Создадите приложения «Домашняя библиотека» и «Корзина покупателя»
    8. Встроенные функции работы с массивами
      • Узнаете, как работать со строковыми данными
      • Поймёте, где используются колбэк-функции и цепочки вызовов
      • Напишете несколько программ
    9. Объекты
      • Научитесь работать с объектами JavaScript: создавать их, добавлять свойства, сравнивать, хранить в них данные
      • Напишете программу для поиска автомобилей в каталоге
    10. Расширенный DOM
      • Разберётесь, как перемещаться по DOM-дереву и находить в нём элементы
      • Узнаете, как работать с событиями в браузере
      • Создадите мини-галерею с изображениями и несколько интерактивных веб-страниц
    11. Работа с формами
      • Познакомитесь с тегами form, input, их типами и атрибутами
      • Научитесь работать с элементами форм и полями ввода
      • Создадите несколько веб-страниц с разными типами форм
    12. Встроенные объекты и функции
      • Разберёте объекты Window, Math и Date
      • Научитесь сохранять и получать данные из cookie
      • Создадите веб-страницу со всплывающим окном и с формой для ввода промокода
    13. Подключение библиотек
      • Научитесь подключать JavaScript-библиотеки и использовать готовые решения из них в своих проектах
      • Поработаете с несколькими библиотеками
    14. Хранение данных в браузере
      • Поймёте, как сохранять информацию после закрытия браузера или перезагрузки страницы
      • Начнёте создавать приложение «Видеотека» со списком фильмов, которое позволит сохранять и извлекать данные
    15. Работа с сервером
      • Узнаете принципы концепции «клиент-сервер»
      • Научитесь взаимодействовать с сервером с помощью Fetch API, чтобы передавать запросы и обрабатывать ответы
      • Продолжите работать над приложением «Видеотека»
    16. Обработка ошибок
      • Научитесь находить ошибки и корректировать поведение программы в нештатных ситуациях
      • Доработаете функционал приложения «Видеотека»
    17. Модули
      • Узнаете, что такое модули и для чего они нужны
      • Научитесь экспортировать и импортировать сущности из модулей в другие части кода
      • Отточите навыки на веб-приложении для учёта товаров на складе
    18. Event loop и асинхронная разработка
      • Узнаете, как работать с асинхронным кодом
      • Поймёте принципы потока в браузере
      • Познакомитесь с Promise, Event loop и другими технологиями
      • Создадите веб-страницу с постепенной загрузкой изображений и progress bar
    19. Классы
      • Узнаете, что такое классы и как их использовать
      • Поработаете с веб-приложением для курьеров

Подтверждаем навыки сертификатом

В конце обучения получите сертификат установленного образца. Мы обучаем по государственной лицензии
№ Л035−1 298−77/179 609.

Посмотреть сертификат

Спикеры курса доступно объяснят даже сложные темы

Выгодные условия оплаты

  • Оплата — через 
6 месяцев

    При оформлении рассрочки начнёте её выплачивать после 
6 месяцев обучения

  • Дополнительная скидка 15% при полной оплате на сайте

    Без звонков и ожидания

  • Налоговый вычет

    Можно вернуть до 13% от стоимости курса, мы поможем оформить документы

  • Оплатите обучение картой Т‑Банка и удобно оформите налоговый вычет в приложении. Подробности Реклама. АО «ТБанк», ИНН 7710140679

Стоимость курса

Скидка 50% действует 0 дня 00:00:00

  • 291 762
  • 145 881
  • −50%
4 052 ₽/мес
  • В рассрочку на 36 месяцев
  • Задачи
от реальных компаний: «Газпромбанк.Тех» и агентства WhiteMark
  • 33 проекта в портфолио
  • Курс по JavaScript уже входит в комплект
  • Студенты могут вернуть до 13% стоимости курса, оформив налоговый вычет

Записаться на консультацию или оплатить на сайте

Похоже, произошла ошибка. Попробуйте отправить снова или перезагрузите страницу.

Нажимая на кнопку, я соглашаюсь  с правилами пользования Платформой и публичной офертой, правилами акций «Поможем найти работу или вернем деньги» и «Учись сейчас — плати потом»

Спасибо!

Ваша заявка успешно отправлена

Сразу после покупки курса вы получите

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

    Освоите быстрое запоминание слов и грамматики в онлайн-школе английского языка Skillbox.

  • Картинка для бонуса Дополнительную скидку 49% на курсы для детей

    Получите скидку на любой курс для детей в IT-школе Skillbox Kids и год изучения английского для ребёнка — в подарок.

  • Картинка для бонуса Возможность открыть второй курс

    Пригласите друга в Skillbox, и мы откроем вам ещё один курс на выбор — не дороже покупки друга.

Студенты довольны обучением

  • 93% выпускников отмечают, что Skillbox помог достичь поставленной цели
  • 78% выпускников готовы рекомендовать обучение в Skillbox

Данные независимого опроса выпускников Skillbox, проведённого Высшей школой экономики (НИУ ВШЭ)

4 500+ оценок на разных независимых площадках

  • 4,7
    4 967 оценок
  • 4,7
    974 оценки
  • 4,8
    490 оценок
  • 4,5
    2 368 оценок
  • 4,7
    559 оценок
  • 5,0
    321 оценка
  • 4,5
    230 оценок
  • 4,7
    232 оценки

Часто задаваемые вопросы

  • Я никогда не разрабатывал сайты. У меня получится?

    Конечно! У вас всё получится даже без специальных знаний, главное — не забывайте практиковаться. С трудными задачами помогут эксперты, которые будут сопровождать вас на протяжении всего курса. Наш онлайн-курс высоко оценили студенты. Его средняя оценка — 4,9 из 5 на основе 997 отзывов.

  • Что делает верстальщик?

    Верстальщик превращает дизайн-макет в страницу сайта: собирает структуру, настраивает стили, адаптирует интерфейс под разные экраны и следит, чтобы кнопки, формы, меню и другие элементы выглядели правильно в браузере.

  • Чем отличается верстальщик от программиста?

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

  • Какая зарплата у верстальщика?

    Доход зависит от опыта, города, формата работы и набора навыков. По данным Dream Job, средняя зарплата верстальщика в России в 2026 году — 63 000 рублей, чаще всего в диапазоне от 50 000 до 75 000 рублей. У HTML-верстальщиков на портале «Хабр Карьера» указана медиана 75 000 рублей.

  • Что такое вёрстка простыми словами?

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

  • Смогу ли я совмещать работу и обучение?

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

  • Нужно ли устанавливать программы для работы на курсе?

    Заранее ничего скачивать не нужно. Во время курса мы поможем вам установить весь необходимый софт для работы.

  • Кто будет мне помогать в обучении на платформе?

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

  • Хватит ли мне проектов в портфолио по окончании курса?

    Да, об этом не волнуйтесь. К концу обучения у вас будет портфолио из самых разных проектов:

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


  • Я смогу работать из дома?

    Конечно! Многие компании предлагают удалёнку на постоянной основе. Вам не придётся ездить в офис: главное — быть на связи с командой. А если хотите самостоятельно выбирать проекты и заказчиков, для вас всегда доступны фриланс-платформы.

  • Действуют ли какие-нибудь программы рассрочки?

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

  • Могу ли я получить налоговый вычет за обучение на платформе?

    Да, вы можете вернуть часть средств в виде налогового вычета. Основные условия: быть налоговым резидентом РФ и платить НДФЛ. Налоговый вычет составит до 13% от стоимости курса. Максимальная сумма возврата части НДФЛ — 15 600 рублей за год при цене курса 120 000 рублей.

    • Вы можете вернуть средства через работодателя или налоговую.
    • Для этого понадобится договор на обучение на платформе, наша лицензия на образовательную деятельность и чек об оплате курса, который придёт вам на почту или в личный кабинет банка.
    • Если вы будете оформлять вычет через налоговую, нужно будет заполнить декларацию 3-НДФЛ. Удобнее всего это сделать в личном кабинете на сайте Федеральной налоговой службы.
    • В течение 30 дней налоговая подтвердит ваше право на вычет.
    • Если будете оформлять возврат части НДФЛ через работодателя, вам останется подать ему заявление о получении налогового вычета.

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

  • Какой документ я получу после окончания курса?

    В конце обучения получите сертификат установленного образца. Мы обучаем по государственной лицензии № Л035−1 298−77/179 609.

  • Сколько платят на фрилансе за создание сайтов?

    Зависит от масштабов проекта. Например, на портале «Хабр Фриланс» вы можете найти заказы на вёрстку от 30 000 рублей и на разработку интернет-магазина, которая может стоить сотни тысяч. Иногда требуется не просто создать сайт «под ключ», а поправить что-то в существующем коде. Такие заказы стоят недорого. Но если брать сразу несколько в месяц, у вас появится хороший дополнительный источник заработка.