Главная Каталог курсов Программирование Веб-вёрстка
Участвует в распродаже Скидки до 50% действуют 0 дней 00:00:00
Веб-вёрстка
Курс

Веб-вёрстка

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

Иконка для блока Дисклеймер

Мы постоянно обновляем курс, чтобы вы получали навыки, которые прямо сейчас нужны работодателям. Последняя дата обновления — ноябрь 2022 года.

Кому подойдёт этот курс

  • Новичкам в разработке Новичкам в разработке

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

  • Начинающим верстальщикам Начинающим верстальщикам

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

Чему вы научитесь

  • Писать код на HTML и CSS

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

  • Основам программирования на JavaScript

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

  • Верстать сайты для любых экранов

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

  • Учитывать особенности браузеров при вёрстке

    Вы научитесь создавать сайты, которые будут выглядеть и работать одинаково в Google Chrome, Mozilla Firefox и Safari.

  • Проверять сайты на доступность

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

  • Работать в инструментах веб-разработчика

    Вы освоите систему контроля версий Git для работы в команде. Научитесь в режиме реального времени вносить правки в вёрстку с помощью Google Developer Tools.

Работы участников курса

Отзывы участников

  • Роман Шаблий Курс «Профессия Frontend-разработчик»
    Когда начинал проходить курс, искренне был в восторге. Мне понравился формат обучения на платформе и содержание материалов. Я смог заполнить определённые пробелы в знаниях, и это не может не радовать.

    Спикеры и кураторы очень грамотные, и хочется, чтобы иногда они объясняли материал немного дольше. Не так давно ввели автоматическую проверку практических заданий по модулям программирования, это нечто, очень круто!
  • Максим Винник Курс «Профессия Frontend-разработчик c нуля до PRO»
    Мне очень нравится спикер по вёрстке и мой куратор.

    Спикер, несмотря на свой огромный опыт, умеет донести информацию, как для маленького ребёнка. Привык к тому, что подобные люди обычно выпячивают свои знания напоказ.

    Куратор быстро работает. Дополнительно даёт чёткие и грамотные советы, которые не просто помогают выполнить практику, но и позволяют получать новые и закреплять уже полученные знания.
  • Влад Лесун Курс «Профессия Frontend-разработчик PRO»
    Материал очень доступно объясняют: надо немного приложить усилия, и всё получится. Куратор отличный, старается помочь разными способами и быстро. Спасибо!
  • Павел Федотенков Курс «Профессия Fullstack-разработчик на Python»
    Понравилась подача и содержание материала. Как организована сдача практических работ (выполнить следующую можно только после проверки предыдущей). Огромное количество дополнительного материала в виде ссылок на сторонние ресурсы и вложенных файлов.
  • Мария Ники Курс «Профессия Fullstack-разработчик на Python»
    Вы заставляете мозг думать, и это круто! Подача в самом простом и понятном виде, насколько это возможно для новичка вроде меня. Качество картинки и звука тоже супер, что немаловажно.
  • Татьяна Рубцова Курс «Профессия Специалист по кибербезопасности»
    Понравился качественный обучающий материал курса, и мне есть с чем сравнивать. Уже проходила курс по HTML/CSS в другом месте и думала, что в Skillbox закрою все практические задания очень быстро. Как же я ошибалась, мои знания оказались слишком слабыми. Зато сейчас я знаю гораздо больше, и мои сайты выглядят профессионально.

    Больше всего нравятся доброжелательные кураторы, которые всегда помогают. А формат обучения на платформе идеально подходит под мой ритм жизни. В общем, одни плюсы!
  • Кирилл Каримов Курс «Веб-вёрстка»
    Формат обучения очень удобный и адаптивный. Контент интересный и объёмный, но некоторые объяснения приходится искать в интернете.

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

  • Иллюстрация этапа обучения
    Регистрация

    Знакомитесь с платформой

    Платформа Skillbox — собственная разработка компании, которую мы постоянно улучшаем. Вас ждут видео, практические задания и общение с кураторами. Доступ к материалам откроется сразу после покупки курса.

  • Иллюстрация этапа обучения
    Теория

    Получаете знания

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

  • Иллюстрация этапа обучения
    Общаетесь с экспертами

    Посещаете вебинары

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

  • Иллюстрация этапа обучения
    Практика

    Выполняете задания

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

  • Иллюстрация этапа обучения
    Обратная связь

    Работаете с куратором

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

