​​Выделение и 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 безумно простых способа переключить сайт в темный режим

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

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

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

- Копия YouTube за 1.5 часа. Верстка сайта с нуля (~2 часа)
Смотреть на YouTube

- Верстка сайта с нуля до завершения - HTML, CSS, JS (~7 часов)
Смотреть на YouTube

- Как подготовить макет сайта для верстки (~1 час)
Смотреть на YouTube

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

​Лучшие GitHub-репозитории для веб-разработчиков

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

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

​Красота прогрессивных улучшений в веб-разработке

Простым языком о прогрессивных улучшениях в вебе: зачем они нужны и как это все делается.

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

​​Все, что надо знать о min(), max(), clamp()

Хорошие новости - с 8 апреля 2020 функции сравнения CSS стали поддерживаться в Firefox, а это значит, что их наконец можно начинать использовать! Статья рассказывает о вариантах их использования.

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

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

- Верстка сайта для новичков Интенсив по верстке (~ 10 часов)
День 1 | День 2 | День 3

- Модальные окна (попапы) на HTML CSS JavaScript. Как это сделать? (~ 40 минут)
Смотреть на YouTube

- Верстаем сайт-портфолио на HTML/CSS из PSD (~2 часа)
Смотреть на YouTube

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

​​Как задать высоту строки в CSS

Как настроить высоту строки в CSS статья с подробным разбором line-height — одного из самых часто используемых, но не всегда правильно понимаемых атрибутов.

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

Еще больше программерского юмора ищите на канале Программист от бога

​​Что должен уметь верстальщик, чтобы его все хотели

Свежая хабр-статья, где тезисно описываются основные требования к верстальщикам в 2020. Полезно начинающим, чтобы понять, что хорошо было бы знать, чтобы повысить свой шанс найти работу.

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