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

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

🍀 Поддержать развитие канала: https://www.donationalerts.com/r/webe...
☕️ Купить мне кофе: https://buy.stripe.com/5kA7sL9574SG7x...
🥰 Купить мои кисти для ProCreate: https://webelart.com/illustration.
✍️ Мой телеграм канал: https://t.me/webelart
🏰 Английский YouTube: ‪@webelart_en‬
💁🏼‍♀️ Мой инстаграм:   / webelart  
🦄 LinkedIn:   / webelart  

Ссылки используемые в уроке:
📹 Сброс и нормализация в CSS —    • TypeScript от А до Я — часть 1: primi...  
☀️ Ссылка на проект на GitHub — https://github.com/liveldi/motion-gal...

Links to images on Pexels.com:
🦜 Parrot — https://www.pexels.com/photo/photo-of...
🦊 Fox — https://www.pexels.com/photo/photo-of...
🐿️ Squirrel — https://www.pexels.com/photo/brown-sq...

00:00 Введение.
01:00 Установка.
03:10 Разбираем как сделана галерея.
04:25 Atomic Design.
05:30 React VS Preact.
06:10 Reset стилей и базовые стили.
07:40 Figma. Community. Макеты.
09:40 Pexels.com — качественный изображения.
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 Домашнее задание. Заключение.

На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.