Поддержка и комьюнити для участников курса

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

  • Здравствуйте! Отправляю задание на проверку. Пожалуйста, ответьте на вопросы в комментариях.

    Кристина Аватар

  • Задание проверила, на вопросы ответила в файле. Отлично поработали, осталось немного доделать 😊

    Куратор Аватар

  • Спасибо, всё поправила 👍

    Кристина Аватар

Мы понимаем, как сложно бывает применять новые знания на практике, и поддержим вас на этом пути ❤️

Содержание курса

Вас ждут 2 уровня по HTML и CSS и более 200 видео. Сложность курса увеличивается постепенно. Мы постоянно обновляем курс, чтобы вы получали навыки, которые прямо сейчас нужны работодателям.

  • 4 месяца
  • 24 практических работы

  1. Базовый уровень

      1. Получите базовые навыки HTML и CSS, сможете верстать простые и средние по сложности веб-страницы с анимациями. Например, сайты компаний или лендинги — одностраничные сайты о товаре и услугах. Научитесь адаптировать сайт для отображения на разных устройствах: экране монитора, планшета и смартфона.

  2. Продвинутый уровень

      1. Изучите особенности вёрстки html-писем и отточите навыки работы с векторной графикой. Сможете создавать сложные и эффектные анимации. Узнаете, как ускорить время загрузки сайта. Автоматизируете сборку готового проекта, сможете минифицировать свой код, чтобы он меньше весил.
      2. Ускорите свою работу с CSS и освоите технологию Grid. Сможете создавать сложные сайты-каталоги.

Уже учились на каком-то курсе из программы?

Скажите об этом менеджеру — платить за них не придётся.

Спикеры курса

Год английского языка бесплатно

Skillbox запустил онлайн-платформу для изучения английского. Запишитесь на курс и получите годовой бесплатный доступ к материалам проекта.

Предложение действует для пользователей Skillbox, которые купили любую профессию с 22 декабря 2021 года.

Вас ждут:

  • методика ускоренного запоминания слов и грамматики;
  • персональная программа освоения языка, которая поможет заговорить с нуля.
Изображение KESPA

Ваше резюме после курса

Верстальщик

от 400 000 ₸

Владею инструментами:

Мои навыки:

  • Современные стандарты верстки: блочная, кроссбраузерная, резиновая, адаптивная
  • Знание HTML5 и CSS3, включая анимацию
  • Основы JavaScrip
  • Вёрстка с использованием Flexbox
  • Работа с фреймворком Bootstrap
  • Сборка проекта на Gulp и Webpack
  • Работа с макетом, векторной и растровой графикой: Figma
  • Работа с Git
  • Знание принципов БЭМ
  • Владение Pixel Perfect
  • Настройка хостинга, работа через FTP.

Мои проекты:

  1. Сайт строительной компании
  2. Сайт сетей отелей
  3. Платформа для подкастов / Лендинг арт-галереи
  4. Интернет-магазин
Изображение

Сертификат Skillbox

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

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

О Skillbox

Skillbox
в странах СНГ. На платформе вы сможете получить актуальные знания и освоить востребованную профессию из любой точки мира.
  • Старт курса: 5 апреля
  • Осталось: 7 мест

Стоимость обучения

  • Курс в подарок
  • Длительность рассрочки — 12 месяцев
  • Год английского бесплатно
  • 18 714 ₸/мес
  • 26 735 ₸/мес
Участвует в распродаже Скидки до 50% действуют 0 дня 00:00:00

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

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

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

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

