КодВеб | Дизайн База

🎨 Эффект матового стекла в Figma Один из самых простых и при этом эффектных способов украсить вашу работу в Figma. Притом делается всего за минуту, ну красота же! 😊 🎨 Дизайн База. Подписаться #Гайды #Figma

🚀 Поднимаем уровень с Junior до Senior UX/UI Designer Секрет успеха главных UX/UI дизайнеров мира в том, что они знают, как создавать интуитивно понятные и привлекательные интерфейсы. Автор этого видео обещает нам раскрыть эти секреты и помочь стать лучшими дизайнерами, чем мы есть сейчас. Ну как, верим? 😅 В любом случае, рекомендую посмотреть, как минимум с точки зрения дизайна видео отлично сделано, можно пару фишек подметить для себя. 🎨 Дизайн База. Подписаться #Гайды

⚡️ Бесплатное обучение фронтенду (HTML/CSS + JS + React) с нуля с поддержкой от наставника Опыт в программировании не нужен. На канале Интенсивный JavaScript действующий тимлид и опытный разработчик помогает изучить фронтенд на практических задачах, которые интересно кодить С 17 декабря стартует бесплтаное обучение, где он на практике поможет разобраться в основах — HTML/CSS и JavaScript и React на примере проекта — доски объявлений. 💡Вот план обучения: — день 1: Начинаем верстку. Верстаем шапку, элемент Поиск. — день 2: Про верстку. Верстаем контент главной страницы и карточку товара. Верстаем страницу одного товара — день 3: Подключаем JS. Изучаем базовые понятия. Обработка событий. — день 4: Базовое приложение React. Компонентный подход. — день 5: Переносим верстку в приложение React. Подключаем роутинг. Создаем страничку одного товара Обучение подойдёт, даже если у вас нет опыта в программировании — всё объясняют так, чтобы поняла даже ваша бабуля 🔖Ещё этот парень регулярно набирает новичков в свою команду и знает, как трудоустроиться и джуну, и разрабу поопытнее Помимо работы с кодом он даст пошаговый план изучения всего, что нужно современному фронтенду. Поделится способом трудоустройства. Расскажет, как взять свой первый заказ на фрилансе без фриланс-бирж с огромной конкуренцией Подписывайтесь, чтобы участвовать бесплатно Учиться самостоятельно можно бесконечно, если не знать, куда копать. На интенсиве сократите время на поиск информации и получите пошаговый план от разработчика, который нанимает новичков в команду 👉Участвовать бесплатно Подготовительные уроки уже доступны.

🍕 Разработка FullStack интернет-магазина Стандартная ситуация: вы захотели сделать сайт для своей пиццерии своими же руками. Ну что ж, вот для вас отличный гайд, за который вы и сайт сделаете, и почти станете фуллстек-разрабом 😊 Содержание, как обычно, под катом (осторожно, там 22 часа материала!):

00:00:00 Введение 00:03:20 Начало 00:13:55 Figma-дизайн приложения 00:16:55 Настраиваем стили, используем готовый исходник 00:18:25 Подключаем TailwindCSS + ShadCN 00:31:55 Подключаем Lucide icons 00:32:50 Вёрстка Header 00:53:10 Вёрстка Categories 01:04:20 Вёрстка фильтров 01:28:00 Что такое Client Component / Server Component 01:37:10 Исправляем ошибку с помощью 'use client' 01:44:10 Доделываем фильтры 01:51:50 Вёрстка списка продуктов 02:07:50 Используем Intersection Observer для подсветки категорий 02:16:00 Подключаем ЗУСТАНД 02:26:30 Подключаем Prisma, объясняю как писать схему 02:56:00 Пробуем получить данные из БД через наш API 03:10:30 Связи в Prisma. One-to-One, One-to-Many, Many-to-One, Many-to-Many (Relations ships) 03:25:10 Доделываем основную часть схемы 04:17:00 Пишем скрипт для генерации тестовых данных (Seeding) 05:15:30 Создаем API для ингредиентов 05:18:30 Создаем API для продуктов 05:24:30 Делаем поиск на фронтенде 05:56:25 Доделываем основную логику фильтров 07:24:20 Отображаем группу продуктов и категории с БД 07:56:00 NextJS: Group Routes / Layouts 08:17:00 Создаем модальное окно продукта (Parallel Routes) 10:32:45 Реализация корзины 13:13:15 Подключаем react-hot-toast 13:21:10 Доделываем модальное окно продукта 13:44:30 Как NextJS рендерит JS-код клиентских и серверных компонентов (оптимизация) 14:00:00 Доделываем фильтрацию товаров с хранением параметров в URL 14:36:00 Отображение страницы товара (как в модальном окне) 15:52:30 Докручиваем логику корзины 15:30:00 Делаем страницу оформления заказа 17:41:00 NextJS: Server Actions 17:48:00 Создание заказа 18:15:20 Подключаем сервис Resend для отправки E-Mail писем 18:39:00 Подключаем оплату через Yookassa 19:05:10 Доделываем функционал обработки заказа 19:45:10 Реализация авторизации, регистрации, профиля через NextAuth 21:46:00 Подтверждение аккаунта с помощью проверочного кода на E-Mail 22:06:35 Дорабатываем контактную форму оформления заказа 22:12:30 Разработка сторисов с помощью react-insta-stories 22:34:20 Деплой проекта в Vercel

