How to Make a Motion Layout with an Animation Gallery in Preact and TypeScript
In this video we will study: atomic design, pexels.com for photos, optimisation of images. We will find cool layout for developing, modify a little bit and discuss developing with animations.
🍀 Support the channel: https://www.donationalerts.com/r/webe...
☕️ Buy me a coffee: https://buy.stripe.com/5kA7sL9574SG7x...
😅 Buy my brushes for Procreate: https://webelart.com/illustration.
✍️ My telegram channel: https://t.me/webelart_en
🪆 Russian YouTube: @webelart
💁🏼♀️ My instagram: / webelart
🦄 LinkedIn: / webelart
Links which was used in the lesson:
🔗 Link on GitHub — https://github.com/liveldi/motion-gal... (Not forget to put a star here ⭐️).
🔗 Preact documentation — https://preactjs.com (click get started here 😉).
🔗 Atomic design — https://bradfrost.com/blog/post/atomi....
🔗 Figma — https://www.figma.com.
🔗 TinyPNG — https://tinypng.com.
🔗 Conver JPG to WEBP — https://convertio.co/png-webp/
🔗 Adobe products (Photoshop & Illustrator) — https://www.adobe.com.
🔗 Photo stock — https://www.pexels.com.
🔗 Fonts: https://fonts.google.com
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 Introduction.
02:55 Start.
09:24 Layout and Figma community.
13:30 Where to find professional photos.
15:26 Start develop the project.
16:38 Images format. What to choose.
31:42 Fonts.
36:35 Build Architecture. Atomic design.
41:29 Global styles & reset.
46:37 Building layout.
Thank you for watching and studying. Not forget to subscribe 🦉