Разобрать конфликт каскада
Создайте два конкурирующих правила для карточки. Найдите победивший селектор в DevTools и объясните, почему он применился; исправьте структуру без наращивания !important.
CSS / Sass · английская озвучка
Advanced CSS and Sass: Flexbox, Grid, Animations and More!
Программа, практика и требования
Advanced CSS and Sass — курс Йонаса Шмедтманна для тех, кто уже умеет верстать на HTML и CSS. На проектах Natours, Trillo и Nexter он разбирает архитектуру стилей, Sass, анимацию, Flexbox, Grid и адаптивность. Сначала проверьте свою базу: автор прямо отмечает, что программа не рассчитана на первый опыт вёрстки.
RusUdemyПомогаем оформить выбранный курс в личном аккаунте Udemy — без общих аккаунтов и предоплаты.Подробнее- 4,946 351 оценка на Udemy
- 226 009студентов на Udemy
- 28 ч 9 минвидео · 126 лекций
- ENанглийская речь преподавателя
Bestseller · Highest RatedАнглийский язык · обновление ноябрь 2024
Перед началом
Подойдёт ли вам этот курс
Кому подойдёт
Верстальщикам и frontend-разработчикам, которые уже делают простые страницы и хотят системнее организовывать стили и сложные раскладки.
Что знать до старта
Нужна уверенная базовая вёрстка на HTML и CSS. Автор прямо указывает, что это не начальный курс; платный редактор не требуется.
Что сможете сделать
Три учебных интерфейса: Natours с анимацией и Sass, Trillo на Flexbox и Nexter на CSS Grid.
Учесть при выборе
Обновление — ноябрь 2024. В программе есть node-sass и прежняя сборка Sass через npm; команды и зависимости нужно сверять с текущими инструментами. Курс не заявляет охват всех новых возможностей CSS.
Содержание и открытый урок
Зачем изучать CSS глубже после первых страниц
Трудности большой страницы редко сводятся к незнакомому свойству. Чаще непонятно, откуда взялся размер, почему правило проиграло в каскаде или как изменить компонент, не задев остальные. Курс связывает такие вопросы с устройством CSS и организацией Sass-кода, а три проекта дают разные задачи раскладки. При этом учебную сборку нужно отделять от принципов: в уроках встречается node-sass и прежний набор npm-команд. Полезная практика — сначала понять зависимости и структуру проекта, а затем адаптировать окружение с объяснимым результатом.
Перед стартом оцените открытый урок и подготовьте инструменты. Обновление — ноябрь 2024. В программе есть node-sass и прежняя сборка Sass через npm; команды и зависимости нужно сверять с текущими инструментами. Курс не заявляет охват всех новых возможностей CSS.
Самопроверка · редакционные задания
Как проверить навык самостоятельной практикой
Эти упражнения предложены редакцией RusUdemy для самостоятельной проверки навыков. Они не являются дополнительными уроками преподавателя и не предполагают проверку работ автором.
Перенести идею между проектами
Возьмите небольшой блок из Natours и сверстайте его средствами раскладки из Trillo или Nexter. Сравните количество правил, адаптивность и устойчивость к длинным надписям.
Проверить архитектуру Sass
Выделите цвета, размеры и повторяемые части в понятную структуру файлов. Измените тему интерфейса и проверьте, сколько мест пришлось редактировать вручную.
Сделать анимацию необязательной
Добавьте движение только там, где оно помогает понять изменение. Подготовьте вариант для prefers-reduced-motion и убедитесь, что информация и действия доступны без анимации.
28 ч 9 мин видео · 126 лекцийСверить программу на Udemy
Программа Advanced CSS: устройство языка и три проекта
Основные блоки проверенной программы собраны ниже. Полное оглавление и превью доступны на Udemy. Задания для самопроверки предложены редакцией RusUdemy: они дополняют уроки и не выдаются за обещания автора.
На дату проверки в открытых данных Udemy: 10 разделов, 126 лекций, 28 ч 9 мин видео. На установку инструментов, самостоятельную практику и разбор ошибок потребуется дополнительное время. Темы ниже сгруппированы редакцией; перед выбором сверяйте доступное оглавление на Udemy.
Закрепите принципы вёрстки на собственном макете. Если следующая задача — интерактивность, переходите к JavaScript; если сложность остаётся в CSS, сначала разберите её без добавления фреймворка.
- 01
Natours: подготовка проекта и первые эффекты
- 02
Как работает CSS: каскад, наследование и единицы измерения
- 03
Sass, npm и организация CSS-кода
- 04
Natours: компоненты, анимация и адаптивные изображения
- 05
Trillo: интерфейс на Flexbox
- 06
Nexter: сетки и адаптивная раскладка на CSS Grid
Оригинал курса — на английском
Понимать решение важнее дословного перевода.
Откройте бесплатный фрагмент и объясните своими словами, что делает пример и зачем нужен каждый шаг. Смотрите небольшими частями, ведите словарь терминов и повторяйте показанные действия самостоятельно. Перевод помогает понимать речь, но проверка результата всё равно остаётся частью практики.
Как проходить курсы Udemy на английскомАнглийская озвучка; английские субтитры указаны в каталоге Udemy. Русских субтитров в проверенном списке нет. Доступность автоматического перевода проверяйте в плеере.
Когда программа подходит вашей задачеВы выбираете обучение. RusUdemy помогает с оформлением.
Пришлите ссылку на выбранный курс. Уточним текущую стоимость и поможем оформить его в вашем личном аккаунте Udemy. Материалы и прогресс останутся у вас.
01
Курс в Вашем аккаунте
Курс появляется в вашей личной библиотеке на Udemy. Никаких пиратских копий, общих аккаунтов или «серых» схем.
02
Без предоплаты
Вы оплачиваете покупку только после того, как курс появился в вашем аккаунте Udemy.
03
Покупка за 10 минут
Обычно от первого сообщения до появления курса в аккаунте проходит около 10 минут.
04
Живой человек, не бот
В Telegram отвечает живой человек: можно задать вопрос и получить качественную поддержку по покупке.
Сначала согласуем курс и условия. Оплата после появления курса в аккаунте.
Опыт работы с сервисом
Отзывы клиентов RusUdemy
Оперативно подошли к покупке курса. Очень доволен. Большое спасибо.
Отзыв от:
Купил курс по программированию. Михаил, спасибо за помощь с созданием нового аккаунта, быстроту ответа и оформления курса. Хороший сервис
Отзыв от:
Купил курс по программированию. Михаил, спасибо за помощь с созданием нового аккаунта, быстроту ответа и оформления курса. Хороший сервис
Отзыв от:
Спасибо Михаилу за помощь! Все получилось быстро и легко!
Отзыв от:
Помогли с приобретением курса за 5 мин. Буду обращаться ещё. Михаилу респект!
Отзыв от:
Прекрасный сервис, буквально за пару минут купил курс. Всем советую
Отзыв от:
Ответы перед стартом