Верстальщик
Научим зарабатывать на вёрстке сайтов за 6 месяцев
- Практика на реальных задачах
От IT-компании «Газпромбанк.Тех» и агентства WhiteMark
- 33 проекта
Мощное портфолио, которое поможет быстрее найти работу
- Полная поддержка
Куратор не просто проверяет ДЗ — он помогает разобрать сложные темы и даёт практические советы
- −50%
Скидка действует
0 дня 00:00:00
Что делает верстальщик?
Верстальщик превращает дизайн в работающий сайт: собирает страницы, адаптирует их под разные устройства и делает интерфейс удобным. Верстальщики востребованы в любых сферах, ведь сайты нужны всем — от нефтяной корпорации до небольшой районной булочной.
Вёрстка — комфортный первый шаг в IT
-
Вёрстку легко освоить
В профессии верстальщика нет сложного программирования и математики.
-
Начнёте работать на фрилансе
Задачи по вёрстке сайтов — одни из самых распространённых на фриланс-биржах.
-
Навыки пригодятся в дальнейшей карьере
Знания вёрстки нужны во фронтенд-разработке, в бэкенде, веб-дизайне, веб-аналитике, менеджменте проектов и других IT-направлениях.
Этот курс подойдёт
- Новичкам в IT
Если вы никогда не писали код, но хотите попробовать себя в IT, то веб-вёрстка — идеальный вариант для старта. На курсе вы с нуля и на реальных задачах научитесь верстать сайты разного уровня сложности, а кураторы всегда придут на помощь, если что-то непонятно.
- Тем, кто пробовал учиться верстать сам
Структурируете знания и разберётесь в темах, в которых раньше «плавали». Закрепите навыки на реальных проектах, получите обратную связь и код-ревью от опытных разработчиков.
Дадим все навыки для работы верстальщиком
Вы научитесь верстать сайты, за которые готовы платить до 100 000 ₽
А ещё вы прокачаете полезные софт-скилы — они пригодятся на будущей работе
- Умение работать в команде
Узнаете, какие роли есть в команде разработки, и на реальных задачах курса увидите, кто какие функции выполняет.
- Коммуникативные навыки
Научитесь чётко понимать задачи, взаимодействовать с наставником, а также уверенно презентовать и защищать свои идеи и решения в коде.
- Навыки планирования
Благодаря практическим заданиям, которые разбиты на этапы, научитесь организовывать свою работу по шагам по понятному алгоритму.
- Опыт решения проблем
Узнаете, как работать с документацией и самостоятельно искать ответы на вопросы.
С таким резюме вы сможете начать работать сразу после обучения
Должность
Верстальщик сайтовНавыки
- Владею навыками адаптивной вёрстки на HTML и CSS
- Работаю в графическом редакторе Figma
- Работаю в VS Code и CodePen
- Использую препроцессор Sass
- Пишу код на JavaScript
- Владею инструментами оптимизации изображений и кода
- Верстаю по Pixel Perfect
- Придерживаюсь компонентного подхода
- Коммуникабельный, понимаю свою роль в команде разработки
Инструменты
Вы добавите проекты коммерческого уровня в портфолио
Как проходит обучение
- Занимаетесь в удобное время
Всё обучение проходит в удобном личном кабинете. Доступ к материалам курса останется у вас навсегда.
- Практикуетесь
Вас ждут более 80 заданий от реальных компаний. Вы закрепите навыки на практике и будете готовы к настоящей работе.
- Получаете обратную связь
Наставник проверит вашу работу в течение 24 часов с момента её отправки. Если возникнут вопросы, он ответит на них прямо на платформе и в чате.
- Присоединяетесь к комьюнити
B Telegram-чате эксперты и другие студенты подскажут, где найти ответы на самые сложные вопросы.
Найдите первых заказчиков в «Скил Маркете»
- Комьюнити
- Реальные заказы
- Первые клиенты
- Кейсы в портфолио
«Скил Маркет» — это комьюнити Skillbox в чат-канале, в котором участники публикуют заказы на коммерческие и некоммерческие проекты. Там вы сможете откликаться на задачи и собирать команды для совместных проектов.
Программа курса
- 27+ теоретических материалов
- 40+ часов видеоуроков
- 33 проекта
- Регулярно мониторим рынок и обновляем курс
- Веб-вёрстка 3.0
-
Этап 1. Готовим контент к публикации Перенесёте контент из макета в вёрстку, разметите шаблоны статей и подготовите для них графику.
- Познакомитесь с языком разметки HTML
- Научитесь создавать первые теги, вкладывать их друг в друга, добавлять к ним атрибуты, а также наполнять теги контентом
- Перенесёте изображения и текст из графического редактора Figma и создадите свои первые страницы
- Узнаете, как форматировать код и с помощью специальных инструментов (Emmet, подсветки и других) писать его проще и быстрее
-
Этап 2. Верстаем контентный блок Углубитесь в разработку текстовых шаблонов и информационных страниц: создадите дополнительные текстовые блоки с помощью новых тегов и выполните стилизацию с помощью CSS.
- Познакомитесь с языком разметки CSS: селекторами, стилизуемыми свойствами и их значениями, комбинациями и особыми правилами
- С помощью CSS и новых тегов HTML глубже подойдёте к разработке и оформлению текстовых страниц, подключите внешние шрифты и освоите дополнительные форматы графики
-
Этап 3. Верстаем информационный блок Разработаете компоненты (блоки-конструкторы), из которых будут собираться веб-страницы, с помощью методологии БЭМ.
- Изучите методологию БЭМ: поймёте, как писать нейминг для блоков, организовывать внутри них элементы и модификаторы
- Познакомитесь с потоком документа и блочной моделью
- Разберётесь с отступами элементов и новыми CSS-свойствами
- Узнаете, что такое семантика и как она связана с доступностью
-
Этап 4. Верстаем гибкий компонент Сформируете сетки страницы с помощью технологии Flexbox: упорядочите контент внутри блоков и расположите крупные блоки относительно друг друга, подготавливая страницу к завершённому виду.
- Освоите базовые навыки работы с редактором кода — Visual Studio Code
- Познакомитесь с файловой структурой проекта и правилами разделения файлов стилей внутри неё
- Погрузитесь в CSS, изучите глобальные стили и рассмотрите Flexbox — одну из самых популярных технологий для создания гибких сеток
- Научитесь управлять расположением элементов на странице, организуя их по своим правилам
-
Этап 5. Верстаем раздел страницы Разработаете основные смысловые блоки страницы с помощью технологии Grid: сверстаете шапку, подвал и крупные секции.
- Продолжите изучать создание сеток на страницах и освоите новую технологию — CSS Grid
- Узнаете, как использовать новые семантические теги для структурирования разделов страницы, углубите знания в области доступности сайтов и компонентного подхода к разработке
- Познакомитесь с принципами самотестирования кода и рассмотрите методы работы с динамическим контентом — сможете эффективно управлять его изменениями на странице
-
Этап 6. Верстаем форму Сверстаете разные формы для проекта: входа и регистрации, подписки, отправки заявки, фильтра каталога.
- Научитесь создавать и стилизовать формы в HTML, которые будут удобны и понятны для пользователей
- Узнаете, как сделать так, чтобы сайт одинаково отображался в разных браузерах
- Будете использовать современные селекторы CSS для более точной и гибкой стилизации
- Освоите методы позиционирования элементов, чтобы располагать их именно там, где вам нужно
- Познакомитесь с техникой использования SVG-спрайтов для оптимизации графики
- Глубже разберёте понятие доступности, чтобы делать сайты удобными для всех пользователей
-
Этап 7. Создаём адаптивную стилизацию Разработаете адаптив с помощью технологии Sass — подготовите страницу к отображению на планшетах и мобильных устройствах.
- Познакомитесь с основами адаптива страниц, чтобы ваши сайты отлично выглядели и работали на любом устройстве
- Изучите, как адаптировать изображения под разные размеры экранов и обеспечивать их чёткость на retina-дисплеях
- Узнаете, как создавать кросс-платформенные сайты, которые одинаково хорошо функционируют на всех устройствах и платформах
- Погрузитесь в мир препроцессора SCSS, чтобы упрощать и ускорять работу с CSS
- Углубитесь в знакомство с Figma и разберёте новые возможности этого инструмента
-
Этап 8. Верстаем адаптивные разделы Создадите резиновые страницы — подготовите максимально гибкую вёрстку для отображения на экране любой ширины и на любом устройстве.
- Научитесь создавать резиновую вёрстку, чтобы ваши сайты динамически подстраивались под размеры экрана
- Узнаете, как использовать адаптивное позиционирование элементов, чтобы они оставались на своих местах вне зависимости от устройства
- Углубитесь в создание адаптивных сеток с помощью Grid, чтобы легко управлять расположением контента
- Познакомитесь с чек-листом для самотестирования, который поможет вам самостоятельно проверять и улучшать качество своего кода
-
Этап 9. Разрабатываем интерфейсные анимации Анимируете страницу: оживите отдельные элементы и создадите анимации для крупных блоков, состоящие из десятков шагов.
- Погрузитесь в мир анимации — начнёте со знакомства с её историей и основными принципами
- Поймёте, как создавать микроанимации, которые добавят интерактивности и живости вашим проектам
- Освоите многоступенчатые анимации, которые позволят вам создавать сложные и плавные переходы
- Научитесь анимировать SVG-графику, чтобы ваши изображения оживали на странице
- Узнаете, как использовать режим Present в Figma для создания анимаций, чтобы понимать, что всё работает именно так, как задумано
-
Этап 10. Готовим вёрстку к продакшену Подготовите готовую вёрстку страницы к публикации: исправите баги и оптимизируете скорость загрузки страницы с помощью Lighthouse.
- Познакомитесь с ключевыми принципами оптимизации сайтов для повышения их производительности
- Научитесь проверять качество своего сайта с помощью инструмента Lighthouse, чтобы выявлять и исправлять проблемы
- Узнаете, как создавать и подключать графику в формате WebP для уменьшения размера изображений без потери качества
- Изучите процессы подготовки сайта к публикации, чтобы он был готов к запуску и работал максимально эффективно
-
- JavaScript
-
Введение
- Познакомитесь с возможностями языка JavaScript
- Настроите среду разработки и напишете первую программу
-
Переменные и простые выражения
- Поймёте, что такое алгоритм и блок-схема
- Разберёте правила оформления кода
- Напишете несколько простых программ — отработаете навыки работы с переменными и выражениями
-
Boolean, условные операторы
- Научитесь работать с типом данных Boolean, логическими операторами и выражениями
- Освоите условные (тернарные) операторы
- Напишете программы для банкомата и расчёта налога
-
Функции. Основы
- Узнаете, что такое аргументы
- Научитесь правильно называть переменные и функции в коде
- Напишете несколько программ, чтобы закрепить навыки работы с функциями
-
Введение в DOM
- Познакомитесь с DOM — объектной моделью документа
- Научитесь работать с HTML-элементами
- Создадите приложение для интернет-магазина и интерактивное меню навигации для сайта
-
Циклы и массивы
- Научитесь добавлять и удалять элементы массива
- Поймёте, как работать с циклами while, do while, for, for in, for of
- Создадите веб-страницу со списком товаров
-
Работа с массивами
- Разберётесь, как сортировать, фильтровать, искать элементы в массиве
- Создадите приложения «Домашняя библиотека» и «Корзина покупателя»
-
Встроенные функции работы с массивами
- Узнаете, как работать со строковыми данными
- Поймёте, где используются колбэк-функции и цепочки вызовов
- Напишете несколько программ
-
Объекты
- Научитесь работать с объектами JavaScript: создавать их, добавлять свойства, сравнивать, хранить в них данные
- Напишете программу для поиска автомобилей в каталоге
-
Расширенный DOM
- Разберётесь, как перемещаться по DOM-дереву и находить в нём элементы
- Узнаете, как работать с событиями в браузере
- Создадите мини-галерею с изображениями и несколько интерактивных веб-страниц
-
Работа с формами
- Познакомитесь с тегами form, input, их типами и атрибутами
- Научитесь работать с элементами форм и полями ввода
- Создадите несколько веб-страниц с разными типами форм
-
Встроенные объекты и функции
- Разберёте объекты Window, Math и Date
- Научитесь сохранять и получать данные из cookie
- Создадите веб-страницу со всплывающим окном и с формой для ввода промокода
-
Подключение библиотек
- Научитесь подключать JavaScript-библиотеки и использовать готовые решения из них в своих проектах
- Поработаете с несколькими библиотеками
-
Хранение данных в браузере
- Поймёте, как сохранять информацию после закрытия браузера или перезагрузки страницы
- Начнёте создавать приложение «Видеотека» со списком фильмов, которое позволит сохранять и извлекать данные
-
Работа с сервером
- Узнаете принципы концепции «клиент-сервер»
- Научитесь взаимодействовать с сервером с помощью Fetch API, чтобы передавать запросы и обрабатывать ответы
- Продолжите работать над приложением «Видеотека»
-
Обработка ошибок
- Научитесь находить ошибки и корректировать поведение программы в нештатных ситуациях
- Доработаете функционал приложения «Видеотека»
-
Модули
- Узнаете, что такое модули и для чего они нужны
- Научитесь экспортировать и импортировать сущности из модулей в другие части кода
- Отточите навыки на веб-приложении для учёта товаров на складе
-
Event loop и асинхронная разработка
- Узнаете, как работать с асинхронным кодом
- Поймёте принципы потока в браузере
- Познакомитесь с Promise, Event loop и другими технологиями
- Создадите веб-страницу с постепенной загрузкой изображений и progress bar
-
Классы
- Узнаете, что такое классы и как их использовать
- Поработаете с веб-приложением для курьеров
-
Подтверждаем навыки сертификатом
В конце обучения получите сертификат установленного образца. Мы обучаем по государственной лицензии
№ Л035−1 298−77/179 609.
Спикеры курса доступно объяснят даже сложные темы
Выгодные условия оплаты
-
Оплата — через 6 месяцев
При оформлении рассрочки начнёте её выплачивать после 6 месяцев обучения
- Дополнительная скидка 15% при полной оплате на сайте
Без звонков и ожидания
- Налоговый вычет
Можно вернуть до 13% от стоимости курса, мы поможем оформить документы
-
Оплатите обучение картой Т‑Банка и удобно оформите налоговый вычет в приложении. Подробности Реклама. АО «ТБанк», ИНН 7710140679
Сразу после покупки курса вы получите
-
Год изучения английского в подарок
Освоите быстрое запоминание слов и грамматики в онлайн-школе английского языка Skillbox.
-
Дополнительную скидку 49% на курсы для детей
Получите скидку на любой курс для детей в IT-школе Skillbox Kids и год изучения английского для ребёнка — в подарок.
-
Возможность открыть второй курс
Пригласите друга в Skillbox, и мы откроем вам ещё один курс на выбор — не дороже покупки друга.
Часто задаваемые вопросы
-
Я никогда не разрабатывал сайты. У меня получится?
Конечно! У вас всё получится даже без специальных знаний, главное — не забывайте практиковаться. С трудными задачами помогут эксперты, которые будут сопровождать вас на протяжении всего курса. Наш онлайн-курс высоко оценили студенты. Его средняя оценка — 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 рублей и на разработку интернет-магазина, которая может стоить сотни тысяч. Иногда требуется не просто создать сайт «под ключ», а поправить что-то в существующем коде. Такие заказы стоят недорого. Но если брать сразу несколько в месяц, у вас появится хороший дополнительный источник заработка.
- Санкт-Петербург
- Алматы
- Минск
- Москва
- Санкт-Петербург
- Алматы
- Волгоград
- Воронеж
- Екатеринбург
- Казань
- Красноярск
- Нижний Новгород
- Новосибирск
- Омск
- Пермь
- Ростов-на-Дону
- Уфа
- Челябинск
- Вологда
- Гомель
- Ижевск
- Иркутск
- Калининград
- Кемерово
- Киров
- Краснодар
- Курск
- Липецк
- Махачкала
- Оренбург
- Пенза
- Ростов
- Рязань
- Саратов
- Сочи
- Ставрополь
- Сургут
- Тверь
- Тольятти
- Томск
- Тула
- Тюмень
- Ульяновск
- Хабаровск
- Чебоксары
Получите до за рекомендацию курса
Друзья получат максимальную скидку, а вы — 10% с каждой их покупки.