Описание
Количество уроков: 140 Видео
Язык: Английский
Вес архива: 5,59 ГБ
«Адаптивный дизайн для начинающих» — это практико-ориентированный курс, который помогает новичкам уверенно работать с HTML, CSS и адаптивной версткой.
О чем этот курс
Если вы уже знаете основы HTML и CSS, но сталкиваетесь с трудностями при создании полноценного сайта с нуля, этот курс будет идеальным следующим шагом. Он поможет понять логику профессиональной разработки, избавиться от хаоса в стилях и почувствовать уверенность при работе над реальными проектами.
Кому подойдет курс
Курс создан специально для новичков и тех, кто:
• знает базовый синтаксис HTML и CSS, но не понимает, как собрать проект полностью;
• часто застревает на непонятных багаx и расходует много времени на поиск решений;
• хочет перенести макет из Figma в полноценный, адаптивный сайт;
• мечтает системно изучить CSS, а не собирать знания по кусочкам.
Что вы научитесь делать
После прохождения курса вы сможете:
• структурировать проект с нуля и уверенно работать в VS Code;
• верстать адаптивные сайты по макетам Figma;
• использовать SCSS: переменные, миксины, партиалы, модули;
• отличать, когда использовать flexbox, а когда grid;
• организовывать стили так, что в вашем коде легко разберётся даже другой разработчик;
• понимать поведение CSS, включая каскад, наследование и особенности рендеринга.
Программа курса
BASIC (22 часа)
Идеально для начинающих: много практики и основа правильного мышления в CSS.
Что входит
• 17 часов фундаментального материала: настройка среды, GitHub, полный вводный модуль по Sass.
• 5 часов практики: создание первого адаптивного сайта.
Ключевые темы BASIC
• Семантическая разметка HTML
• BEM, структура SCSS, переменные, миксины, утилитарные классы
• Каскад, специфичность, наследование
• Блочная модель и поток документа
• Flexbox и CSS Grid
• Адаптивные единицы измерения: em, rem, vw, %
• Типографика с clamp
• CSS‑переменные
• Адаптивные изображения и работа с SVG
• Анимации, эффекты наведения и переходы
• linear-gradient, calc и другие полезные функции
PREMIUM (4 часа)
Более продвинутые техники для построения сложных адаптивных секций.
Темы PREMIUM
• Анимированные эффекты при наведении
• Работа с grid areas
• Создание и стилизация SVG‑форм
• Абсолютное позиционирование
• Макеты с использованием nth-child
• Псевдоэлементы::before и::after
• Стилизация форм и полей ввода
ULTIMATE (6 часов)
Финальный этап — реальные техники из профессиональной разработки.
Темы ULTIMATE
• Создание бургер-меню с анимацией и доступностью
• Работа с z-index и контекстами наложения
• Реализация цветовых тем на CSS‑переменных
• Grid‑сетки с auto-fit и minmax
• Перекрывающиеся элементы
• object-fit и object-position
• Эффекты mix-blend-mode
• Основы Node.js, npm, package.json
• Компиляция SCSS с Vite
Результат
Пройдя все три уровня, вы создадите полностью адаптивный сайт по макету Figma, освоите современные инструменты фронтенд-разработки и почувствуете уверенность при работе над проектами любой сложности.
Алексей Н. –
После курса спокойно собрал свой первый сайт с адаптивом от начала до конца, включая работу в VS Code и Git. В BASIC больше всего помогли уроки про семантическую разметку и организацию стилей: команда потом хвалила, что в коде легко разобраться. Про баги стало понятнее, куда смотреть и какие инструменты использовать.
Дмитрий К. –
Уже верстал небольшие проекты, поэтому брал курс ради системности. Понравилось объяснение каскада, наследования и того, когда уместен flexbox, а когда grid — это давно хотел разложить по полочкам. Партиалы и модули в Sass теперь использую постоянно. Замечание: часть тем по SCSS хотелось бы с более глубокими примерами, иногда приходилось искать дополнения самостоятельно.
Марина В. –
До курса я знала HTML и CSS только по обрывкам уроков с ютуба и вечно путалась в стилях. Здесь наконец разобралась с BEM и структурой SCSS через партиалы и миксины — стало намного легче поддерживать код. Модуль про перенос макета из Figma в адаптивную верстку занял больше всего времени, но именно он дал результат. Из минусов: первые уроки по настройке среды показались затянутыми.