Адаптивный дизайн для начинающих

Вы уже выучили основы HTML и CSS… и что дальше? Да, вы можете повторить шаги из туториала и стали мастером поиска ответов в Google, но сама мысль о том, чтобы начать новый проект сайта с нуля, пугает. Вы учитесь по чуть-чуть, но чаще ловите себя на том, что часами боретесь с непонятными багами в CSS, вместо того чтобы реально писать код. С чего вообще начать?

Представьте…

1. Вы не сидите, уставившись в пустой редактор VS Code, а точно знаете, как начать и какие файлы создать.
2. Умеете превращать дизайн из Figma в сайт, который будет отлично смотреться на всех устройствах.
3. Используете возможности Sass: модули, миксины, переменные и многое другое.
4. Чётко понимаете, когда применять flexbox, а когда grid.
5. Не пишете «спагетти-код», а организуете SCSS-файлы так, что разберётесь в них даже через месяцы.
6. И самое главное - понимаете, как работает CSS, включая его странные и порой раздражающие особенности.

Звучит отлично, но как к этому прийти?

Привет! Меня зовут Джесс Чан.

В этом курсе я покажу вам, как мыслит профессиональный разработчик. Вместо набора разрозненных уроков вы шаг за шагом пройдёте весь путь: от макета в Figma до готового сайта с HTML, SCSS и JavaScript. И главное - я буду объяснять, почему принимаю те или иные решения. Это как если бы рядом с вами сидел старший разработчик и комментировал весь процесс.

Моя цель - чтобы вы обрели уверенность в CSS и почувствовали себя комфортно в работе над любым проектом, даже если вам придётся решать задачи, с которыми вы раньше не сталкивались.

Курс делится на 3 уровня: BASIC, PREMIUM и ULTIMATE.

BASIC (22 часа)

1. 17 часов вводного материала: настройка VS Code, GitHub, полное введение в Sass/SCSS (мини-курс сам по себе).
2. 5 часов практики: создание базового сайта, идеально подходящего для новичков.

Темы BASIC:

1. Семантические HTML-теги
2. Организация кода: BEM, Sass-партиалы, миксины, переменные, утилитарные классы
3. Каскад CSS
4. Поток документа: inline, block, inline-block и их особенности
5. Flexbox и grid
6. CSS-единицы: px, em, rem, %, vw, ch
7. Адаптивная типографика с clamp()
8. Переменные CSS (custom properties)
9. Адаптивные изображения: srcset и DPR
10. Работа с SVG и inline-SVG
11. CSS-анимации: hover-эффекты, переходы
12. Фоны с linear-gradient()
13. Математика в CSS с calc()

PREMIUM (4 часа)

Продолжение, где мы строим более сложные секции сайта.

Темы PREMIUM:

1. Анимированные подчеркивания и фоны для hover-состояний
2. CSS grid areas и именованные линии сетки
3. SVG-формы
4. Абсолютное позиционирование элементов
5. Чередующиеся блоки с nth-child
6. Псевдоэлементы ::before и ::after
7. Стилизация форм

ULTIMATE (6 часов)

Финальный блок с более сложными приёмами и JavaScript.

Темы ULTIMATE:

1. Адаптивное бургер-меню с анимацией и доступностью
2. Контексты наложения и z-index
3. Цветовые темы на основе CSS-переменных
4. Построение блок-сетки с grid, auto-fit и minmax()
5. Перекрывающиеся элементы с grid и absolute
6. object-fit и object-position для изображений
7. Эффекты с mix-blend-mode
8. Основы Node, npm, package.json
9. Компиляция Sass с помощью Vite и модулей JS

В итоге, вы шаг за шагом создадите настоящий адаптивный сайт по макету Figma и получите опыт, максимально приближённый к работе профессионального фронтенд-разработчика.