Образовательная платформа

Курс «Веб-вёрстка»

Плавный и комфортный путь в IT для новичка
  • Реальные задачи
 от партнёров курса

    Компаний Газпромбанк.Тех, WhiteMark и Хабр Фриланс

  • 80+ проектов

    Очень много практических работ 
и проектов, из которых вы составите сильное портфолио

  • Индивидуальное обучение

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

  • -15%

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

Абсолютно новый формат обучения 🔥

  • Приближенный к реальной работе

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

  • Позволяет быстрее осваивать навыки

    Благодаря новому формату студенты сдают первое домашнее задание на 70% быстрее, чем раньше. Освоили теорию — сразу закрепили новый навык на практике.

  • Помогает учиться эффективнее

    Благодаря новому формату вы будете тратить на обучение на 23% меньше времени. При этом 
в портфолио вы сможете добавить на 30% больше работ по сравнению со старым форматом.

  • Объясняет сложные вещи доступно

    Благодаря понятным примерам из реального бизнеса успеваемость студентов Skillbox выросла на 24%, а количество трудоустройств увеличилось на 33%.

Ваш лёгкий старт для карьеры в IT

Вы будете превращать дизайн-макеты
 в полноценные работающие сайты. Такие навыки нужны в любой IT-компании,
а освоить их по силам даже новичку.

Банки, маркетплейсы, стриминговые сервисы или фриланс — вы сами выбираете, в какой сфере работать.

Практикуйтесь на задачах от реальных IT-компаний

Вас ждут задачи от:

  • Продуктовой IT-компании Газпромбанк.Тех
  • Диджитал-агентства WhiteMark
  • Фриланс-биржи Хабр Фриланс

В результате вы узнаете, как устроена работа 
в разных типах бизнеса: продуктовой компании, агентстве и на фрилансе. Поймёте, в каком формате комфортнее работать, и подготовитесь
 к трудоустройству.

Веб-вёрстка 3.0

Мы полностью изменили подход к обучению в IT

  • Учитесь на задачах от реальных компаний

    Именно такие задачи решают джуниор-специалисты 
в начале карьеры.

  • Проходите курс в игровом формате

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

  • Подстраивайте курс под себя

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

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

  • Новичкам в IT

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

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

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

А ещё у вас получится...

  • Выйти на фриланс уже во время обучения

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

  • Строить карьеру в самых востребованных IT-сферах

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

  • Хорошо зарабатывать

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

Составили программу с учётом актуальных требований работодателей в 2024 году

