Forwarded from Простой HTML | Программирование
Адаптивная форма входа и регистрации
Оставляем для вас ниже видео и код, с помощью которых вы можете создать адаптивную форму входа и регистрации.
👀Смотреть видео
💻Забрать код
#html #css #javascript #практика #адаптивнаявёрстка
Оставляем для вас ниже видео и код, с помощью которых вы можете создать адаптивную форму входа и регистрации.
👀Смотреть видео
💻Забрать код
#html #css #javascript #практика #адаптивнаявёрстка
Forwarded from Простой HTML | Программирование
This media is not supported in your browser
VIEW IN TELEGRAM
Анимированный фон
Оставляем для вас ниже код, который поможет создать необычный анимированный фон на HTML, CSS и JavaScript.
💻Забрать код
#html #css #javascript #практика
Оставляем для вас ниже код, который поможет создать необычный анимированный фон на HTML, CSS и JavaScript.
💻Забрать код
#html #css #javascript #практика
Forwarded from Простой HTML | Программирование
This media is not supported in your browser
VIEW IN TELEGRAM
Градиентная анимация загрузки
Оставляем для вас ниже код, который поможет создать круговую анимацию загрузки с градиентом на HTML и CSS.
💻Забрать код
#html #css #практика
Оставляем для вас ниже код, который поможет создать круговую анимацию загрузки с градиентом на HTML и CSS.
💻Забрать код
#html #css #практика
Forwarded from Простой HTML | Программирование
Как сократить время начальной загрузки веб-приложения
При посещении сайта на удовлетворенность пользователя влияет время ожидания до первого взаимодействия с контентом.
Поэтому делимся статьей, в которой рассказывают о способах оптимизации времени начальной загрузки веб-приложений.
👉Читать статью
#полезное
При посещении сайта на удовлетворенность пользователя влияет время ожидания до первого взаимодействия с контентом.
Поэтому делимся статьей, в которой рассказывают о способах оптимизации времени начальной загрузки веб-приложений.
👉Читать статью
#полезное
Forwarded from Простой HTML | Программирование
This media is not supported in your browser
VIEW IN TELEGRAM
Анимация загрузки
Оставляем для вас ниже готовый код анимации загрузки на HTML, CSS и JavaScript.
💻Забрать код
#html #css #javascript #практика
Оставляем для вас ниже готовый код анимации загрузки на HTML, CSS и JavaScript.
💻Забрать код
#html #css #javascript #практика
Forwarded from Простой HTML | Программирование
This media is not supported in your browser
VIEW IN TELEGRAM
Кнопка с эффектом при наведении
Делимся с вами ниже кодом для создания кнопки с эффектом молнии при наведении на HTML и CSS.
💻Забрать код
#html #css #практика
Делимся с вами ниже кодом для создания кнопки с эффектом молнии при наведении на HTML и CSS.
💻Забрать код
#html #css #практика
Forwarded from Простой HTML | Программирование
This media is not supported in your browser
VIEW IN TELEGRAM
Анимированные иконки социальных сетей
Делимся ниже готовым кодом иконок социальных сетей с эффектом при наведении на HTML и CSS.
💻Забрать код
#html #css #практика
Делимся ниже готовым кодом иконок социальных сетей с эффектом при наведении на HTML и CSS.
💻Забрать код
#html #css #практика
Forwarded from На фронте - javascript, html, css
Разделяй и не страдай: что выбрать для микрофронтенда?
В этой статье постарался сравнить разные способы организации МФ-ов, а также сформировать рекомендации, где какой подход использовать.
https://habr.com/ru/company/simbirsoft/blog/698240/
#js #education #ru
В этой статье постарался сравнить разные способы организации МФ-ов, а также сформировать рекомендации, где какой подход использовать.
https://habr.com/ru/company/simbirsoft/blog/698240/
#js #education #ru
Forwarded from For Web — фронтенд, дизайн, программирование
SSSVG, справочник по основным возможностям SVG с интерактивными примерами → https://fffuel.co/sssvg/
Forwarded from For Web — фронтенд, дизайн, программирование
Отзывчивая вёрстка в 2023 году: Ахмад Шадид рассказывает о современных возможностях CSS, изменивших подход к отзывчивой вёрстке → https://ishadeed.com/article/responsive-design/
Forwarded from На фронте - javascript, html, css
Что нового завезли в DevTools (Chrome 111)
Совсем недавно вышел Chrome 111 и принёс не только исправление старых ошибок, но и добавление новых, а также приятные фичи в DevTools, о которых мы с вами сейчас и узнаем.
https://habr.com/ru/post/717800/
#js #ru
💬 Чат фронтендеров
Совсем недавно вышел Chrome 111 и принёс не только исправление старых ошибок, но и добавление новых, а также приятные фичи в DevTools, о которых мы с вами сейчас и узнаем.
https://habr.com/ru/post/717800/
#js #ru
💬 Чат фронтендеров
Forwarded from For Web — фронтенд, дизайн, программирование
Современная вёрстка email-писем (без таблиц!): обзор текущего состояния email-клиентов, их возможностей и новых подходов к вёрстке писем → https://fullystacked.net/posts/modern-html-email/
Forwarded from xCode Journal
Общие
Emmet — Генератор HTML-код из «CSS-селекторов»
Can I Include — Подскажет, можно ли класть один тег в другой по правилам семантики
HTML head — Содержит список всего, что может быть в <head> страницы
W3C Validator — валидатор HTML-кода
HEX to RGB — конвертер цветов между разными цветовыми схемами
Доступность
Axe — Браузерный плагин для проверки доступности страниц
Weblind — Содержит рекомендации по разработке сайтов для людей с нарушениями зрения.
Inclusive Components — Готовый код слайдеров, аккордеонов и других компонентов с упором на доступность
Logical Content Flow — Инструмент для обнаружения проблем с заголовками, их порядком и отображением
Better Mobile Inputs — Поможет подобрать <input> и атрибуты для него так, чтобы им было удобно пользоваться на мобильных устройствах
Работа с изображениями
Squoosh — Сжатие изображений без потери качества
SVG URL Encoder — кодирует SVG в URL-строку, чтобы использовать его в background в css
SVG OMG — оптимизатор SVG
How to Favicon — Чеклист о том, как добавлять фавиконку на сайт без лишнего кода
Работа с письмами
Good Email Code — Справочник по «пуленепробиваемой» верстки писем
Ставь 🔥 если нашел для себя что-то полезное
@vollex_frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from xCode Journal
Общие
Emmet — Генератор HTML-код из «CSS-селекторов»
Can I Include — Подскажет, можно ли класть один тег в другой по правилам семантики
HTML head — Содержит список всего, что может быть в <head> страницы
W3C Validator — валидатор HTML-кода
HEX to RGB — конвертер цветов между разными цветовыми схемами
Доступность
Axe — Браузерный плагин для проверки доступности страниц
Weblind — Содержит рекомендации по разработке сайтов для людей с нарушениями зрения.
Inclusive Components — Готовый код слайдеров, аккордеонов и других компонентов с упором на доступность
Logical Content Flow — Инструмент для обнаружения проблем с заголовками, их порядком и отображением
Better Mobile Inputs — Поможет подобрать <input> и атрибуты для него так, чтобы им было удобно пользоваться на мобильных устройствах
Работа с изображениями
Squoosh — Сжатие изображений без потери качества
SVG URL Encoder — кодирует SVG в URL-строку, чтобы использовать его в background в css
SVG OMG — оптимизатор SVG
How to Favicon — Чеклист о том, как добавлять фавиконку на сайт без лишнего кода
Работа с письмами
Good Email Code — Справочник по «пуленепробиваемой» верстки писем
Ставь 🔥 если нашел для себя что-то полезное
@vollex_frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from For Web — фронтенд, дизайн, программирование
Введение в CSS-маски: Ахмад Шадид объясняет основы использования масок в CSS и делится практическими примерами их применения → https://ishadeed.com/article/css-masking/
Forwarded from For Web — фронтенд, дизайн, программирование
CSS-медиафичи для улучшения доступности: Татьяна Фокина с обзором пользовательских настроек вроде отключения анимаций, которые стоит учитывать в вёрстке → https://tatiana-fokina-blog.ru/posts/css-media-features-for-a11y/
Forwarded from For Web — фронтенд, дизайн, программирование
Перевёрстка блока новостей Vox news на современном CSS: эксперимент Ахмада Шадида по применению гридов, медиавыражений от контейнера и других современных возможностей CSS → https://ishadeed.com/article/rebuild-featured-news-modern-css/
Forwarded from For Web — фронтенд, дизайн, программирование
Анимации, управляемые прокруткой: введение в новые нативные API для анимаций и демонстрация их возможностей → https://developer.chrome.com/articles/scroll-driven-animations/
Forwarded from For Web — фронтенд, дизайн, программирование
Почему большая DOM плохо влияет на быстродействие, как измерять размер DOM и какие подходы использовать для предотвращения проблем → https://web.dev/dom-size-and-interactivity/
Forwarded from For Web — фронтенд, дизайн, программирование
Что нового в разработке веб-интерфейсов в 2023 году: обзор наиболее интересных и полезных свежих браузерных API и возможностей CSS, представленных на Google I/O → https://developer.chrome.com/blog/whats-new-css-ui-2023
Вдогонку 52 видео с веб-трека Google I/O → https://www.youtube.com/playlist?list=PLOU2XLYxmsIJGxIV8Lt8gF_79Z334LQ6h
Вдогонку 52 видео с веб-трека Google I/O → https://www.youtube.com/playlist?list=PLOU2XLYxmsIJGxIV8Lt8gF_79Z334LQ6h
Forwarded from For Web — фронтенд, дизайн, программирование
Верстаем письма на React: инженеры Yelp рассказывают, как они адаптировали для разработки писем привычные их фронтендерам инструменты вроде React и Storybook → https://engineeringblog.yelp.com/2022/07/writing-emails-using-react.html