Текст площадки «Sharewood». Упомянутые цены и обещанные результаты могут быть неактуальны; условия покупки проверяйте у продавца.
На этом курсе вы научитесь делать настоящие проекты, такие же по уровню сложности, как в индустрии. И будете делать их правильно, чтобы после обучения выдавать результат высокого уровня, за который компании готовы платить.
Читать полное описание
На этом курсе вы научитесь делать настоящие проекты, такие же по уровню сложности, как в индустрии. И будете делать их правильно, чтобы после обучения выдавать результат высокого уровня, за который компании готовы платить.
Учим делать правильно
Актуальные стандарты качества: не нужно переучиваться после курса.
Понимание полного цикла работы верстальщика.
Фундаментальные и структурированные знания необходимых технологий.
Опыт работы с дедлайнами и планирования работы.
Что входит в программу курса
Во время курса вы будете работать как настоящие верстальщики: поработаете с системой контроля версий на сайте github.com и с графическим макетом в редакторе Figma, создадите выразительную и доступную разметку, построите сетки страниц на гридах, поработаете с кастомными свойствами, оптимизируете код и подготовите завершённый проект к публикации. На каждом этапе вашу работу будет проверять и комментировать наставник.
Макет в Figma
Доступная разметка
Современные стили
Удобная сетка
Один курс · разные способы доступа
Где удобнее учиться?
Сравните цену и то, как будете заниматься.
Выбирайте не только по цене
ЦенаСумма и выгодность предложения
Удобство интерфейсаОценка формата занятий
Встроенный просмотрБез скачивания всего курса
Занятия с телефонаБез работы с архивами
Без рекламыПри работе с материалами
Найти нужный моментНе пересматривая весь урок
Разобраться в темеПомощь по содержанию, не куратор
Эти данные взяты из программы и описания площадки. Пустое поле означает, что на странице курса ответа не было.
Материалы
Познакомимся со спецификацией Grid Layout: основные понятия, устройство шаблонов (строки, колонки, линии, области), ручная и автоматическая раскладка, многослойность в гриде, баги и ограничения гридов.Проверено 28.09.2026 · Источник ↗︎
Познакомимся с преподавателями, наставниками и учебным процессом на курсе. Рассмотрим устройство веба и чем вы будете заниматься на работе. Установим и настроим инструменты для работы.Время не указано
Раздел 2.РазметкаВремя не указано
Создадим семантичную, доступную и выразительную разметку страниц проектов по макету.Время не указано
Раздел 3. ГрафикаВремя не указано
Экспортируем графику из макета.Время не указано
Раздел 5. Сетки страниц на флексахВремя не указано
Построим крупные сетки страниц с помощью флексов.Время не указано
Раздел 6. Сетки компонентов на флексахВремя не указано
Создадим мелкие сетки компонентов страниц при помощи флексов.Время не указано
Раздел 7. Сетки компонентов на гридахВремя не указано
Создадим мелкие сетки компонентов страниц при помощи гридов.Время не указано
Раздел 8. Декоративные элементыВремя не указано
Добавим на страницы проектов мелкие декоративные и иконочные графические элементы. Стилизуем текстовые блоки, декоративные элементы внутри сеток компонентов, кнопки и ссылки.Время не указано
Раздел 9. Попапы, слайдеры, формыВремя не указано
Сверстаем всплывающие элементы. Разберём приёмы стилизации форм и их элементов. Рассмотрим состояния и позиционирование элементов на странице.Время не указано
«В Курсе» — наш основной вариант для перехода. В таблице — возможности сервисов; состав конкретного курса уточняйте перед оплатой.
Как мы оцениваем и что входит в доступ
Звёзды — наша оценка, не отзывы покупателей. Удобство: 2 базовых балла, по одному за занятия без обязательного скачивания, навигацию по курсу и встроенного помощника. Оценка описывает формат сервиса, а не проверку каждого урока.
Цена сравнивается только при подтверждённых одинаковых тарифе, сроке и виде оплаты. Разница с минимальной ценой до 10% — 5 звёзд, до 30% — 4, до 60% — 3, до 100% — 2, больше — 1. Устаревшие и неизвестные цены не оцениваются. Прочерк означает, что данных недостаточно, а не что функции нет.
В Курсе
Курс ещё не подтверждён в библиотеке. Пока доступен поиск во «В Курсе»; цену и возможность добавления нужно уточнить.
Если ваша подписка уже включает этот курс, отдельная покупка не нужна.
Тарифы проверены 02.10.2026
Познакомимся со спецификацией Grid Layout: основные понятия, устройство шаблонов (строки, колонки, линии, области), ручная и автоматическая раскладка, многослойность в гриде, баги и ограничения гридов.
Условия проверены 28.09.2026. Перед оплатой проверьте состав предложения у продавца.
Познакомимся с преподавателями, наставниками и учебным процессом на курсе. Рассмотрим устройство веба и чем вы будете заниматься на работе. Установим и настроим инструменты для работы.
Время не указано
Познакомимся со структурой курса, сделаем обзор личных проектов и критериев качества, по которым они будут оцениваться.Время не указано
Узнаем, кто такие авторы, кураторы и наставники курса.Время не указано
Поговорим о том, из чего состоят сайты, кто и как их делает, и за что в этом процессе отвечает верстальщик.Время не указано
Посмотрим на инструменты для работы на курсе: редакторы графики и кода, браузеры и отладчики, систему контроля версий.Время не указано
Разберём процесс работы над проектом и его защиту.Время не указано
СтатьиВремя не указано
Статьи, которые помогут выбрать редактор кода, разобраться с принципами работы браузеров, Git и GitHub.Время не указано
ПроектыВремя не указано
Выбираем наставника.Время не указано
Настраиваем инструменты разработки, создаём репозитории проектов.Время не указано
Отрабатываем процесс выполнения заданий. Вносим изменения в проект и отправляем их в GitHub.Время не указано
Раздел 2Время не указано
РазметкаВремя не указано
Создадим семантичную, доступную и выразительную разметку страниц проектов по макету.Время не указано
Познакомимся с синтаксисом HTML, погрузимся в тонкости тегов и их атрибутов, поговорим о семантике.Время не указано
Посмотрим, как работает спецификация, разберём категории тегов и правила их вкладывания, разберём сложные случаи разметки.Время не указано
Познакомимся с интерфейсом Figma, научимся анализировать макет и выделять из него уникальные и повторяющиеся блоки.Время не указано
Научимся выстраивать базовую структуру страницы и использовать классы для именования блоков.Время не указано
ДемонстрацииВремя не указано
Интерактивные демонстрации по разметке учебного проекта.Время не указано
ТренажёрыСтатьиВремя не указано
Тренажёры для знакомства с HTML.Время не указано
Статьи о том, как правильно создавать семантическую HTML-разметку.Время не указано
ПроектыВремя не указано
Получаем макеты в Figma.Время не указано
Создаём и размечаем страницы проекта.Время не указано
Раздел 3Время не указано
ГрафикаВремя не указано
Экспортируем графику из макета.Время не указано
Изучим интерфейс Figma и научимся снимать с макета параметры блоков и текста.Время не указано
Разберёмся в форматах графики, научимся выбирать правильный формат, экспортировать и оптимизировать изображения.Время не указано
Научимся создавать файловую структуру проекта, использовать относительные пути к ресурсам на примере графики.Время не указано
ДемонстрацииВремя не указано
Интерактивные демонстрации по внедрению графики учебного проекта.Время не указано
ТренажёрыСтатьиВремя не указано
Статьи про базовые возможности и эффективную работу в Figma и про особенности графических форматов.Время не указано
ПроектыВремя не указано
Экспортируем растровую и векторную графику из Figma.Время не указано
Подключаем контентную графику в разметку.Время не указано
Раздел 4Время не указано
Базовая стилизацияВремя не указано
Выполним базовую стилизацию страниц проекта.Время не указано
Научимся создавать файловую структуру проекта, использовать относительные пути к ресурсам на примере стилевых файлов.Время не указано
Погрузимся в основы CSS и разберёмся, что такое наследование, каскад и специфичность.Время не указано
Внедрим контентную и декоративную графику на страницы проекта.Время не указано
Подключим шрифты, поработаем с типографикой и зададим фоны элементам.Время не указано
ДемонстрацииВремя не указано
Интерактивные демонстрации по базовой стилизации учебного проекта.Время не указано
ТренажёрыСтатьиВремя не указано
Тренажёры для знакомства с базовым синтаксисом CSS, возможностями по стилизации текста и управлению фоном.Время не указано
ПроектыВремя не указано
Подключаем шрифты.Время не указано
Выполняем базовую стилизацию: текстовые параметры, фоны крупных блоков, текстуры.Время не указано
Раздел 5Время не указано
Сетки страниц на флексахВремя не указано
Построим крупные сетки страниц с помощью флексов.Время не указано
Разберёмся в боксовой модели и познакомимся с типами боксов.Время не указано
Научимся анализировать сетки на макетах и определять крупные сетки страниц.Время не указано
Познакомимся со спецификацией Flexible Box Layout: оси флексов, их направление и расположение вдоль них флекс-элементов; растяжение, сужение и базовый размер флексов.Время не указано
ДемонстрацииВремя не указано
Интерактивные демонстрации по созданию крупных сеток страниц учебного проекта.Время не указано
ТренажёрыСтатьиВремя не указано
Статьи, которые помогут разобраться с особенностями флексов, блочной модели и приёмами построения сеток.Время не указано
Тренажёры для знакомства с блочной моделью документа, флексами и приёмами построения сеток.Время не указано
ПроектыВремя не указано
Описываем крупные сетки страниц на флексах.Время не указано
Сравниваем вёрстку с макетом.Время не указано
Раздел 6Время не указано
Сетки компонентов на флексахВремя не указано
Создадим мелкие сетки компонентов страниц при помощи флексов.Время не указано
Разберём особенности мелких сеток.Время не указано
Узнаем, что такое переполнение и как с ним справиться при помощи флексов.Время не указано
Поговорим про тонкости и ограничения флексов: порядок флекс-элементов, многострочный флекс-контейнер и расположение строк внутри него.Время не указано
ДемонстрацииВремя не указано
Интерактивные демонстрации по созданию мелких сеток компонентов страниц учебного проекта.Время не указано
ТренажёрыСтатьиВремя не указано
Статьи, которые помогут разобраться с особенностями многострочных флексов.Время не указано
Тренажёры для погружения в работу с флексами.Время не указано
ПроектыВремя не указано
Описываем мелкие сетки компонентов страниц на флексах.Время не указано
Сравниваем вёрстку с макетом.Время не указано
Раздел 7Время не указано
Сетки компонентов на гридахВремя не указано
Создадим мелкие сетки компонентов страниц при помощи гридов.Время не указано
Познакомимся со спецификацией Grid Layout: основные понятия, устройство шаблонов (строки, колонки, линии, области), ручная и автоматическая раскладка, многослойность в гриде, баги и ограничения гридов.Время не указано
Разберём типовые ситуации, когда гриды подходят лучше флексов.Время не указано
Поговорим про совместное использование гридов и флексов, рассмотрим преимущества и недостатки каждой технологии.Время не указано
ДемонстрацииВремя не указано
Интерактивные демонстрации по созданию мелких сеток компонентов страниц учебного проекта.Время не указано
ТренажёрыСтатьиВремя не указано
Тренажёры для знакомства с гридами.Время не указано
Статьи, которые помогут разобраться с особенностями гридов.Время не указано
ПроектыВремя не указано
Описываем мелкие сетки компонентов страниц на гридах.Время не указано
Сравниваем вёрстку с макетом.Время не указано
Раздел 8Время не указано
Декоративные элементыВремя не указано
Добавим на страницы проектов мелкие декоративные и иконочные графические элементы. Стилизуем текстовые блоки, декоративные элементы внутри сеток компонентов, кнопки и ссылки.Время не указано
Научимся использовать оформительскую и программируемую графику.Время не указано
Научимся стилизовать блоки при помощи двумерных трансформаций, рамок, теней и градиентов.Время не указано
Рассмотрим псевдоэлементы и точечное позиционирование элементов.Время не указано
Погрузимся в тонкости типографики и визуальные правила оформления контента.Время не указано
Научимся стилизовать интерактивные состояния ссылок и кнопок.Время не указано
ДемонстрацииВремя не указано
Интерактивные демонстрации со стилизацией декоративных и контентных элементов учебного проекта.Время не указано
ТренажёрытатьиВремя не указано
Тренажёры для закрепления навыков создания декоративных элементов.Время не указано
ПроектыВремя не указано
Добавляем мелкие декоративные и иконочные графические элементы.Время не указано
Стилизуем текстовые блоки, декоративные элементы внутри сеток компонентов, кнопки и ссылки.Время не указано
Раздел 9Время не указано
Попапы, слайдеры, формыВремя не указано
Сверстаем всплывающие элементы. Разберём приёмы стилизации форм и их элементов. Рассмотрим состояния и позиционирование элементов на странице.Время не указано
Научимся оформлять нестандартные элементы форм.Время не указано
Разберёмся с тем, как встраивать модальные окна и выпадающие элементы на страницу.Время не указано
Научимся стилизовать интерактивные состояния компонентов форм и слайдеров.Время не указано
Альтернативы для выбора
Похожие курсы по этой теме
Это другие программы на близкую тему. Они не считаются тем же курсом: сравните содержание, преподавателей и условия.
Этот курс предназначен для начинающих, желающих освоить основы веб-разработки и научиться создавать современные, адаптивные и интерактивные сайты. В ходе курса вы изучите три ключевых технологии веб-разработки: HTML, CSS и JavaScript. Мы начнем с самого простого — разберем структуру веб-страницы и основы верстки, затем
Что известно об альтернативе
Документ: На странице курса указано: сертификат не выдаётся. источник ↗︎
Этот онлайн-курс посвящен разработке веб-сайтов с использованием Python и Flask. Вы познакомитесь с основами веб-разработки, научитесь создавать динамические веб-приложения. Курс охватывает все от HTML и CSS до продвинутых тем, таких как аутентификация пользователей.
Что известно об альтернативе
Документ: На странице курса указано: сертификат не выдаётся. источник ↗︎
![Обложка курса: «HTML и CSS. Профессиональная вёрстка сайтов. 18.09 — 20.11» [HtmlAcademy]. Площадка: Sharewood](/_next/image?url=%2Fmedia%2Fcourses%2Fhtml-i-css-professionalnaya-verstka-saytov-18-09-20-11-htmlaca-sharewood-editorial-7b5502eb.webp&w=1200&q=75)
![Обложка курса: «Веб-разработчик 6.0 Продвинутый HTML,CSS+JQUERY» [Исламов]. Площадка: Sharewood](/_next/image?url=%2Fmedia%2Fcourses%2Fveb-razrabotchik-6-0-prodvinutyy-html-css-jquery-islamov-sharewood-editorial-9bbf3208.webp&w=640&q=75)