Мы создали новый курс — изучили вакансии, пообщались с тимлидами Альфа-Банка, Самоката, Магнита, Азбуки Вкуса и сделали курс максимально актуальным для 2024 года. Внутри только те знания, которых ждут от джунов лидеры IT-индустрии.

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

  • 27 теоретических материалов
  • 40+ часов видеоуроков
  • 80+ проектов
  • Регулярно мониторим рынок и обновляем курс
  1. Этап 1
    1. Готовим контент к публикации Перенесёте контент из макета в вёрстку, разметите шаблоны статей и подготовите для них графику.
      • Познакомитесь с языком разметки HTML.
      • Научитесь создавать первые теги, вкладывать их друг в друга, добавлять к ним атрибуты, а также наполнять теги контентом.
      • Перенесёте изображения и текст из графического редактора Figma и создадите свои первые страницы.
      • Узнаете, как форматировать код и с помощью специальных инструментов (Emmet, подсветки и других) писать его проще и быстрее.
  2. Этап 2
    1. Верстаем контентный блок Углубитесь в разработку текстовых шаблонов и информационных страниц: создадите дополнительные текстовые блоки с помощью новых тегов и выполните стилизацию с помощью CSS.
      • Познакомитесь с языком разметки CSS: селекторами, стилизуемыми свойствами и их значениями, комбинациями и особыми правилами.
      • С помощью CSS и новых тегов HTML более глубоко подойдёте к разработке и оформлению текстовых страниц, подключите внешние шрифты и освоите дополнительные форматы графики.
  3. Этап 3
    1. Верстаем информационный блок Разработаете компоненты (блоки-конструкторы), из которых будут собираться веб-страницы, с помощью методологии БЭМ.
      • Изучите методологию БЭМ: поймёте, как писать нейминг для блоков, организовывать внутри них элементы и модификаторы.
      • Познакомитесь с потоком документа и блочной моделью.
      • Разберётесь с отступами элементов и новыми CSS-свойствами.
      • Узнаете, что такое семантика и как она связана с доступностью.
  4. Этап 4
    1. Верстаем гибкий компонент Сформируете сетки страницы с помощью технологии Flexbox: упорядочите контент внутри блоков и расположите крупные блоки относительно друг друга, подготавливая страницу к завершённому виду.
      • Освоите базовые навыки работы с редактором кода — Visual Studio Code.
      • Познакомитесь с файловой структурой проекта и правилами разделения файлов стилей внутри неё.
      • Погрузитесь в CSS, изучите глобальные стили, и рассмотрите Flexbox — одну из самых популярных технологий для создания гибких сеток.
      • Научитесь управлять расположением элементов на странице, организуя их по своим правилам.
  5. Этап 5
    1. Верстаем раздел страницы Разработаете основные смысловые блоки страницы с помощью технологии Grid: сверстаете шапку, подвал и крупные секции.
      • Продолжите изучать создание сеток на страницах и освоите новую технологию — CSS Grid.
      • Узнаете, как использовать новые семантические теги для структурирования разделов страницы, углубите знания в области доступности сайтов и компонентного подхода к разработке.
      • Познакомитесь с принципами самотестирования кода и рассмотрите методы работы с динамическим контентом — сможете эффективно управлять его изменениями на странице.
  6. Этап 6
    1. Верстаем форму Сверстаете разные формы для проекта: входа и регистрации, подписки, отправки заявки, фильтра каталога.
      • Научитесь создавать и стилизовать формы в HTML, которые будут удобны и понятны для пользователей.
      • Узнаете, как сделать так, чтобы сайт одинаково отображался в разных браузерах.
      • Будете использовать современные селекторы CSS для более точной и гибкой стилизации.
      • Освоите методы позиционирования элементов, чтобы располагать их именно там, где вам нужно.
      • Познакомитесь с техникой использования SVG-спрайтов для оптимизации графики.
      • Глубже разберёте понятие доступности, чтобы делать сайты удобными для всех пользователей.
  7. Этап 7
    1. Создаём адаптивную стилизацию Разработаете адаптив с помощью технологии Sass — подготовите страницу к отображению на планшетах и мобильных устройствах.
      • Познакомитесь с основами адаптива страниц, чтобы ваши сайты отлично выглядели и работали на любом устройстве.
      • Изучите, как адаптировать изображения под разные размеры экранов и обеспечивать их чёткость на retina-дисплеях.
      • Узнаете, как создавать кросс-платформенные сайты, которые одинаково хорошо функционируют на всех устройствах и платформах.
      • Погрузитесь в мир препроцессора SCSS, чтобы упрощать и ускорять работу с CSS.
      • Углубитесь в знакомство с Figma и разберёте новые возможности этого инструмента.
  8. Этап 8
    1. Верстаем адаптивные разделы Создадите резиновые страницы — подготовите максимально гибкую вёрстку под отображение на любой ширине экрана и любом устройстве.
      • Научитесь создавать резиновую вёрстку, чтобы ваши сайты динамически подстраивались под размеры экрана.
      • Узнаете, как использовать адаптивное позиционирование элементов, чтобы они оставались на своих местах вне зависимости от устройства.
      • Углубитесь в создание адаптивных сеток с помощью Grid, чтобы легко управлять расположением контента.
      • Познакомитесь с чек-листом для самотестирования, который поможет вам самостоятельно проверять и улучшать качество своего кода.
  9. Этап 9
    1. Разрабатываем интерфейсные анимации Анимируете страницу: оживите отдельные элементы и создадите анимации, состоящие из десятков шагов, для крупных блоков.
      • Погрузитесь в мир анимации — начнёте со знакомства с её историей и основными принципами.
      • Поймёте, как создавать микроанимации, которые добавят интерактивности и живости вашим проектам.
      • Освоите многоступенчатые анимации, которые позволят вам создавать сложные и плавные переходы.
      • Научитесь анимировать SVG-графику, чтобы ваши изображения оживали на странице.
      • Узнаете, как использовать режим Present в Figma для создания анимаций, чтобы понимать, что всё работает именно так, как задумано.
  10. Этап 10
    1. Готовим вёрстку к продакшену Подготовите готовую вёрстку страницы к публикации: исправите баги и оптимизируете скорость загрузки страницы с помощью Lighthouse.
      • Познакомитесь с ключевыми принципами оптимизации сайтов для повышения их производительности.
      • Научитесь проверять качество своего сайта с помощью инструмента Lighthouse, чтобы выявлять и исправлять возможные проблемы.
      • Узнаете, как создавать и подключать графику в формате WebP для уменьшения размера изображений без потери качества.
      • Изучите процессы подготовки сайта к публикации, чтобы он был готов к запуску и работал максимально эффективно.

