В видео изучим как сделать Motion Gallery, поговорим про Atomic Design, оптимизацию картинок и многое другое. 🍀 Поддержать развитие канала:
https://www.donationalerts.com/r/webe... ☕️ Купить мне кофе:
🥰 Купить мои кисти для ProCreate:
✍️ Мой телеграм канал:
🏰 Английский YouTube: @webelart_en 💁🏼♀️ Мой инстаграм: / webelart 🦄 LinkedIn: / webelart Ссылки используемые в уроке: 📹 Сброс и нормализация в CSS — • TypeScript от А до Я — часть 1: primi... ☀️ Ссылка на проект на GitHub —
Links to images on Pexels.com: 🦜 Parrot —
🦊 Fox —
🐿️ Squirrel —
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 Домашнее задание. Заключение. На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.
