Почитать про верстку
6 subscribers
267 photos
13 videos
292 links
Ссылки на полезные статьи
Download Telegram
Forwarded from Простой HTML | Программирование
Адаптивная форма входа и регистрации

Оставляем для вас ниже видео и код, с помощью которых вы можете создать адаптивную форму входа и регистрации.

👀Смотреть видео
💻Забрать код

#html #css #javascript #практика #адаптивнаявёрстка
Forwarded from Простой HTML | Программирование
This media is not supported in your browser
VIEW IN TELEGRAM
Анимированный фон

Оставляем для вас ниже код, который поможет создать необычный анимированный фон на HTML, CSS и JavaScript.

💻Забрать код

#html #css #javascript #практика
Forwarded from Простой HTML | Программирование
This media is not supported in your browser
VIEW IN TELEGRAM
Градиентная анимация загрузки

Оставляем для вас ниже код, который поможет создать круговую анимацию загрузки с градиентом на 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 #практика
Forwarded from Простой HTML | Программирование
This media is not supported in your browser
VIEW IN TELEGRAM
Кнопка с эффектом при наведении

Делимся с вами ниже кодом для создания кнопки с эффектом молнии при наведении на HTML и CSS.

💻Забрать код

#html #css #практика
Forwarded from Простой HTML | Программирование
This media is not supported in your browser
VIEW IN TELEGRAM
Анимированные иконки социальных сетей

Делимся ниже готовым кодом иконок социальных сетей с эффектом при наведении на HTML и CSS.

💻Забрать код

#html #css #практика
Forwarded from На фронте - javascript, html, css
Разделяй и не страдай: что выбрать для микрофронтенда?

В этой статье постарался сравнить разные способы организации МФ-ов, а также сформировать рекомендации, где какой подход использовать.

https://habr.com/ru/company/simbirsoft/blog/698240/

#js #education #ru
SSSVG, справочник по основным возможностям SVG с интерактивными примерами → https://fffuel.co/sssvg/
Отзывчивая вёрстка в 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

💬 Чат фронтендеров
Современная вёрстка 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
Введение в CSS-маски: Ахмад Шадид объясняет основы использования масок в CSS и делится практическими примерами их применения → https://ishadeed.com/article/css-masking/
CSS-медиафичи для улучшения доступности: Татьяна Фокина с обзором пользовательских настроек вроде отключения анимаций, которые стоит учитывать в вёрстке → https://tatiana-fokina-blog.ru/posts/css-media-features-for-a11y/
Перевёрстка блока новостей Vox news на современном CSS: эксперимент Ахмада Шадида по применению гридов, медиавыражений от контейнера и других современных возможностей CSS → https://ishadeed.com/article/rebuild-featured-news-modern-css/
Анимации, управляемые прокруткой: введение в новые нативные API для анимаций и демонстрация их возможностей → https://developer.chrome.com/articles/scroll-driven-animations/
Почему большая DOM плохо влияет на быстродействие, как измерять размер DOM и какие подходы использовать для предотвращения проблем → https://web.dev/dom-size-and-interactivity/
Что нового в разработке веб-интерфейсов в 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
Верстаем письма на React: инженеры Yelp рассказывают, как они адаптировали для разработки писем привычные их фронтендерам инструменты вроде React и Storybook → https://engineeringblog.yelp.com/2022/07/writing-emails-using-react.html