Партнёр курса — Газпромбанк.Тех

7-е место в рейтинге ИТ-работодателей финтех-отрасли по данным исследования Хабр и ЭКОПСИ в 2023 году

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

Научим всем ключевым навыкам HTML-верстальщика

Должность

HTML-верстальщик

Навыки

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

Инструменты

Кроме технических навыков, вы прокачаете софт скилы

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

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

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

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

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

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

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

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

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

  • Занимаетесь
 в удобное время Всё обучение проходит в удобном личном кабинете. Доступ к материалам курса останется у вас навсегда.
  • Практикуетесь Вас ждут более 80 заданий от реальных компаний. Вы закрепите навыки на практике и будете готовы к настоящей работе.
  • Получаете обратную связь Наставник проверит ваше задание в течение 24 часов с момента отправки работы. Если возникнут вопросы, он ответит на них прямо 
на платформе и в чате.
  • Присоединяетесь к комьюнити В Telegram-чате эксперты и другие студенты подскажут, где найти ответы на самые сложные вопросы.

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

Поддержим вас на пути
к новой профессии

  • Наставники
    Помогут с трудными заданиями, проверят ваши работы и подскажут, как сделать их лучше.
  • Координаторы
    Помогут сориентироваться на платформе и решить организационные вопросы.
  • HR-консультант
    Поможет в поиске работы. Вместе вы составите план развития, резюме и портфолио. Консультант подготовит вас к собеседованиям
 и даст доступ к закрытому каналу 
с вакансиями.
  • Служба заботы
    Поможет установить лицензионные программы и решить технические вопросы.

Ваши наставники

  • Маша Кузьмичева Тимлид в компании «Лига А»
    Была сначала разработчицей, а затем доросла до тимлида в компании «Лига А». Руководила отделом стажировки и работала с ребятами, которые только начинают свой путь в IT.

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

    «Мария мотивировала меня, помогала, когда возникали сложности. Поначалу я боялась задавать куратору вопросы, но Мария научила меня, что в этом нет ничего страшного».
  • Максим Кирпичников Бэкенд-разработчик в Qtim. 3+ лет в сфере веб-разработки
    Разработал вместе с командой бэкенд для одного из флагманских проектов компании — «Онлайн школа № 1».

    «Огромное спасибо моему куратору Максиму. Всегда подскажет, как доработать код. Быстро отвечает на вопросы и проверяет работы. Настоящий профессионал».
  • Михаил Костяков Фрoнтенд-разработчик в компании kokoc group
    5 лет в разработке, создаёт приложения и ботов для Telegram, ведёт блоги на Хабре, Дзене и Telegram-канал. Преподаёт программирование и пишет образовательные материалы.

    «Спасибо куратору Максиму за поддержку. Максим не только проверял мои работы, но ещё всегда делился полезными статьями и материалами, старался заинтересовать меня, на протяжении всего курса. Мне как новичку в IT это очень важно».

Где работают участники курсов Skillbox

Поможем вам достичь карьерных целей

  • За 4 года

    мы трудоустроили более 20 000 студентов

  • 2 200+ компаний

    находятся в нашей базе работодателей

  • Более 20% студентов

    берут заказы на фрилансе во время обучения

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

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

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

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

⭐ 97,5% участников довольны курсом

Понравилось, что все необходимые знания собраны в грамотном для изучения порядке. Спикеры в видео всё хорошо объясняют на примерах. Есть возможность учиться сразу на практике. К тому же, никто не заставляет проходить курс. Мой прогресс — это моя ответственность и моё желание. Для меня это плюс.

