​​Работа с изображениями в веб

Свежая статья, где описано все, что нужно знать о теге img, css-свойстве background и svg. Теория и куча примеров использования.

Читать статью

Актуальное

​​Доклады AvitoTech x FrontendConf 2019

На прошлой неделе появились записи докладов конференции FrontendConf 2019. Довольно много докладов по CSS. Посмотрите, чтобы оставаться в курсе последних трендов фронтенда и верстки в частности.

Смотреть на YouTube

​​4 свойства CSS Grid для большинства ваших потребностей

Отличная статья для тех, кто хочет начать работать с CSS Grid. Перечислен наименьший возможный набор свойств grid-ов, который вы должны знать, чтобы удовлетворить большинство ваших потребностей.

Читать статью

​​10 горячих клавиш VS Code, которые ускорят вашу работу

Свежая статья с обзором популярных горячих клавиш VSCode. Must read для тех, кто верстает и пишет код в этом редакторе.

Читать статью

​​Подборка видеотуториалов по верстке за последнюю неделю

- Адаптивная верстка макета с нуля. Марафон по верстке, GULP, SCSS, JS (>2 часов)
Смотреть на YouTube

- Верстка интернет-магазина техники из PSD макета. HTML, CSS. (>8 часов)
Часть 1 | Часть 2 | Часть 3 | Часть 4

- Практический доклад по верстке от ШРИ Яндекса (~2.5 часа)
Смотреть на YouTube

Хороших выходных!

​​Как в CSS воссоздать красивую анимацию Netflix

Небольшое руководство, где на чистом CSS делают слайдер предварительного просмотра как на Netflix. Читайте, если хотите научиться делать клевые слайдеры на CSS без зависимостей.

Читать статью

​​Список CSS-вопросов с собеседований с детальными ответами

Свежая статья, в которой автор разобрал свои любимые вопросы по CSS с собеседований. Ответы скрыты под спойлерами, так что можете заодно и проверить свои знания. Must read.

Читать статью

​​Как сместить футер в самый низ страницы: Flexbox vs. Grid

Сравнение двух способов размещения футера в нижней части страницы независимо от длины основного содержимого. С примерами кода.

Читать статью

​Подборка видеотуториалов по верстке за последнюю неделю

- Адаптивная верстка на Flexbox и Grid (~2.5 часа)
Смотреть на YouTube

- Марафон по верстке. Адаптивная верстка макета с нуля GULP SCSS JS
Часть 1 | Часть 2 | Часть 3

- Клон Uber Eats на HTML, CSS (SASS), JS (~1 час, english)
Смотреть на YouTube

​​Пять способов отложенной загрузки изображений

Свежая статья с описанием пяти подходов для организации lazy-loading для ваших изображений. От нативной загрузки до js-библиотек.

Читать статью

​​Гибкая разметка без медиа-запросов: функции min(), max(), clamp()

Свежая статья, где рассказывают, как сделать адаптив с использованием CSS Grid и математических функций.

Читать статью

​​Выделение и CSS

Клевая статья-справочник о ::selection и об эффектах для текста в целом. Куча примеров начиная от простых выделений заканчивая тенями и blur-ами.

Читать статью

​Понимание CSS Grid

Серия переводов статей о CSS Grid. Все очень доступно и подробно, в отличие от многих других материалов. Однозначно must read.

Часть 1: Grid-контейнер

Часть 2: Grid-линии

Часть 3: Grid-области

​​Памятка по работе с Canvas API

Статья с примерами работы с Canvas API, к которой удобно обращаться, если надо вспомнить изученный материал. Все разбито на отдельные блоки-sandbox-ы.

Читать статью

​​5 бесплатных инструментов, повышающих продуктивность труда веб-разработчика

Авторская статья с кратким описанием бесплатных инструментов для веб-дева. Подборы цветовых палитр, шрифтов, генерация SVG и тому подобное.

Читать статью

​​Изучаем CSS: свойство border (с примерами)

Свежая статья с обзором разных приемов использования border в CSS. Каждый кейс сопровождается sandbox-примером.

Читать статью

P.S. статья опубликована на techrocks.ru - у ребят есть свой телеграм-канал с уникальными статьями о разработке в целом и о веб-программировании в частности. Подписывайтесь, если интересно.

​​Подборка видеотуториалов по верстке за последние две недели

- Аккордеон на чистом HTML и СSS (~20 минут)
Смотреть на YouTube

- Верстка сайта с нуля до выгрузки на хостинг. Адаптивная верстка из Figma (~1.5 часа, обновляется)
Часть 1 | Часть 2 | Часть 3

- CSS Grid простыми словами (~45 минут, обновляется)
Часть 1 | Часть 2 | Часть 3

Хороших выходных 😇

​​Дорогая цена стилей. Доклад Яндекса

Классный доклад Никиты Дубко из Яндекса о том, как загружать CSS максимально производительно и незаметно для пользователей. Есть видос и огромная статья с разбором. Must read.

Читать и смотреть