Как сделать 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: primitives... ☀️ Ссылка на проект на 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 Домашнее задание. Заключение. На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.
