Как сделать Motion Макет с анимационной галереей на Preact & TypeScript

preview_player
Показать описание
В видео изучим как сделать Motion Gallery, поговорим про Atomic Design, оптимизацию картинок и многое другое.

🏰 Английский YouTube: @webelart_en

Ссылки используемые в уроке:

00:00 Введение.
01:00 Установка.
03:10 Разбираем как сделана галерея.
04:25 Atomic Design.
05:30 React VS Preact.
06:10 Reset стилей и базовые стили.
07:40 Figma. Community. Макеты.
11:20 Подготовка к вёрстке. Font Fascia Figma. Google Fonts.
14:40 Продолжаем разбор галереи.
15:50 Про форматы изображений. Минимизацию: tinyPng, svgo.
24:00 Архитектура приложения. Объяснение компонентного подхода. Атомы.
31:00 Иконки, спрайты.
32:00 Продолжаем изучение Молекулы. Навигация, Actions, Анимации. Логотип, опции промо.
38:20 Организмы: Шапка и CoverGallery. Анимации.
46:00 Домашнее задание. Заключение.

На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.
  1. Елена Литвинова — Искусство Веб-разработки 🛸
  2. css
  3. js
  4. уроки по js
  5. Елена Литвинова
  6. Искусство веб-разработки
Рекомендации по теме
Как сделать Motion 0:48:25

Как сделать Motion Макет с анимационной галереей на Preact & TypeScript...

3D на каждый 1:36:07

3D на каждый день — делаем 3D макет и Motion

Монтировать может каждый! 0:02:25

Монтировать может каждый! | Alight Motion

|| Alight Motion 0:05:13

|| Alight Motion || Туториал по монтажу для гачеров || 1/3 ||

СДЕЛАЛ МУВИК В 0:00:41

СДЕЛАЛ МУВИК В CapCut И Alight Motion

//КАК СДЕЛАТЬ АНИМАЦИЮ? 0:04:46

//КАК СДЕЛАТЬ АНИМАЦИЮ? //Туториал по анимации в Alight motion//от Рейки: мяв...

Huge airplane crash 0:01:27

Huge airplane crash - stop motion animation airport crash

| Туториал на 0:01:21

| Туториал на анимацию в Alight Motion | #туториал #алайтмоушен #анимация #роблокс #youtube |Тутор|...

Motion design ( 0:00:28

Motion design ( stop motion ) анимация на телефоне

Макет stop motion 0:00:16

Макет stop motion

Курс 'Анимация и 0:00:15

Курс 'Анимация и рекламные макеты' в Alight Motion

АНИМАЦИИ и ЭФФЕКТЫ 0:00:32

АНИМАЦИИ и ЭФФЕКТЫ ТЕКСТА XML // alight motion preset xml

Шаблоны в motion 0:00:26

Шаблоны в motion дизайне

\ туториал по 0:07:20

\ туториал по alight motion для чайников/ gacha live ✨ by lil mento 🍃

Как делать гача 0:01:51

Как делать гача анимации / Туториал по анимации в Alight Motion!...

Что нужно новичку 0:01:00

Что нужно новичку для Motion Design

|| Туториал По 0:05:01

|| Туториал По Монтажу В Alight Motion *для чайников* || gacha club|| ГТА Мия ||...

Motion design за 0:00:27

Motion design за 1 минуту! #motiondesign #motion #анимация #маркетинг

Туториал как сделать 0:01:21

Туториал как сделать радугу в Alight Motion💓

🔥ЛУЧШИЙ ПАК +8 0:00:51

🔥ЛУЧШИЙ ПАК +8 АНИМАЦИИ ТЕКСТА В ALIGHT MOTION!

— Туториал как 0:02:01

— Туториал как сделать свой пак в Alight Motion!//by Vanilla Lime📝

Монтаж видео в 0:04:39

Монтаж видео в FCPX. Создаем mockup (шаблон) iPhone X в Motion 5 и импортируем в Final Cut Pro X...

Motion design after 0:00:16

Motion design after effect рекламный макет одежда

🧩 Создание шаблонов 1:03:37

🧩 Создание шаблонов Final Cut Pro — курс уроков по Apple Motion

Комментарии
Автор

Спасибо, кажется очень простой и понятной атомик структура, захотелось попробовать, спасибо за обзор)

AleksandrNeo
Автор

Спасибо большое за видео урок было очень круто.

rustoiurazbaev
Автор

Лена, прекрасно выглядите ! Спасибо, интересная инфа

gregdmitriev
Автор

Спасибо за классное видео! Очень приятно смотреть на девушку программиста, которая выглядит, как с обложки журнала 😉

paltseveugeny
Автор

А так большое спасибо за такие видео. Помощь очень сильная в том что как реализовать всякого рода галереи.

frntsmaverick
Автор

Ооо какая красотка еще и прогерша я бы украл вас)

ТимаМираев
Автор

Отличный урок. Подскажите про three js - часто требуют в компаниях в Англии такую технологию с 3d анимацией?

biLLie_wiLLie
Автор

Я думаю Container не может стать Atom. Причина в том что Atom это наименьшая единица. Atom не может не чего оборачивать по методологии. Container будет скорее всего Organism. В атомарной методологии все очень строго описано что к чему относится.

frntsmaverick
Автор

Дизайн хороший, но по объяснению вообще ничего не понятно: что за атомик дизайн и чем он лучше от компонентов, что за формат изображений webp и почему именно он, что за модульный scss и как он работает если внутри прописан только один стиль для хедера.... Вернее обо всем этом разговор шел, но настолько невнятно что просто я в итоге почувствовал что зря потерял 48 минут своего времени - остались сплошные недоразумения и желание более чётких пояснений.

vvspl
Автор

Минута душниловки: vite читается как вит, с французского быстрый

agilkerimov