Как Apple делает эти безумные видеопереходы при прокрутке?

Давайте воссоздадим это с помощью чистого CSS с анимацией, управляемой прокруткой, и view-timeline.

Именно так, никаких слушателей событий прокрутки

Получить фрагменты кода, подсказки и полное руководство можно здесь

📢 WebDev // IT & Чат

Подписки на нейронки без переплат на ggsel

На сайте собраны все нужные ИИ-модели для работы и учебы 👨‍💻

Иностранные карты не потребуются — оплатить подписку безопасно можно картой российского банка

А еще до 20 ноября в канале ggsel: AI, tech, digital проходит розыгрыш набора LEGO и подписки тг премиум на год

💡 Шпаргалка по JavaScript

📢 WebDev // IT & Чат

Делаем 6 проектов на React для начинающих

В этом видеоуроке автор показывает, как разработать 6 разных React-проектов уровня Junior всего за 2 часа.

➡️ Смотреть видео & Скачать видео

📢 WebDev // IT & Чат

Совет по CSS

В Anchor Positioning можно использовать position-area, чтобы разместить элемент относительно его якоря — и, внезапно, возможных позиций аж 36 штук

Запомнить всё это нереально, поэтому сделалb интерактивную демку, где можно просто выбрать нужное положение и сразу получить готовый код.

➡️ https://css-tip.com/position-area/

📢 WebDev // IT & Чат

Адаптация сайта под мобильные устройства за 10 минут

Сегодня мы полностью адаптируем сайт под мобильные устройства. На самом деле это очень просто. Приятного просмотра! В этом ролике подробно рассказывается, что такое адаптивная верстка или адаптация сайта. Все это помогут нам сделать медиа запросы css3 (css media queries).

➡️ Смотреть видео & Скачать видео

📢 WebDev // IT & Чат

HTML- и CSS-советы для джуниор фронтенд-разработчиков

Автор этой статьи решил помочь новичкам во фронтенде обратить внимание на ключевые аспекты работы с HTML и CSS, чтобы сделать их код качественнее.

➡️ Читать статью

📢 WebDev // IT & Чат

5 инструментов для веб-разработчиков

http://penpot.app - Альтернатива Figma с открытым исходным кодом

http://sevalla.com - Full-stack хостинг для современных веб-приложений

http://excalidraw.com - Диаграмма стилей, нарисованная от руки

http://locomotivemtl.github.io/locomotive-scroll/ - Плавная прокрутка с эффектом параллакса

http://maxwellito.github.io/vivus/ - Анимация SVG-рисунков в реальном времени

📢 WebDev // IT & Чат

Адаптивная верстка за пару минут

Новый взгляд на создание адаптивных красивых сайтов - CSS Grid. В ходе этого видео мы научимся работать с CSS Grid, разберемся что это такое и поймем почему это круче FlexBox!

➡️ Смотреть видео & Скачать видео

📢 WebDev // IT & Чат

Как тестируют API: разбираемся на примере REST API

API — что-то вроде универсального переводчика, который помогает программам обмениваться данными и функциями.

Бывает, что нужно убедиться, что API работает как надо и передаёт то, что нужно.

Чтобы не проверять всё на настоящей программе, делают проще и тестируют API с помощью отдельных инструментов.

➡️ Читать статью

📢 WebDev // IT & Чат

Создавай SVG-графики для своего сайта без библиотек

Импортируй данные из Excel, CSV или вводи вручную.
Доступно 8 разных типов, и всё это можно сделать за пару секунд.

➡️ https://makegraph.app/

📢 WebDev // IT & Чат

Создание сайта портфолио с крутой анимацией

В этом уроке мы рассмотрим создание сайта портфолио с диагональным плавным скроллом. Мы рассмотрим нестандартный способ синхронизации вертикальных слайдов на JS и инверсию движения в различных направлениях с помощью CSS. При наведении слайды на сайте будут увеличиваться с красивой анимацией. Также мы разработаем CSS анимацию инерции для скролла.

➡️ Смотреть видео & Скачать видео

📢 WebDev // IT & Чат

Коллекция полезных HTML и CSS фич, которые редко используются

Автор этой статьи составил список HTML и CSS фич, которые полезные, но почему-то о них мало кто знает:

Элемент search;
Атрибут enterkeyhint;
Свойства трансформации rotate, translate и scale;
Значение contents;
Псевдо-класс :nth-child();
Свойства text-decoration и text-underline-offset.

Всё рассмотрено на примерах

➡️ Читать статью

📢 WebDev // IT & Чат

Держите полезную CLI-утилиту — npkill, предназначенную для удаления всех папок node_modules в проектах.

Позволяет освободить значительное количество места на диске

Запускаешь команду:

npx npkill

Дальше, просто нажимаешь [Пробел], чтобы удалить те папки, которые больше не используешь

Удобно ещё и то, что она показывает, сколько дней назад была последняя модификация

📢 WebDev // IT & Чат

Создание красивого сайта с плавающими картинками

В этом уроке мы рассмотрим создание сайта с плавной анимацией, реализуем самый простой способ оформления контента в виде плиток Masonry на чистом CSS и добавим поддержку темной темы ОС (Dark Mode). Кроме того, я покажу, как правильно разрабатывать прелоадер для подобных сайтов. Решение для мобильных устройств и другие полезные дополнения на странице урока.

➡️ Смотреть видео & Скачать видео

📢 WebDev // IT & Чат