Проверьте структуру до оформления
Соберите разметку небольшой страницы с заголовками, навигацией и формой. Отключите CSS и проверьте, сохранился ли порядок чтения. Пройдите по интерактивным элементам клавишей Tab.
HTML / CSS · русская озвучка
Компетенция Верстальщик - HTML, CSS, JavaScript
Программа, практика и требования
Научиться превращать дизайн-макет в страницу, которая сохраняет смысл и удобство на разных экранах. «Компетенция Верстальщик» Михаила Непомнящего соединяет HTML, CSS, адаптивность и JavaScript для интерфейса. Предварительный опыт программирования не требуется.
RusUdemyПомогаем оформить выбранный курс в личном аккаунте Udemy — без общих аккаунтов и предоплаты.Подробнее- 4,8384 оценки на Udemy
- 1 224студента на Udemy
- 26 ч 31 минвидео · 80 лекций
- RUрусская речь преподавателя
Высокий рейтинг UdemyРусский язык · обновление ноябрь 2025
Перед началом
Подойдёт ли вам этот курс
Кому подойдёт
Новичкам без опыта кода и тем, кто знает отдельные CSS-свойства, но пока не может самостоятельно сверстать макет.
Что знать до старта
Базовое владение компьютером и интернетом. Предварительно знать HTML, CSS или JavaScript не требуется.
Что сможете сделать
Адаптивная страница по дизайн-макету с UI-компонентами и интерактивными элементами.
Учесть при выборе
JavaScript здесь изучается в задачах вёрстки. Для глубокой работы с языком есть отдельная программа автора; версия Bootstrap и приёмы из старых уроков требуют сверки.
Содержание и открытый урок
От макета — к странице, которую можно проверить
Курс подходит, когда отдельные теги и CSS-свойства пока не складываются в цельную работу. Сначала нужно описать структуру страницы, затем расположить блоки, настроить типографику, формы и поведение на узком экране. Михаил связывает эти задачи с макетами, БЭМ, SCSS, Flexbox и дополнительными уроками по Grid. JavaScript используется для интерактивности и подключения библиотек. Это начальный маршрут верстальщика; для глубокого изучения языка или React у преподавателя есть другие программы. Итоговый макет полезен как учебная работа, но для портфолио стоит добавить собственное решение и объяснить принятые решения, а не только повторить видео.
Перед стартом оцените открытый урок и подготовьте инструменты. JavaScript здесь изучается в задачах вёрстки. Для глубокой работы с языком есть отдельная программа автора; версия Bootstrap и приёмы из старых уроков требуют сверки.
Самопроверка · редакционные задания
Самопроверка: выдерживает ли страница изменения
Эти упражнения предложены редакцией RusUdemy для самостоятельной проверки навыков. Они не являются дополнительными уроками преподавателя и не предполагают проверку работ автором.
Измените контент и ширину
Подставьте длинный заголовок и дополнительный абзац, затем откройте страницу на ширинах 320, 768 и 1440 пикселей. Исправьте горизонтальную прокрутку и не привязывайте высоту текстового блока к одному примеру.
Соберите повторяемый компонент
Оформите карточку товара или услуги, добавьте второй экземпляр с другим содержимым. Проверьте, что имена классов и общие стили позволяют изменить обе карточки без копирования большого фрагмента CSS.
Закончите сценарий интерфейса
Добавьте простое меню или форму с понятными состояниями. Проверьте управление мышью и клавиатурой, ошибку ввода и узкий экран. Запишите, какие части вы реализовали самостоятельно и почему.
26 ч 31 мин видео · 80 лекцийСверить программу на Udemy
Вёрстка, инструменты и цельный проект
Программа начинается с HTML и CSS, затем переходит к макетам, более сложному оформлению, Bootstrap и интерактивности. Дополнительный блок посвящён Grid. В конце — последовательная вёрстка дизайн-макета. Темы ниже сгруппированы по рабочим задачам, а не обещают изучение всех инструментов frontend-разработки.
На дату проверки в открытых данных Udemy: 10 разделов, 80 лекций, 26 ч 31 мин видео. На установку инструментов, самостоятельную практику и разбор ошибок потребуется дополнительное время. Темы ниже сгруппированы редакцией; перед выбором сверяйте доступное оглавление на Udemy.
Сверстайте второй небольшой макет без пошагового видео. Проверьте содержимое, формы и адаптивность, затем решите, чего не хватает следующему проекту: базы JavaScript, инструментов или практики интерфейсов.
- 01
HTML, CSS и структура веб-страницы
- 02
Работа с макетами Figma, Photoshop и Zeplin
- 03
Формы, Flexbox, адаптивность и анимация
- 04
БЭМ, SCSS и организация стилей
- 05
Bootstrap и повторно используемые компоненты
- 06
JavaScript для интерфейса и подключение библиотек
- 07
Дополнительные материалы по CSS Grid
- 08
Полный проект вёрстки дизайн-макета
Когда программа подходит вашей задачеВы выбираете обучение. RusUdemy помогает с оформлением.
Пришлите ссылку на выбранный курс. Уточним текущую стоимость и поможем оформить его в вашем личном аккаунте Udemy. Материалы и прогресс останутся у вас.
01
Курс в Вашем аккаунте
Курс появляется в вашей личной библиотеке на Udemy. Никаких пиратских копий, общих аккаунтов или «серых» схем.
02
Без предоплаты
Вы оплачиваете покупку только после того, как курс появился в вашем аккаунте Udemy.
03
Покупка за 10 минут
Обычно от первого сообщения до появления курса в аккаунте проходит около 10 минут.
04
Живой человек, не бот
В Telegram отвечает живой человек: можно задать вопрос и получить качественную поддержку по покупке.
Сначала согласуем курс и условия. Оплата после появления курса в аккаунте.
Опыт работы с сервисом
Отзывы клиентов RusUdemy
Купил курс по программированию. Михаил, спасибо за помощь с созданием нового аккаунта, быстроту ответа и оформления курса. Хороший сервис
Отзыв от:
Купил курс по программированию. Михаил, спасибо за помощь с созданием нового аккаунта, быстроту ответа и оформления курса. Хороший сервис
Отзыв от:
Спасибо Михаилу за помощь! Все получилось быстро и легко!
Отзыв от:
Помогли с приобретением курса за 5 мин. Буду обращаться ещё. Михаилу респект!
Отзыв от:
Прекрасный сервис, буквально за пару минут купил курс. Всем советую
Отзыв от:
Довольно долго подбирал сервис, который поможет на udemy купить курс по системному дизайну. В итоге остановился на этом, Михаил помог быстро оплатить udemy, я получил доступ к курсу. В дальнейшем только здесь планирую приобретать курсы udemy
Отзыв от:
Ответы перед стартом