До 6 мая

Повышение цен со следующего потока «Джуниора» — зафиксируйте старую стоимость

Подробнее →

Logotype

Навигация

8 (800) 700-22-51

Звонок по России бесплатный

WhatsApp / Telegram

Общение через мессенджер

Войти в личный кабинет

Научитесь превращать
дизайн в работающий сайт

За 2 месяца освойте навык верстки с нуля до продвинутого уровня

  • icon

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

  • icon

    Соберете 6 адаптивных проектов и заверстаете собственный сайт-портфолио

  • icon

    Выделитесь среди конкурентов на рынке труда за счет продвинутого навыка верстки

Верстка — база веб-разработки

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

На курсе вы изучите HTML и CSS на продвинутом уровне, освоите Sass и Gulp —инструменты для быстрой работы, а также поймете, почему «этот блок нельзя реализовать, как в макете».

HTML и CSS

HTML определяет структуру страницы, размечая ее на различные элементы — заголовки, списки, ссылки.

CSS задает стили для этих элементов — расположение, цвета, шрифты, отступы и многое другое.

Flexbox и Grid

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

Веб-доступность

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

Кому и зачем учиться верстать сайты?

Этот навык поможет вам легче погрузиться в профессию frontend-разработчика и найти общий язык с коллегами.

  • Тем, кто только начинает в IT

    Вы хотите развиваться в веб-разработке. Навык верстки позволит вам избавиться от страха писать код, более плавно влиться в профессию.

  • Junior frontend-разработчикам

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

  • Специалистам смежных направлений

    Вы работаете веб-дизайнером, разработчиком сайтов на Tilda или другим IT-специалистом. Знание верстки позволит предлагать более комплексные услуги, за которые платят больше.

А в чем разница?

Очевидные различия между верстальщиком и frontend-разработчиком

before

Переводит дизайн из макета в код так, чтобы все элементы сайта стояли на своих местах. Следит, чтобы веб-страницы правильно отображались на разных устройствах и в разных браузерах.

after

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

Верстка — важный навык разработчика

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

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

Как вы научитесь верстать

Вы будете много писать код и верстать макеты, а еще...

Удобный формат обучения

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

Кто будет вести вас за руку

Будете учиться у лучших авторов

Чтобы стать лучшим, нужно учиться у лучших. Мы работаем с топовыми авторами, которые совместно с нашими техническими экспертами составляли эту программу.

Дополнительные проекты,
которые вы разработаете во время учебы

NaN / 6

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

HTML&CSS — Бесплатно

2 недели (можно быстрее)

Изучите базовые технологии frontend-разработки, не требующие предварительного знания теории. Применив полученные знания, самостоятельно разработаете свой первый сайт.

HTML

1. Как работает Web

2. Что такое HTML&CSS

3. Основы и синтаксис

4. Текстовый редактор VSCode

5. Структура HTML-документа

6. Секция head

7. Работа с текстом

8. Картинки и ссылки

9. Списки

10. Таблицы

11. Формы

12. Линейные и блочные элементы

13. Классы. ID

14. HTML5 Семантика

15. Заливаем сайт на GitHub

CSS

1. Что такое CSS

2. Синтаксис CSS

3. Способы подключения CSS

4. Селекторы

5. Как работать с DevTools

6. Работа с текстом

7. Цвета

8. Границы элементов

9. box model

10. Ссылки и псевдоселекторы

11. Списки и таблицы

12. Свойство display. Inline & Block & Inline-block

13. Свойство Position

14. Введение в адаптивную верстку с Media

15. Deploy. Проверка и личная обратная связь

Flexbox

1 неделя

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

1. Flexbox: когда он полезен и что умеет.
2. Сравнение старого подхода на Float с Flexbox.
3. Элементы во flex-контейнере и их расположение.
4. Оси и их направление.
5. Перенос flex-элементов на новые строки.
6. Работа с конкретным flex-элементом в контейнере, а не со всеми сразу.
7. Визуальный порядок отображения flex-элементов через CSS и его влияние на доступность.
8. Работа с размерами flex-элементов.
9. Разделение свободного пространства между flex-элементами.
10. Значения safe и unsafe.
11. Отличие flex-start от start и left, а также flex-end от end и right.
12. Направление текста на сайте: атрибут dir и CSS-свойство direction.
13. Значения self-start и self-end.

Grid

1 неделя

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

1. Grid: когда он полезен и что умеет.
2. Сравнение старого подхода на таблицах с Grid.
3. Работа с grid-контейнером.
4. Управление колонками и рядами в grid-раскладке.
5. Размеры и расположение элементов в grid-контейнере.
6. Функции и ключевые слова, которые используются при работе c Grid.
7. Сравнение Grid и Flexbox.

Advanced CSS

2 недели

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

1. Единицы измерения в CSS: в чем их отличия и когда какие применять.
2. Селекторы: их виды и как они составляются.
3. Влияние специфичности и расчет ее значения для различных способов обращения к элементам.
4. Позиционирование элементов, cвойство position со всеми его значениями.
5. Ключевые слова initial, inherit, unset, revert и как они себя ведут для различных свойств.
6. Поведение ключевого слова auto для различных свойств.
7. Псевдоэлементы: для чего нужны и как их использовать.
8. Работа с кастомными свойствами (Custom properties).
9. Работа с переходами и трансформациями элементов, создание CSS-анимаций.
10. CSS-методологии, БЭМ.
11. Медиавыражения: предпочитаемая цветовая схема, ориентация и разрешение экрана.
12. Подходы Desktop First и Mobile First, а также Graceful degradation и Progressive enhancement.
13. Директивы @supports и @import, условная загрузка ресурсов с медиавыражениями.
14. Способы подключения шрифтов и управление их поведением во время загрузки.
15. Форматы шрифтов, веб-безопасные шрифты, директива @font-face, вариативные шрифты.
16. Браузерные движки, спецификации, W3C и WHATWG, этапы при добавлении новых возможностей в CSS, вендорные префиксы, текущая поддержка свойств браузерами.