🎨 Дизайн База. Подписаться #Курсы #Figma

✅️ GitHub теперь в Telegram! Подписывайтесь: @GitHub

🎨Верстаем сайт по макету из Figma Мини-курс полностью посвящен практике. В течении 9 уроков вы с нуля по макету из Figma научитесь адаптивной вёрстке сайтов и создадите портфолио на GitHub Pages, куда сможете добавить этот сайт. Всё без по делу и бесплатно, как мы все и любим 😎 🎨 Дизайн База. Подписаться #Курсы #Верстка #Figma

🤔 Почему Красивые сайты НЕ Продают? В этом видео мы поговорим, почему же красивые и дорогие сайты не нужны вашим клиентам. Почему эти сайты не продают? И как совместить красивый сайт с функциональным и добиться максимальной пользы как для вас, так и для вашего заказчика? 🎨 Дизайн База. Подписаться #Разбор #Веб

📝 Создаём cвои сайты с нуля на Tilda Tilda — платформа для создания сайтов и проектов, для использования которой не требуется знание фронтенда: благодаря инструментам ZeroBlock вы сможете просто сверстать свой сайт и добавить к нему свой дизайн, например, из Figma. В этом курсе есть всё для создания хорошего сайта на Тильде. Как обычно, курс начинается с представления платформы, а затем продолжается до полной настройки сайта и вывода его в продакшен. 🎨 Дизайн База. Подписаться #Верстка #Tilda #Figma

🚨 Внимание собрали для вас актуальную подборку телеграм каналов по программированию, безопасности и литературе! 📱Архив программиста - Читайте IT-книги в нашем канале Все книги в pdf формате и на русском языке. 📱Склад программиста - Шпаргалки, полезности, книги ,лайфхаки и популярный софт 📱Аудит безопасности - Авторский канал - твой гид в InfoSec Лучший сборник программного обеспечения и разведки в сети. P.S Без плагиата,самая актуальная информация

🎨 Большой обзор плагинов для Figma Пятнадцать видео по обзору самых разных плагинов, от лёгкого создания текста по кругу и создания презентаций до перевода картинок из растровых в векторные. 🎨 Дизайн База. Подписаться #Гайды #Figma

📺 Собираем макет на UIKit кодом UIKit — модульная и легкая библиотека с полным набором компонентов, включая кнопки, слайдеры и модальные окна. Имеет обширную и подробную документацию, которая помогает быстро приступить к разработке. По видео мы за час научимся кодом в UIKit собирать созданный в Figma макет интерфейса приложения. 🎨 Frontend База. Подписаться #UIKit #CSS #Figma

🎨 Creatie — аналог Figma с ИИ Платформа для разработки, аудита и улучшения UI/UX, эдакая Figma на стероидах с рядом новых ИИ-инструментов для улучшения визуального дизайна и упрощения работы. Если попробуете, дайте знать, лучше эта штука, чем Фигма или нет. Судя по тому, что она ещё не захватила рынок, я в этом сомневаюсь 😅 Но почему бы и нет? 🎨 Дизайн База. Подписаться #Сервис #ИИ

