22.07
-20%

Профессия Джуниор Frontend разработчик — Начните карьеру в IT

Подробнее

Навигация

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, подтверждающий вашу квалификацию.

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

Верстка

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

Материалы

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

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

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

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

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

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

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

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

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

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

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

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

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

27 670 ₽

19 370 ₽

Экономия 8 300 ₽

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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