egghead — CSS
egghead, CSS Туториалы, Курсы. Проект egghead.io представляет огромный выбор курсов и скринкастов для разработчиков любого уровня и профессии.
781
CSS, Курсы от egghead
eggheadCSS
Стилизируем приложения от начала до конца
Style an Application from Start to Finish
Хотите научиться уверенно работать с CSS и создавать продуманные интерфейсы? В этом материале мы разберем, как устроена стилизация приложения в рамках курса, который проведет вас по всему пути — от базовой вёрстки до интерактивных, адаптивных компонентов. Вы узнаете, как применять CSS осознанно и эффективно на практике.О чем этот курсКурс демонстрирует полный цикл стилизации фронтенд‑приложения на примере React‑проекта. Вместо разрозненных при
eggheadCSS
Конвертируйте SCSS (Sass) в CSS-in-JS
Convert SCSS (Sass) to CSS-in-JS
CSS-in-JS становится ключевым инструментом для современных интерфейсов, а понимание того, как переводить привычные конструкции SCSS (Sass) в этот формат, помогает разработчикам создавать масштабируемые и устойчивые стили. В этом материале мы разберём, как выполнить такую конвертацию грамотно и эффективно.Что такое SCSS и зачем его переводить в CSS-in-JSSCSS предоставляет удобные возможности: вложенность, переменные, миксины и функции, которые
eggheadCSS
CSS-селекторы в глубине
CSS Selectors in Depth
CSS‑селекторы лежат в основе любого процесса стилизации. Глубокое понимание их структуры, логики и возможностей позволяет создавать чистый, масштабируемый и предсказуемый CSS‑код, что особенно важно в больших проектах.Что вы узнаете в этом курсеМатериал курса выстроен так, чтобы шаг за шагом проводить вас от самых простых принципов к профессиональному применению CSS‑селекторов. К концу обучения вы будете уверенно работать как с базовыми, так и
eggheadCSS
Создавайте удивительные анимации с GreenSock
Create Amazing Animations with GreenSock
Хотите создавать плавные, выразительные и по‑настоящему современные веб‑анимации? GreenSock (GSAP) — это индустриальный стандарт, который позволяет анимировать элементы с феноменальной производительностью, полной кроссбраузерностью и гибкостью. В этом материале вы узнаете, чему научитесь на курсе и почему освоение GSAP откроет вам новые возможности в веб‑разработке и интерфейсном дизайне.Что вы изучите на курсеКурс помогает уверенно перейти от
eggheadCSS
Build User Interfaces by Composing CSS Utility Classes with Tailwind
Изучите Tailwind CSS и освойте подход к созданию интерфейсов, основанный на композиции utility‑классов. Этот курс поможет вам быстро и эффективно проектировать UI, не тратя часы на тонкую настройку стилей и выравнивание элементов вручную.Что делает Tailwind таким мощнымTailwind предоставляет гибкий набор utility‑классов, позволяя вам создавать полностью кастомизированные интерфейсы без необходимости писать сложные CSS‑файлы. Он дает свободу ди
eggheadCSS
Построение сложных макетов c CSS Grid
Build Complex Layouts with CSS Grid Layout
CSS Grid — современный мощный инструмент для создания гибких и сложных макетов. В этом материале вы узнаете, как использовать его для построения структур любой сложности — от простых сеток до многоуровневых композиций.Что такое CSS Grid и зачем он нуженCSS Grid — это двухмерная система раскладки, позволяющая управлять элементами как по строкам, так и по столбцам. В отличие от Flexbox, который работает только в одном направлении, Grid дает гора
eggheadCSS
Повторное использование стилей Flexbox с помощью миксинов Sass
Reuse Flexbox Styles With A Sass Mixin
Повторное использование стилей Flexbox с помощью миксинов Sass — это практичный подход, позволяющий ускорить верстку, стандартизировать макеты и избежать повторяющегося кода. В этом материале вы узнаете, как создать универсальный mixin для гибкого управления направлением, выравниванием и распределением элементов на странице.Зачем использовать Flexbox с миксинами SassFlexbox сам по себе очень мощен, но его свойства часто приходится прописывать
eggheadCSS
Создайте анимированный Hamburger, используя HTML5 и CSS3
Create an Animated Hamburger using HTML5 and CSS3
В этом кратком руководстве мы создадим стильный и аккуратный анимированный иконку‑гамбургер с помощью HTML5 и CSS3. Такой элемент отлично подходит для мобильных меню, адаптивной навигации и современных интерфейсов.Что мы создадимВы научитесь превращать стандартную иконку меню из трёх полосок в динамичную анимацию, которая плавно трансформируется в кнопку закрытия. В процессе мы разберём принципы оптимального использования CSS transitions и tra
eggheadCSS
Все лучшее и самое полезное о SCSS
Learn the Best and Most Useful SCSS
SCSS — мощное расширение CSS, которое открывает доступ к переменным, функциям, миксинам, условиям и циклам. Этот курс поможет вам понять, как использовать эти возможности эффективно, чтобы ускорить разработку и улучшить качество стилей.Что такое SCSS и почему он важенSCSS позволяет писать более гибкий, поддерживаемый и компактный код. Это надстройка над CSS, сохранившая его синтаксис, поэтому вы можете начать использовать SCSS практически сраз
eggheadCSS
Основы Flexbox
Flexbox Fundamentals
Flexbox — это один из самых удобных и гибких инструментов CSS для создания адаптивных интерфейсов. Он помогает разработчикам быстро выстраивать сложные макеты без громоздких вычислений и дополнительных библиотек, обеспечивая современный и предсказуемый подход к верстке.Преимущества FlexboxИспользование Flexbox открывает множество возможностей при работе с макетами. Основные преимущества включают: Гибкость: элементы легко перераспределяются,