Вы уже выучили основы HTML и CSS… и что дальше? Да, вы можете повторить шаги из туториала и стали мастером поиска ответов в Google, но сама мысль о том, чтобы начать новый проект сайта с нуля, пугает. Вы учитесь по чуть-чуть, но чаще ловите себя на том, что часами боретесь с непонятными багами в CSS, вместо того чтобы реально писать код. С чего вообще начать?
Представьте…
Вы не сидите, уставившись в пустой редактор VS Code, а точно знаете, как начать и какие файлы создать.
Умеете превращать дизайн из Figma в сайт, который будет отлично смотреться на всех устройствах.
Используете возможности Sass: модули, миксины, переменные и многое другое.
Чётко понимаете, когда применять flexbox, а когда grid.
Не пишете «спагетти-код», а организуете SCSS-файлы так, что разберётесь в них даже через месяцы.
И самое главное - понимаете, как работает CSS, включая его странные и порой раздражающие особенности.
Звучит отлично, но как к этому прийти?
Привет! Меня зовут Джесс Чан.
В этом курсе я покажу вам, как мыслит профессиональный разработчик. Вместо набора разрозненных уроков вы шаг за шагом пройдёте весь путь: от макета в Figma до готового сайта с HTML, SCSS и JavaScript. И главное - я буду объяснять, почему принимаю те или иные решения. Это как если бы рядом с вами сидел старший разработчик и комментировал весь процесс.
Моя цель - чтобы вы обрели уверенность в CSS и почувствовали себя комфортно в работе над любым проектом, даже если вам придётся решать задачи, с которыми вы раньше не сталкивались.
Курс делится на 3 уровня: BASIC, PREMIUM и ULTIMATE.
BASIC (22 часа)
17 часов вводного материала: настройка VS Code, GitHub, полное введение в Sass/SCSS (мини-курс сам по себе).
5 часов практики: создание базового сайта, идеально подходящего для новичков.
Темы BASIC:
Семантические HTML-теги
Организация кода: BEM, Sass-партиалы, миксины, переменные, утилитарные классы
Каскад CSS
Поток документа: inline, block, inline-block и их особенности
Flexbox и grid
CSS-единицы: px, em, rem, %, vw, ch
Адаптивная типографика с clamp()
Переменные CSS (custom properties)
Адаптивные изображения: srcset и DPR
Работа с SVG и inline-SVG
CSS-анимации: hover-эффекты, переходы
Фоны с linear-gradient()
Математика в CSS с calc()
PREMIUM (4 часа)
Продолжение, где мы строим более сложные секции сайта.
Темы PREMIUM:
Анимированные подчеркивания и фоны для hover-состояний
CSS grid areas и именованные линии сетки
SVG-формы
Абсолютное позиционирование элементов
Чередующиеся блоки с nth-child
Псевдоэлементы ::before и ::after
Стилизация форм
ULTIMATE (6 часов)
Финальный блок с более сложными приёмами и JavaScript.
Темы ULTIMATE:
Адаптивное бургер-меню с анимацией и доступностью
Контексты наложения и z-index
Цветовые темы на основе CSS-переменных
Построение блок-сетки с grid, auto-fit и minmax()
Перекрывающиеся элементы с grid и absolute
object-fit и object-position для изображений
Эффекты с mix-blend-mode
Основы Node, npm, package.json
Компиляция Sass с помощью Vite и модулей JS
В итоге, вы шаг за шагом создадите настоящий адаптивный сайт по макету Figma и получите опыт, максимально приближённый к работе профессионального фронтенд-разработчика.
Посмотреть больше
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
Ограничение времени просмотра
Вы можете просматривать пробный урок только 10 минут. Получите полный доступ, чтобы смотреть без ограничений.
Привет! Я - Джесс Чан. Я создаю обучающие материалы на YouTube для начинающих веб-разработчиков. Раньше я 8 лет работала веб-разработчиком в рекламных и маркетинговых компаниях.Я самоучка - у меня нет диплома по компьютерным наукам и я не проходила буткемпы по программированию. Начало пути было невероятно трудным: я часто чувствовала себя потерянной, часами искала решения в Google и пробовала десятки способов исправить ошибки.Со временем я лучше
Команда внимательно читает ваши комментарии и оперативно на них реагирует. Вы можете спокойно оставлять запросы на обновления или задавать любые вопросы о курсе здесь.
Создание адаптивного веб-сайта Airbnb с использованием Figma
Design a Responsive Airbnb Website with Figma
В этом курсе, основанном на проекте, вы погрузитесь в мир продвинутых функций Figma, чтобы создать адаптивный веб-сайт для вымышленной компании по аренде жилья, подобной AirBnB, под названием "Flexrent".
Next.js 14: Эффективное портфолио с адаптивным дизайном (2024)
The Ultimate Nextjs 14 Portfolio Website Responsive (2024)
Этот курс научит вас создавать привлекательные онлайн-приложения с использованием Next.js 14, React.js, Tailwind CSS, Nodemailer и различных утилит. Я проведу вас шаг за шагом от начала до конца процесса развертывания.Вы сможете развернуть веб-сайт на сервере Vercel и опубликовать исходный код на GitHub до конца этого курса.Мы также узнаем, как отправлять детали портфолио на новую страницу, используя динамический маршрут Next.js 14 (страница для
10 Супер Адаптивных Веб-Сайтов с HTML, CSS и JavaScript
10 Mega Responsive Websites with HTML, CSS, and JavaScript
Добро пожаловать на новый курс, где вы узнаете, как создавать современные и красивые шаблоны дизайна для своих веб-сайтов. Если вы хотите создать и настроить свое портфолио, стать опытным разработчиком и получить работу, то этот курс для вас. Мы создадим 10 мега-полноценных адаптивных веб-сайтов с использованием трех основных технологий: HTML, CSS и JS.
Адаптивный веб-дизайн с помощью Flexbox и CSS Grid, v2
Responsive Web Design with Flexbox & CSS Grid, v2
Макеты страниц - это сердце любого веб-сайта или приложения. В современной сети есть несколько вариантов создания макетов, каждый со своими положительными и отрицательными характеристиками. Выполнив множество упражнений и попрактиковавшись, вы освоите спецификации Flexbox и Grid, а также адаптивные изображения, применяя их к повседневным макетам страниц.
Продвинутый CSS Grid - Создание четырех адаптивных веб-сайтов
Advance CSS Grid - Build 4 Major Responsive Websites
Веб-технологии меняются так быстро... Мы видим много новых технологий и функций почти каждый день и они делают нашу жизнь проще, чем когда-либо прежде, точно так же, как и CSS Grid.