Advanced HTML

1 неделя

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

1. Почему семантика важна при описании разметки.
2. Формирование структуры веб-страницы с помощью семантических тегов.
3. Возможности HTML для оформления текста и их влияние на семантику.
4. Возможности HTML для создания интерактивных элементов, работа с <iframe>.
5. Изображения: их форматы и когда какие использовать.
6. Возможности HTML для вставки изображений и медиа контента, специальные теги;
7. SEO, мета-теги и robots.txt.
8. Превью сайта в социальных сетях с помощью Open Graph разметки.
9. Формирование карточки сайта в поисковой выдаче с помощью микроразметки.

Практика на HTML и CSS

1 неделя

Закрепите изученные темы, сверстав Figma-макет сайта мобильного приложения на чистых HTML и CSS.

1. Верстка макета с нуля на чистых HTML и CSS.
2. Адаптация для маленьких размеров экрана.
3. Использование методологии БЭМ на практике.
4. Закрепление знаний, полученных в предыдущих модулях.

Sass

1 неделя

Поймете, что такое препроцессоры, изучите полезные возможности препроцессора Sass.

1. Препроцессоры и для чего они нужны.
2. Отличие препроцессора от постпроцессора, знакомство с PostCSS.
3. Вложенность, оператор &.
4. Sass-переменные, их отличия от кастомных свойств.
5. Модульность (@import, @use и @forward).
6. Шаблонные селекторы, директива @extend.
7. Миксины, директивы @include и @content.
8. Пользовательские функции.
9. Практика: верстка макета с Sass, а также перевод проекта с чистого CSS на Sass.

Gulp

1 неделя

Научитесь настраивать Gulp для автоматизации задач.

1. Инструменты автоматизации задач, что ими можно автоматизировать.
2. Базовые аспекты JavaScript, необходимые для работы с Gulp.
3. Задачи Gulp: создание и использование.
4. Sass в CSS, минификация стилей.
5. Автоматизация создания SVG-спрайтов.
6. Сборка и минификация JS-кода.
7. Транспиляция JS-кода с Babel для обеспечения поддержки старыми браузерами.
8. Локальный сервер с Browsersync.

Доступность

1 неделя

Поймете, что такое веб-досупность, почему она важна и какие есть возможности для ее обеспечения.

1. Понятие веб-доступности, a11y, WCAG.
2. Скринридеры, что такое Accessibility API, accessibility tree, accessible object.
3. Важность семантики для доступности.
4. ARIA, использование ARIA-атрибутов.
5. Проверка страницы на соответствие критериям доступности.
6. Общие рекомендации по доступности и какие бывают частые ошибки.

Практика

2 недели

Совместно с автором соберете собственный сайт-портфолио из Figma-макета и закрепите пройденные темы. Разработаете адаптивную версию для ПК и мобильных устройств.

Подведение итогов

1 неделя

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

Начните бесплатно учиться верстке

Изучите базовые технологии и напишите свой первый сайт

Получите документ после курса

По окончании курса вы получите сертификат от Result University, подтверждающий вашу квалификацию.

Выбирайте тариф, который подходит именно вам

1

Верстка

Верстка

Освойте навык верстки с нуля и научитесь превращать дизайн в работающий сайт.

Материалы

Длительность обучения 12 недель

Доступ к материалам на 12 месяцев

Промежуточные тестирования

Итоговый проект

10+ инструментов верстки

Сопровождение

Проверка заданий на платформе

Доступ в чат с наставником на 12 месяцев

Сертификат курса «Верстка»

Формат обучения

Вы пройдете курс в формате экспресс-курса.

Гарантировано вернем деньги

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

NEW

19 370 ₽

Пройдите бесплатную часть или оплатите. Доступ откроется после оплаты

1

Верстка

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

Если вы не нашли ответа на свой вопрос,задайте его

Что нужно знать для старта?

Для старта не нужны особые знания в программировании. Курс помогает сначала освоить основы HTML и CSS, а после нарастить знания в области верстки. Поэтому материал по силам не только тем, кто уже что-то знает об этих технологиях, но и новичкам.

Получу ли я сертификат?

Каждый выпускник курса «Верстка» получает сертификат от Result. Вы сможете приложить его к своему резюме.

Сколько длится курс?

Курс длится 12 недель, за это время вы изучите HTML, CSS, адаптивную верстку, Sass, Gulp. Доступ к курсу дается на 12 месяцев.

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

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

Сколько времени нужно будет уделять учебе?

Разным людям необходимо разное количество времени. На курсе «Верстка» в среднем вам потребуется 2-3 часа в день. Если окажется, что вам нужно больше времени, это не значит, что у вас не получится. Это значит ровно то, что нужно заниматься чуть больше, чтобы освоить материал.

На какое время доступен курс и чат?

Доступ к курсе и чату с наставниками открыт на 12 месяцев. Вы можете общаться с единомышленниками и делиться впечатлениями от обучения в любое время.

Что будет в чате?

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

Мы используем cookie. Продолжая использовать сайт, Вы даете свое согласие на использование cookie для хранения данных. Подробнее.