Спасибо!

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

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

  • Я никогда не занимался вёрсткой. У меня получится?
    Да, курс подходит абсолютным новичкам без опыта в программировании. Но чтобы достичь результата, нужно постараться — выполнять практические задания, читать дополнительную литературу и разрабатывать итоговые проекты. В остальном помогут практикующие эксперты, которые будут сопровождать вас на протяжении всего курса.
  • Вижу много незнакомых терминов: CSS, JavaScript? Что всё это значит?
    HTML — самый распространенный язык верстки в интернете. Вы можете представить HTML как набор команд, который задаёт структуру и логику работы сайта.

    CSS — язык, описывающий стиль сайта. Если HTML отвечает за содержание, то на CSS расписывают внешний вид сайта.

    CSS Grid — инструмент в CSS: специальная сетка, которая помогает располагать элементы сайта симметрично и аккуратно.

    JavaScript (JS) — главный язык программирования в веб-разработке. На JS программируют функции сайта, добавляют интерактивность и описывают сценарии взаимодействия с пользователем. А ещё он прекрасно «дружит» с HTML и CSS.

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

    Webpack — инструмент, с помощью которого вы можете автоматизировать часть работы над вёрсткой.

    Pixel Perfect — подход в вёрстке, при котором каждый пиксель свёрстанного сайта занимает такое же положение, как и в макете у дизайнера. Если «наложить» дизайн на сайт, то разница будет минимальна.

    Visual Studio Code — бесплатный редактор кода для разработки веб-приложений.
  • Сколько часов в неделю мне нужно будет уделять обучению на платформе?
    В среднем пользователи платформы занимаются около 2 часов в день и завершают курс за 4 месяца. Но у нас нет жёстких дедлайнов — учитесь на платформе в комфортном для вас темпе.
  • Нужно ли устанавливать программы для работы на курсе?
    Заранее ничего скачивать не нужно. Во время курса мы поможем вам установить весь необходимый софт для работы и предоставим доступ к платным инструментам.
  • Чтобы разрабатывать сайты нужен мощный компьютер?
    Веб-вёрстка не требует много вычислительных ресурсов, поэтому для работы подойдёт средний ноутбук или компьютер. Вот минимальные характеристики к начинке:

    • Операционная система: Windows 8.0 или выше, macOS 10.12 (macOS Sierra) или выше.
    • Процессор: 4-ядерный с частотой 2,5 Ггц и выше.
    • Оперативная память: от 4 ГБ.
    • Видеокарта: Intel HD Graphics 4000, Nvidia 330m или ATI Radeon HD 4850 и выше.
    • Желательно, но необязательно, чтобы память была на SSD.
    • Разрешение экрана: желательно 1920×1080.
    • Доступ к интернету.
  • Нужно ли знать английский?
    Совсем необязательно. Названия встроенных функций и выражений в языках программирования вы запомните в процессе, а незнакомые фразы можно перевести с помощью Google Translate. К тому же у вас будет доступ к урокам и материалам онлайн-платформы для изучения английского. Сможете подтянуть грамматику и расширить словарный запас.
  • Как развиваться в профессии дальше?
    В веб-разработке всё быстро меняется: появляются технологии, фреймворки, в JavaScript и CSS завозят новые фичи. Поэтому невозможно один раз выучить что-то и всегда оставаться востребованным. Нужно постоянно развиваться в профессии — общаться с тимлидами в вашей компании, посещать конференции, читать статьи на Хабре по своей теме и другие ресурсы.
  • Кто будет мне помогать в обучении на платформе?
    У вас будут проверяющие эксперты и куратор в Telegram-чате курса. Они прокомментируют практические работы, дадут полезные советы и ответят на любые вопросы. Вы сможете перенять их опыт, профессиональные знания и лайфхаки.
  • Действуют ли какие-нибудь программы рассрочки?
    Да, вы можете купить курс в рассрочку — и спланировать свой бюджет, разбив всю сумму на небольшие ежемесячные платежи.