Учебный план
О курсе
Онлайн курс «CSS Grid и Flexbox на практике» — это программа профессиональной переподготовки, направленная на освоение современных CSS-инструментов для построения гибких, адаптивных и удобных макетов веб-страниц. Курс помогает научиться выбирать подходящий способ верстки и применять Flexbox и CSS Grid в реальных интерфейсных задачах.
В рамках курса Вы изучите, как работает блочная модель, поток документа, flex-контейнеры, flex-элементы, оси, выравнивание, перенос, порядок элементов, grid-контейнеры, строки, колонки, области, gaps, auto-fit, auto-fill и адаптивные сетки.
Курс включает практическую работу с типовыми блоками сайтов: шапками, меню, карточками, галереями, каталогами, секциями лендингов, формами, футерами, dashboard-интерфейсами, адаптивными колонками и сетками для разных экранов.
Отдельный блок посвящён выбору инструмента. Вы рассмотрите, когда удобнее использовать Flexbox, когда лучше применять CSS Grid, как комбинировать оба подхода, как избегать лишнего кода и как строить макеты, которые легко поддерживать.
Особое внимание уделяется адаптивной верстке. Вы изучите медиазапросы, mobile-first подход, резиновые сетки, перенос карточек, управление колонками, выравнивание элементов, перестроение layout и проверку результата в DevTools.
Практический блок программы направлен на создание набора практических макетов. Вы сможете сверстать адаптивные блоки и страницы с использованием Flexbox и Grid, подготовить проект, проверить его на разных экранах и защитить итоговую работу.
В ходе программы Вы освоите:
• принципы Flexbox и CSS Grid;
• flex-контейнеры, оси, выравнивание и перенос элементов;
• grid-контейнеры, строки, колонки, области и gaps;
• построение адаптивных сеток для сайтов;
• комбинирование Flexbox и Grid в одном проекте;
• верстку карточек, меню, галерей, каталогов и секций;
• mobile-first подход и медиазапросы;
• создание итогового практического проекта с CSS layout.
Программа подойдёт начинающим web-разработчикам, верстальщикам, frontend-разработчикам начального уровня, веб-дизайнерам, студентам и всем, кто хочет уверенно строить современные CSS-макеты.
Цели и задачи курса
Цель программы — сформировать у слушателей практические навыки применения Flexbox и CSS Grid для создания современных веб-макетов.
В рамках курса Вы освоите:
• Flexbox через оси, контейнеры, элементы, выравнивание, перенос и порядок;
• Grid через строки, колонки, области, gaps, автоматические сетки и шаблоны;
• layout через меню, карточки, секции, галереи, каталоги и dashboard-блоки;
• адаптивность через mobile-first, медиазапросы, резиновые сетки и перестроение;
• качество через чистую структуру CSS, DevTools и устранение ошибок верстки;
• практику через набор макетов и итоговый адаптивный проект.
Программа даст ответы на следующие вопросы:
• Чем Flexbox отличается от CSS Grid?
• Когда использовать Flexbox, а когда Grid?
• Как выравнивать элементы по горизонтали и вертикали?
• Как создавать адаптивные карточные сетки?
• Как верстать меню, галереи, каталоги и секции?
• Как комбинировать Flexbox и Grid в одном проекте?
• Как проверить и исправить ошибки CSS layout?
По окончании обучения Вы получите
Диплом о профессиональной переподготовке, подтверждающий освоение программы «CSS Grid и Flexbox на практике» и компетенции в области современной CSS-верстки.
Учебный план курса
• Введение в современные CSS layout
• Блочная модель
• Поток документа
• Display и поведение элементов
• Flexbox: назначение и принципы
• Flex-контейнер
• Flex-элементы
• Главная и поперечная ось
• flex-direction
• justify-content
• align-items
• align-content
• flex-wrap
• gap во Flexbox
• flex-grow, flex-shrink и flex-basis
• order
• Практика: меню на Flexbox
• Практика: карточки на Flexbox
• Практика: форма на Flexbox
• CSS Grid: назначение и принципы
• Grid-контейнер
• Строки и колонки
• grid-template-columns
• grid-template-rows
• gap в Grid
• Grid lines
• Grid areas
• auto-fit и auto-fill
• minmax
• Практика: галерея на Grid
• Практика: каталог на Grid
• Практика: layout страницы
• Комбинирование Flexbox и Grid
• Адаптивные сетки
• Медиазапросы
• Mobile-first подход
• Проверка макетов в DevTools
• Итоговый проект: адаптивная страница с Flexbox и Grid
• Итоговая аттестация — тестирование и защита проекта
Что нужно для поступления на программу:
Для поступления Вам необходимо прислать скан-копии или фотографии документов об образовании, паспортные данные и удаленно заключить договор. Гражданам Российской Федерации потребуются:
• Паспорт или другой документ, удостоверяющий личность или гражданство;
• Страховой номер индивидуального лицевого счета (СНИЛС);
• Документ об образовании и квалификации (фотография или скан-копия);
• Справка об обучении в организации высшего или среднего профессионального образования, если Вы в настоящее время являетесь студентом (фотография или скан-копия);
• Документ, подтверждающий факт изменения фамилии, имени или отчества (при необходимости) (фотография или скан-копия).
Гражданам иностранных государств и лицам без гражданства следует уточнить список необходимых сведений и документов в отделе организации приема по телефону или через форму заявки на консультацию.
Выгоды и скидки, варианты оплаты, рассрочка платежа:
• Вы сможете вернуть 13% от стоимости обучения в виде социального налогового вычета, обратившись в налоговую службу по месту постоянной регистрации.
• Чтобы запросить документы для получения налогового вычета, необходимо обратиться в методический отдел, написав нам на электронную почту mcnokurs@yandex.ru.
• Проверка документов после подачи в ФНС осуществляется в течение трех месяцев. Если ответ положительный, средства возвращаются.
• Обратите внимание, что декларация и заявление заполняются и подаются слушателем самостоятельно.
• (Нормативное обоснование получения налогового вычета регламентировано статьями 78, 80, 83, 88, 219 Налогового кодекса РФ).
• Беспроцентная рассрочка
• Вы можете получить беспроцентную рассрочку на программы профессиональной переподготовки.
Для получения дополнительной информации о рассрочке на конкретную программу обратитесь к специалисту приемной комиссии
