Учебный план
О курсе
Онлайн курс «Адаптивная верстка сайтов» — это программа профессиональной переподготовки, направленная на освоение принципов создания сайтов, корректно отображающихся на разных устройствах: смартфонах, планшетах, ноутбуках и больших экранах. Курс помогает научиться проектировать гибкую структуру страниц, использовать медиазапросы, относительные размеры, современные CSS-сетки и mobile-first подход.
В рамках курса Вы изучите, что такое адаптивная верстка, responsive design, viewport, breakpoints, медиазапросы, гибкие изображения, Flexbox, CSS Grid, относительные единицы измерения, мобильная навигация, адаптивные формы и проверка сайта на разных разрешениях.
Курс включает практическую работу с типовыми блоками сайта: шапка, меню, карточки товаров или услуг, сетка преимуществ, формы обратной связи, изображения, таблицы, футер, лендинг, блоговая страница и многостраничная структура.
Отдельный блок посвящён mobile-first подходу. Вы рассмотрите, как сначала проектировать интерфейс для небольших экранов, затем расширять его для планшетов и компьютеров, управлять отступами, размерами, колонками, сетками и поведением элементов.
Особое внимание уделяется качеству адаптивной верстки. Вы изучите проверку в DevTools, кроссбраузерность, доступность, читаемость, корректное масштабирование изображений, предотвращение горизонтальной прокрутки, оптимизацию CSS и типичные ошибки начинающих верстальщиков.
Практический блок программы направлен на создание адаптивного сайта. Вы сможете сверстать учебный проект, настроить отображение для нескольких экранов, протестировать его в браузере и защитить итоговую работу.
В ходе программы Вы освоите:
• принципы адаптивной и отзывчивой верстки;
• viewport, breakpoints и медиазапросы;
• mobile-first подход;
• Flexbox и CSS Grid для гибких макетов;
• относительные единицы измерения и адаптивные размеры;
• адаптивные изображения, меню, формы и карточки;
• проверку верстки в браузере и DevTools;
• создание итогового адаптивного сайта.
Программа подойдёт начинающим web-разработчикам, верстальщикам, frontend-разработчикам начального уровня, веб-дизайнерам, владельцам сайтов, маркетологам, студентам и всем, кто хочет научиться создавать сайты для разных устройств.
Цели и задачи курса
Цель программы — сформировать у слушателей практические навыки адаптивной верстки и подготовки сайтов к корректному отображению на разных экранах.
В рамках курса Вы освоите:
• адаптивность через viewport, breakpoints, медиазапросы и flexible layout;
• layout через Flexbox, CSS Grid, относительные размеры и гибкие сетки;
• mobile-first через проектирование интерфейса от смартфона к большим экранам;
• интерфейс через адаптивные меню, формы, карточки, изображения и таблицы;
• качество через DevTools, проверку разрешений, кроссбраузерность и доступность;
• практику через создание итогового адаптивного сайта.
Программа даст ответы на следующие вопросы:
• Что такое адаптивная верстка сайта?
• Как сайт подстраивается под разные экраны?
• Как использовать медиазапросы и breakpoints?
• Что такое mobile-first подход?
• Как верстать гибкие сетки через Flexbox и Grid?
• Как адаптировать изображения, меню и формы?
• Как проверить качество адаптивной верстки?
По окончании обучения Вы получите
Диплом о профессиональной переподготовке, подтверждающий освоение программы «Адаптивная верстка сайтов» и компетенции в области responsive design и создания сайтов для разных устройств.
Учебный план курса
• Введение в адаптивную верстку
• Responsive design
• Устройства и размеры экранов
• Viewport
• Breakpoints
• Медиазапросы
• Mobile-first подход
• Desktop-first подход: обзор
• Относительные единицы измерения
• px, %, em, rem, vw и vh
• Гибкая ширина блоков
• Блочная модель в адаптивной верстке
• Flexbox для адаптивных макетов
• Перенос элементов
• Выравнивание и распределение блоков
• CSS Grid для сеток
• Адаптивные колонки
• Карточные сетки
• Адаптивная навигация
• Мобильное меню
• Адаптивные изображения
• object-fit и размеры изображений
• Адаптивные формы
• Адаптивные таблицы
• Шапка сайта
• Секции лендинга
• Футер сайта
• Проверка в DevTools
• Тестирование разных разрешений
• Кроссбраузерность на базовом уровне
• Доступность в адаптивной верстке
• Оптимизация CSS
• Типичные ошибки адаптивной верстки
• Итоговый проект: адаптивный сайт для разных устройств
• Итоговая аттестация — тестирование и защита проекта
Что нужно для поступления на программу:
Для поступления Вам необходимо прислать скан-копии или фотографии документов об образовании, паспортные данные и удаленно заключить договор. Гражданам Российской Федерации потребуются:
• Паспорт или другой документ, удостоверяющий личность или гражданство;
• Страховой номер индивидуального лицевого счета (СНИЛС);
• Документ об образовании и квалификации (фотография или скан-копия);
• Справка об обучении в организации высшего или среднего профессионального образования, если Вы в настоящее время являетесь студентом (фотография или скан-копия);
• Документ, подтверждающий факт изменения фамилии, имени или отчества (при необходимости) (фотография или скан-копия).
Гражданам иностранных государств и лицам без гражданства следует уточнить список необходимых сведений и документов в отделе организации приема по телефону или через форму заявки на консультацию.
Выгоды и скидки, варианты оплаты, рассрочка платежа:
• Вы сможете вернуть 13% от стоимости обучения в виде социального налогового вычета, обратившись в налоговую службу по месту постоянной регистрации.
• Чтобы запросить документы для получения налогового вычета, необходимо обратиться в методический отдел, написав нам на электронную почту mcnokurs@yandex.ru.
• Проверка документов после подачи в ФНС осуществляется в течение трех месяцев. Если ответ положительный, средства возвращаются.
• Обратите внимание, что декларация и заявление заполняются и подается слушателем самостоятельно.
• (Нормативное обоснование получения налогового вычета регламентировано статьями 78, 80, 83, 88, 219 Налогового кодекса РФ).
• Беспроцентная рассрочка
• Вы можете получить беспроцентную рассрочку на программы профессиональной переподготовки.
Для получения дополнительной информации о рассрочке на конкретную программу обратитесь к специалисту приемной комиссии
