34421
FullStack-материалы от Senior-разработчика для WEB-специалистов Сотрудничество: @CodingLead Разработка сайтов любой сложности 👨🏻💻
🖥 Agriculture Landing Website Templates – компоненты для создания лендингов на тему сельского хозяйства. Здесь также есть UI-кит и иконки.
Сайтодел | #макет #figma
«Я💛Фронтенд 2024»: встречаемся 23 марта в Москве!
Выступления спикеров, дискуссии с экспертами, новости веба, активности с подарками и, конечно же, нетворкинг — программа будет насыщенной.
Вы сможете послушать доклады крутых специалистов, напрямую задать им свои вопросы, познакомиться и пообщаться с другими участниками сообщества.
А чтобы ожидание конференции пролетело незаметно, мы подготовили разные интересные онлайн-выпуски, которые будут выходить на нашем сайте. Уже можно посмотреть:
🔸«Как это можно переписать?»
Обсудили, как найти разный подход к созданию одного и того же кода и выбрать тот, что понравится именно вам.
🔸 «Как устроены собеседования в Яндексе»
СЕО Hexlet Кирилл Мокевнин поделился, почему полезно ходить на профильные конференции и как это может повлиять на поиск и устройство на работу.
🔸 «Докладчики и конференции»
Рассказываем, как найти тему для выступления и побороть страх того, что она будет никому не интересна.
Смотрите выпуски на сайте и регистрируйтесь на конференцию.
20 марта перестаём принимать заявки на участие офлайн.
🐙 UI – репозиторий с примерами простых компонентов пользовательского интерфейса. Элементы написаны на React.js и Next.js.
Сайтодел | #репозиторий #github
💾 CSS-Only Directionally Aware Hover – темный фильтр для картинки, который скользит вслед за курсором по вертикали и по горизонтали. От курсора зависит, с какой стороны изображения выплывает фильтр.
Сайтодел | #сниппет #css
💾 CSS Scroll-Driven Animations – слайдер с четырьмя видами анимации скролла. Перелистывать слайды можно по вертикали, по горизонтали, а также с эффектами зума или плавного переключения.
Сайтодел | #сниппет #css
💾 Ipanema Pattern – паттерн с деталями в форме кругов и эллипсов. Можно использовать его как заставку для шапки сайта или как фоновое изображение.
Сайтодел | #сниппет #css
💾 SVG Debit Card Animation – анимированный фон для банковской карты. Этот эффект подойдет для страниц, где нужно вводить данные для оплаты товаров.
Сайтодел | #сниппет #css
💾 5 Card Carousel – галерея карточек с иконками и текстом. Перелистывать можно нажатием на карточку или на кнопки со стрелками.
Сайтодел | #сниппет #css
💾 Jello Tab Bar – табы с переключением цвета фона для каждой страницы. Главный плюс - анимация работает плавно.
Сайтодел | #сниппет #css
💾 Toggles – анимированные переключатели, которые меняют цвет, внешний вид внутреннего элемента и даже положение в пространстве.
Сайтодел | #сниппет #css
🎨 Цветовая палитра макета "Travel & Hotel Booking Light Mobile App" HEX | RGB #C9D5E5 | rgb(201,213,229)
#18C0C1rgb(24,192,193) #546A82 | rgb(84,106,130)⚠️ Цвет копируется одним кликом!
Сайтодел | #палитра
🖥 Parallax Effect – дизайн для слайдера. Здесь представлены приглушенные оттенки, зернистый фон и мягкие градиенты. Контраст создан за счет крупных заголовков и небольших кусков текста.
Сайтодел | #макет #figma
✍️ Space Grotesk – пропорциональный шрифт без засечек, основанный на семействе шрифтов Space Mono. Имеет особенности моноширного шрифта. Пример есть на официальном сайте Meteor
Сайтодел | #шрифт
🐙 Awesome Cheatsheets – репозиторий со шпаргалками по разным айти-тематикам. Тут есть листы по основным фронтенд-фреймворкам, инструментам разработчика и языку JavaScript.
Сайтодел | #репозиторий #github
🎨 Цветовая палитра макета "Colour Palettes/Moodboards" HEX | RGB #EAA43D | rgb(234,164,61)
#F75B0Drgb(247,91,13) #405C20 | rgb(64,92,32)⚠️ Цвет копируется одним кликом!
Сайтодел | #палитра
💾 Shader Practice – парящие в пространстве слои с паттернами. Идею можно использовать в качестве иллюстрации для сайта.
Сайтодел | #сниппет #css
🎨 Цветовая палитра макета "Geepay Fitness Tracking App" HEX | RGB #AAD19C | rgb(170,209,156)
#E0A5AArgb(224,165,170) #8FA2C6 | rgb(143,162,198)⚠️ Цвет копируется одним кликом!
Сайтодел | #палитра
✍️ Gochi Hand – это типографская интерпретация почерка подростка. Шрифт выглядит спонтанным и непринужденным, но на самом деле все символы хорошо проработаны и подходят для печати. Пример есть в дизайне "Kids Toys & Games Store Website"
Сайтодел | #шрифт
🖥 Sleep Time App – дизайн приложения для отслеживания времени сна. Цвет варьируется от очень светлого розового (на фоне) до темного кораллового на отдельных элементах.
Сайтодел | #макет #figma
🐙 Brainwave – репозиторий проекта по созданию сайта. Здесь есть сниппеты кода, ссылка на видеоурок и описание фич готового продукта.
Сайтодел | #репозиторий #github
✍️ Recoleta – шрифт с засечками, вдохновленный эстетикой 1970-х годов. Соединяет в себе мягкие формы и угловатые штрихи. Пример можно посмотреть в сниппете Cards
Сайтодел | #шрифт
🎨 Цветовая палитра макета "Parallax Effect" HEX | RGB #F1CBCB | rgb(241,203,203)
#F27A85rgb(242,122,133) #7D909C | rgb(125,144,156)⚠️ Цвет копируется одним кликом!
Сайтодел | #палитра
🖥 Geepay Fitness Tracking App – дизайн приложения для тренировок. Основные детали: пудрово-розовый фон, черные кнопки и небольшие яркие элементы.
Сайтодел | #макет #figma
🐙 Noi – платформа для интеграции искусственного интеллекта с веб-сайтами. Она содержит наборы инструментов, плагины и функционал для создания заметок.
Сайтодел | #репозиторий #github
✍️ Proxima Nova Soft – версия геометрического шрифта Proxima Nova, но с более скругленными деталями. Этот шрифт выглядит нейтрально и поэтому подходит для разных стилей. Пример есть тут: Nutanix Loading Screen
Сайтодел | #шрифт
💾 Hover Effect for Headers – восемь анимированных эффектов для заголовков слайдов. Некоторые из них влияют на отдельные буквы, а некоторые – на всё слово.
Сайтодел | #сниппет #css
💾 Parallax Depth Cards – карточки, имитирующие объемное изображение под стеклом. Каждая карточка вращается в пространстве и показывает скрытые края картинки.
Сайтодел | #сниппет #css
💾 Balkan Style Portfolio Gallery – лендинг для портфолио дизайнера. Детализация каждой работы находится в выпадающем окне.
Сайтодел | #сниппет #css
— Кто мы?
— Фронтендеры!
— Чего мы хотим?
— Делать крутые сайты!
— Где этому научиться?
— На канале «Будни разработчика», конечно!
— А что там?
— Крутые фишки фронтенда, истории лучших разработчиков и топовые статьи!
🖥 Travel & Hotel Booking Light Mobile App – дизайн мобильного приложения для бронирования отелей. Акцент здесь сделан на спокойных серо-бирюзовых оттенках и скругленных углах.
Сайтодел | #макет #figma