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

- Адаптивная верстка макета с нуля. Марафон по верстке, 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.

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

​​Руководство по использованию SVG-favicon для современных браузеров

SVG favicons поддерживаются всеми современными браузерами и они поудобнее, чем обычные фавиконки. Коротенькое руководство о том, как их сделать.

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

​​Интересные CSS-находки в дизайне Twitter

Код ревью CSS, который пишут в Twitter. Интересные (и странноватые в том числе) находки.

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

​​Рецепты по стилизации списков в CSS

Статья с набором sandbox-ов c примерами разных техник для стилизации списков. Статья на английском, но текста немного - большая часть - примеры кода.

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

​​Как создать карусель на чистом CSS

Практический step-by-step гайд про создание карусели на чистом CSS. Во все шаги автор добавил ссылки на codepen.

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

​​3 безумно простых способа переключить сайт в темный режим

Темные темы в последнее время набрали популярность - вот свежая статья про базовые способы организации переключения сайта на темную/светлую тему.

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