Материалы, которые помогут в трудоустройстве фронтендерам 👩‍💻 и бэкендерам 👩‍💻 Вот список: 1. Подтягиваем знания по фронту Приватные курсы по JS и фреймворкам, чтобы подтянуть знания Фронтенд || Бэкенд 2. Перенимаем чужой опыт Архив книг — перенимаем опыт крутых программистов из их работ Фронтенд || Бэкенд 3. Разбираем вопросы с собесов Вопросы с собесов от действующего тимлида. Разбираем всё, что спрашивают на собесах Фронтенд || Бэкенд 4. Осваиваем новые инструменты Инструменты для разработки, которые пригодятся каждому фронтендеру Фронтенд || Бэкенд 5. Добавляем работы в портфолио Макеты для практики HTML/CSS/JS и новых работ Фронтенд 6. Тренируем навык чтения кода Простые задачи по JS — тренируем понимание кода без его написания Фронтенд 7. Держимся в курсе происходящего в IT Новые направления, инструменты, фреймворки, новости, статистика по зарплатам в IT Фронтенд || Бэкенд Удалю через 48 часов ☄️

Dev Fonts — крупная библиотека шрифтов для программиста. Если хотите, чтобы ваш код красиво выглядел, бегом сюда: на этом сайте собраны лучшие шрифты для ваших консолей и IDE. Под оформление можно выбрать тему и язык прогарммирования, чтобы посмотреть, как будет выглядеть шрифт ещё до скачивания. А ещё шрифты можно сравнивать между собой прямо на сайте. 🎨 Дизайн База. Подписаться #Сервис #Шрифты #UXUI

🤔 UX-манипуляции: уроки обольщения пользователей Интересно, почему одни интерфейсы цепляют нас с первого клика, а от других хочется поскорее убежать и никогда не возвращаться? Я занимаюсь UX-дизайном уже более 8 лет и, разрабатывая интерфейсы для сложных систем (ERP, CRM, EAM), нашла ключик к сердцам пользователей — уважение к их времени. Время — самая ценная валюта, имеющаяся у человека. И чем бережнее мы к нему относимся, тем проще получается влюбить пользователей в свой продукт. В этой статье я расскажу, как основные UX-манипуляции (принципы) связаны с фундаментальными аспектами человеческой психики. Также приведу простые примеры, которые бесспорно сразят пользователей наповал — just try it ;) 🎨 Дизайн База. Подписаться #Разбор #UXUI

📍 Shape Type — ещё один сайт с упражнениями по кривым Безье Перед вами встаёт задача — воссоздать формы культовых шрифтов с помощью изгибов кривых Безье. Отличная практика, если вы ещё не овладели Pen Tool, да и для опытных дизайнеров это может стать тем ещё челленджем 😅 🎨 Дизайн База. Подписаться #Сервис

Совет фронтендерам: уважайте свое время В Html Gram собраны готовые и уникальные codepen решения на каждый день. От эффектов при наведении до 3D анимации. Учитесь, практикуйтесь и прокачивайте свое портфолио вместе с @HtmlGram

🎨 Мини-курс «Figma для новичков» Figma по праву считается главным инструментом среди веб- и UX/UI-дизайнеров по всему миру. Самое время научиться основам работы в Фигме по этому подробному курсу. Благодаря данному плейлисту вы познакомитесь с программой Figma. Изучите интерфейс и инструменты Figma. Разберете как работать с масками, слоями и стилями. Получите навыки по работе с текстом в Figma и закрепите все знания на практике, создав первый экран сайта. 🎨 Дизайн База. Подписаться #Курсы #Figma

🎨 Игра Безье (The Besier Game) Этот сайт поможет вам в практике с Pen Tool. После короткого туториала вам предложат нарисовать сложные фигуры с помощью кривых Безье. Сможете нарисовать все с первого раза? 😅 🎨 Дизайн База. Подписаться #Сервис

👨‍💻SaaS Widget Виджет-карточка пользователя Исходники | @codewebx | #codepen