Как сделать Motion Макет с анимационной галереей на Preact & TypeScript
Рет қаралды 2,868
В видео изучим как сделать Motion Gallery, поговорим про Atomic Design, оптимизацию картинок и многое другое.
🍀 Поддержать развитие канала: www.donationalerts.com/r/webe...
☕️ Купить мне кофе: buy.stripe.com/5kA7sL9574SG7x...
🥰 Купить мои кисти для ProCreate: webelart.com/illustration.
✍️ Мой телеграм канал: t.me/webelart
🏰 Английский KZfaq: @webelart_en
💁🏼♀️ Мой инстаграм: / webelart
🦄 LinkedIn: / webelart
Ссылки используемые в уроке:
📹 Сброс и нормализация в CSS - • TypeScript от А до Я -...
☀️ Ссылка на проект на GitHub - github.com/liveldi/motion-gal...
Links to images on Pexels.com:
🦜 Parrot - www.pexels.com/photo/photo-of...
🦊 Fox - www.pexels.com/photo/photo-of...
🐿️ Squirrel - 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 Домашнее задание. Заключение.
На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.
@leetcode24 5 ай бұрын
Ура, новый ролик от Ленуськи🤩
@rustoiurazbaev2314 5 ай бұрын
Спасибо большое за видео урок было очень круто.
@webelart 5 ай бұрын
🥰🌸
@DoSmth 5 ай бұрын
Спасибо, кажется очень простой и понятной атомик структура, захотелось попробовать, спасибо за обзор)
@webelart 5 ай бұрын
Да, подход очень крутой!
@paltseveugeny 5 ай бұрын
Спасибо за классное видео! Очень приятно смотреть на девушку программиста, которая выглядит, как с обложки журнала 😉
@webelart 5 ай бұрын
Вау спасибо большое! 😊 Мне приятно такое слышать.
@theoty-js 5 ай бұрын
Пасибки ;)
@gregdmitriev2784 5 ай бұрын
Лена, прекрасно выглядите ! Спасибо, интересная инфа
@webelart 5 ай бұрын
Спасибо! Я рада ❤️
@user-wv3mk5hl7r 5 ай бұрын
Превьюшка очень крутая))
@webelart 5 ай бұрын
Спасибо! ❤
@user-gt8tg2if3b 5 ай бұрын
Ооо какая красотка еще и прогерша я бы украл вас)
@webelart 5 ай бұрын
Спасибо! ☺
@fr0ntsmaverick 5 ай бұрын
А так большое спасибо за такие видео. Помощь очень сильная в том что как реализовать всякого рода галереи.
@webelart 5 ай бұрын
❤❤❤
@biLLie_wiLLie 5 ай бұрын
Отличный урок. Подскажите про three js - часто требуют в компаниях в Англии такую технологию с 3d анимацией?
@webelart 5 ай бұрын
Спасибо, three js используется. Но для текущего макета эта библиотека не подходит. three js лучше использовать, когда вы активно работаете с 3D графикой, т.к. её вес довольно приличный bundlephobia.com/package/three-js@79.0.0.
@fr0ntsmaverick 5 ай бұрын
Я думаю Container не может стать Atom. Причина в том что Atom это наименьшая единица. Atom не может не чего оборачивать по методологии. Container будет скорее всего Organism. В атомарной методологии все очень строго описано что к чему относится.
@webelart 5 ай бұрын
Я решила туда положить, т.к. нет зависимости от других компонент. Следовательно атомарная структура. Однако это как сетка, больше атома. Посмотрю ещё раз организмы. Спасибо! ❤️
@vvspl 5 ай бұрын
Дизайн хороший, но по объяснению вообще ничего не понятно: что за атомик дизайн и чем он лучше от компонентов, что за формат изображений webp и почему именно он, что за модульный scss и как он работает если внутри прописан только один стиль для хедера.... Вернее обо всем этом разговор шел, но настолько невнятно что просто я в итоге почувствовал что зря потерял 48 минут своего времени - остались сплошные недоразумения и желание более чётких пояснений.
@webelart 5 ай бұрын
Хорошее замечание, я сниму больше видео отдельно по темам с лучшим разбором. ❤
@agilkerimov 5 ай бұрын
Минута душниловки: vite читается как вит, с французского быстрый
@webelart 5 ай бұрын
Я говорю на русском и английском языках. ❤
@agilkerimov 5 ай бұрын
@@webelart дело не в том в каком языке кто говорит. Человек создал продукт и назвал его так.
@agilkerimov 5 ай бұрын
@@webelart в английском нет такого слова как vite, как и в русском
@webelart 5 ай бұрын
@@agilkerimov Мне жаль, что вас так триггерит произношение слов и отвлекает от сути.
@agilkerimov 5 ай бұрын
@@webelart вообще не тригерит и если честно I don't care. Я дал вам информацию. Хотите пользуйтесь, хотите пожалуйста продолжайте говорит Уайт. Ваше право. Лично Меня когда корректируют, я благодарю и стараюсь исправлять. Видимо у вас другой подход, то что я говорю истина в последней инстанции. Удачи
Елена Литвинова — Искусство Веб-разработки 🛸
Рет қаралды 3,3 М.
Елена Литвинова — Искусство Веб-разработки 🛸
Рет қаралды 948
Елена Литвинова — Искусство Веб-разработки 🛸
Рет қаралды 4,4 М.
Елена Литвинова — Искусство Веб-разработки 🛸
Рет қаралды 3,4 М.
Elena Litvinova — The Art of Web Development 🛸
Рет қаралды 224
Polina Strogina
Рет қаралды 16 М.
Даниил Рязанцев: правильный веб-дизайн
Рет қаралды 21 М.
StatQuest with Josh Starmer
Рет қаралды 11 М.