egghead — CSS

egghead, CSS Туториалы, Курсы. Проект egghead.io представляет огромный выбор курсов и скринкастов для разработчиков любого уровня и профессии.

781

CSS, Курсы от egghead

Изображение курса Стилизируем приложения от начала до конца

egghead

9 июл. 2020 г., 09:54

CSS

Стилизируем приложения от начала до конца

Style an Application from Start to Finish

Хотите научиться уверенно работать с CSS и создавать продуманные интерфейсы? В этом материале мы разберем, как устроена стилизация приложения в рамках курса, который проведет вас по всему пути — от базовой вёрстки до интерактивных, адаптивных компонентов. Вы узнаете, как применять CSS осознанно и эффективно на практике.О чем этот курсКурс демонстрирует полный цикл стилизации фронтенд‑приложения на примере React‑проекта. Вместо разрозненных при

Изображение курса Конвертируйте SCSS (Sass) в CSS-in-JS

egghead

14 нояб. 2019 г., 21:46

CSS

Конвертируйте SCSS (Sass) в CSS-in-JS

Convert SCSS (Sass) to CSS-in-JS

CSS-in-JS становится ключевым инструментом для современных интерфейсов, а понимание того, как переводить привычные конструкции SCSS (Sass) в этот формат, помогает разработчикам создавать масштабируемые и устойчивые стили. В этом материале мы разберём, как выполнить такую конвертацию грамотно и эффективно.Что такое SCSS и зачем его переводить в CSS-in-JSSCSS предоставляет удобные возможности: вложенность, переменные, миксины и функции, которые

Изображение курса CSS-селекторы в глубине

egghead

20 июн. 2019 г., 20:21

CSS

CSS-селекторы в глубине

CSS Selectors in Depth

CSS‑селекторы лежат в основе любого процесса стилизации. Глубокое понимание их структуры, логики и возможностей позволяет создавать чистый, масштабируемый и предсказуемый CSS‑код, что особенно важно в больших проектах.Что вы узнаете в этом курсеМатериал курса выстроен так, чтобы шаг за шагом проводить вас от самых простых принципов к профессиональному применению CSS‑селекторов. К концу обучения вы будете уверенно работать как с базовыми, так и

+14

Изображение курса Создавайте удивительные анимации с GreenSock

egghead

7 мая 2019 г., 05:21

CSS

Создавайте удивительные анимации с GreenSock

Create Amazing Animations with GreenSock

Хотите создавать плавные, выразительные и по‑настоящему современные веб‑анимации? GreenSock (GSAP) — это индустриальный стандарт, который позволяет анимировать элементы с феноменальной производительностью, полной кроссбраузерностью и гибкостью. В этом материале вы узнаете, чему научитесь на курсе и почему освоение GSAP откроет вам новые возможности в веб‑разработке и интерфейсном дизайне.Что вы изучите на курсеКурс помогает уверенно перейти от

+16

Изображение курса Build User Interfaces by Composing CSS Utility Classes with Tailwind

egghead

14 окт. 2018 г., 11:01

CSS

Build User Interfaces by Composing CSS Utility Classes with Tailwind

Изучите Tailwind CSS и освойте подход к созданию интерфейсов, основанный на композиции utility‑классов. Этот курс поможет вам быстро и эффективно проектировать UI, не тратя часы на тонкую настройку стилей и выравнивание элементов вручную.Что делает Tailwind таким мощнымTailwind предоставляет гибкий набор utility‑классов, позволяя вам создавать полностью кастомизированные интерфейсы без необходимости писать сложные CSS‑файлы. Он дает свободу ди

+24

Изображение курса Построение сложных макетов c CSS Grid

egghead

1 июл. 2018 г., 07:12

CSS

Построение сложных макетов c CSS Grid

Build Complex Layouts with CSS Grid Layout

CSS Grid — современный мощный инструмент для создания гибких и сложных макетов. В этом материале вы узнаете, как использовать его для построения структур любой сложности — от простых сеток до многоуровневых композиций.Что такое CSS Grid и зачем он нуженCSS Grid — это двухмерная система раскладки, позволяющая управлять элементами как по строкам, так и по столбцам. В отличие от Flexbox, который работает только в одном направлении, Grid дает гора

+29

Изображение курса Повторное использование стилей Flexbox с помощью миксинов Sass

egghead

5 янв. 2018 г., 13:12

CSS

Повторное использование стилей Flexbox с помощью миксинов Sass

Reuse Flexbox Styles With A Sass Mixin

Повторное использование стилей Flexbox с помощью миксинов Sass — это практичный подход, позволяющий ускорить верстку, стандартизировать макеты и избежать повторяющегося кода. В этом материале вы узнаете, как создать универсальный mixin для гибкого управления направлением, выравниванием и распределением элементов на странице.Зачем использовать Flexbox с миксинами SassFlexbox сам по себе очень мощен, но его свойства часто приходится прописывать

Изображение курса Создайте анимированный Hamburger, используя HTML5 и CSS3

egghead

5 янв. 2018 г., 13:08

CSS

Создайте анимированный Hamburger, используя HTML5 и CSS3

Create an Animated Hamburger using HTML5 and CSS3

В этом кратком руководстве мы создадим стильный и аккуратный анимированный иконку‑гамбургер с помощью HTML5 и CSS3. Такой элемент отлично подходит для мобильных меню, адаптивной навигации и современных интерфейсов.Что мы создадимВы научитесь превращать стандартную иконку меню из трёх полосок в динамичную анимацию, которая плавно трансформируется в кнопку закрытия. В процессе мы разберём принципы оптимального использования CSS transitions и tra

Изображение курса Все лучшее и самое полезное о SCSS

egghead

5 янв. 2018 г., 12:57

CSS

Все лучшее и самое полезное о SCSS

Learn the Best and Most Useful SCSS

SCSS — мощное расширение CSS, которое открывает доступ к переменным, функциям, миксинам, условиям и циклам. Этот курс поможет вам понять, как использовать эти возможности эффективно, чтобы ускорить разработку и улучшить качество стилей.Что такое SCSS и почему он важенSCSS позволяет писать более гибкий, поддерживаемый и компактный код. Это надстройка над CSS, сохранившая его синтаксис, поэтому вы можете начать использовать SCSS практически сраз

+19

egghead

12 июл. 2017 г., 13:49

CSS

Основы Flexbox

Flexbox Fundamentals

Flexbox — это один из самых удобных и гибких инструментов CSS для создания адаптивных интерфейсов. Он помогает разработчикам быстро выстраивать сложные макеты без громоздких вычислений и дополнительных библиотек, обеспечивая современный и предсказуемый подход к верстке.Преимущества FlexboxИспользование Flexbox открывает множество возможностей при работе с макетами. Основные преимущества включают: Гибкость: элементы легко перераспределяются,

+40