Жаль, что доступ к курсам даётся на определённый срок. По крайней мере, когда я брал профессию Frontend-разработчика, доступ, по-моему, давался на три года. Для меня это недостаточный срок, чтобы качественно изучить весь материал. Хотя, может быть, проблема во мне.
Очень нравится формат курса и фидбэк спикеров в Telegram-чате. В модулях немного не хватает рассмотрения проблем, которые могут встречаться в профессии в будущем.

Курсы Skillbox используют крупные вузы России

ДВФУ, УРФУ и МИРЭА уже выбрали курсы Skillbox для обучения своих студентов, а вы будете учиться по ним индивидуально.

Подтверждение ваших навыков

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

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

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

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

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

  • Рассрочка без процентов

    Без переплат, первого взноса или дополнительных процентов

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

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

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

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

  • 65 920
  • 56 032
  • -15%
4 669 ₽/мес
  • В рассрочку на 12 месяцев

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

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

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

Спасибо!

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

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

  • 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 оценки

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

  • Я никогда не разрабатывал сайты. У меня получится?
    Конечно! У вас всё получится даже без специальных знаний, главное — не забывайте практиковаться. С трудными задачами помогут эксперты, которые будут сопровождать вас на протяжении всего курса.
  • Смогу ли я совмещать работу и обучение?
    Да, вы можете заниматься в свободное от работы время. Однако чтобы пройти курс за 9 месяцев, мы советуем уделять обучению по 2 часа в день. Но такой график необязательно соблюдать, вы можете проходить курс в удобном темпе.
  • Какой компьютер потребуется для учёбы?
    • Операционная система: Windows 10.0 или выше, macOS 10.15 или выше, Linux — актуальные версии ОС.
    • Процессор: 4-ядерный процессор 2,5 Ггц и выше.
    • Жёсткий диск: от 18 Гб свободного места.
    • Оперативная память: от 4 Гб и выше.
    • Видеокарта: Intel HD Graphics 4000 и выше, Nvidia 330m и выше, ATI Radeon HD 4850 и выше.
    • Разрешение экрана: для комфортной работы желательно 1920×1080.
    • Стабильное подключение к сети с устройства (рекомендованная скорость от 20 Мбит).
  • Нужно ли устанавливать программы для работы на курсе?
    Заранее ничего скачивать не нужно. Во время курса мы поможем вам установить весь необходимый софт для работы.
  • Кто будет мне помогать в обучении на платформе?
    У вас будут проверяющие эксперты и куратор в Telegram-чате курса. Они прокомментируют практические работы, дадут полезные советы и ответят на любые вопросы. Вы сможете перенять их опыт, профессиональные знания и лайфхаки.
  • Нужно ли знать английский?
    Совсем необязательно. Названия встроенных функций и выражений на языках программирования вы запомните в процессе. А незнакомые фразы можете перевести с помощью Google Translate. К тому же у вас будет доступ к урокам и материалам онлайн-платформы для изучения английского. Сможете подтянуть грамматику и расширить словарный запас.
  • Хватит ли мне проектов в портфолио по окончании профессии?
    Да, за это не волнуйтесь. К концу обучения у вас будет портфолио из самых разных типов проектов:
    • сайты с возможностью купить товар или услугу, записаться на мероприятие;
    • стриминговые сервисы с музыкой, подкастами, фильмами и сериалами;
    • платформы для обработки данных клиентов компании, документов, счетов. 

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


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

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

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

  • Какой документ я получу после окончания курса?
    В конце обучения получите сертификат установленного образца. Мы обучаем по государственной лицензии № Л035−1 298−77/179 609.
  • Сколько платят на фрилансе за создание сайтов?
    Зависит от масштабов проекта. Например, на портале Хабр Фриланс вы можете найти заказы на вёрстку от 30 000 рублей и на разработку интернет-магазина, которая может стоить сотни тысяч. Иногда требуется не просто создать сайт «под ключ», а поправить что-то в существующем коде. Такие заказы стоят недорого. Но если брать сразу несколько таких в месяц, у вас появится хороший дополнительный источник заработка.