Продвинутая адаптивная верстка - CSS container queries

#посмотреть

Технология адаптивной верстки container queries, позволяющая изменять элементы в зависимости от их размера.

⏱Смотреть на YouTube ⏱15 минут

Чистый CSS или фреймворк

#почитать

Пару очевидных и не очень фактов:

• Flex - первый инструмент для работы с макетами, но имеет недостатки.
• Grid позволяет думать о макете в целом и заменяет множество элементов-контейнеров.
• Использование функций min, max и clamp упрощает изменение ширины элементов в адаптивных макетах.
• Aspect-ratio упрощает отображение адаптивных изображений и видео с определенным соотношением сторон.
• Определение пользовательских переменных упрощает использование одного и того же значения цвета в разных местах на странице.
• CSS предоставляет механизм управления состоянием, включая использование псевдокласса focus-within.
• Использование относительных единиц, таких как em и rem, вместо статических значений пикселей может быть более предпочтительным.
• Ориентирование на цвета HSL упрощает вычисление красивой цветовой палитры.

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

Основы и практика CSS Grid Layout

#почитать

Grid — это способ двумерной раскладки. Именно ДВУмерной, в отличии от Flexbox. Flexbox позволяет полноценно управлять элементами только по одной оси.

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

Советы по вёрстке от гика

#почитать


▪️почему декоративные элементы, сделанные с помощью чистого CSS могут не отобразиться в режиме повышенной контрастности Windows;

▪️чем можно заменить объявления свойства height со значением auto для изображений;

▪️какой есть нюанс при установке максимальной ширины у группы элементов;

▪️плавную прокрутку без неприятных ситуаций для пользователя;

▪️чего не хватает при использовании фоновых изображений.


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

Виды анимаций на верстке

#почитать

CSS Transition, CSS Animation, SVG animation, JS-Анимацию, JS canvas и JS. WebGL / ThreeJs.

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

Ограничение Contain

#почитать

Ограничение области применения стилей, компоновок и отрисовок.

⏱Читать
⏱Также новый подробный гайд DevNotes

▫️ Асинхронность и промисы

#посмотреть

Разбираемся с асинхронностью в JavaScript, изучаем промисы (Promise), async await и узнаем, как работает событийный цикл (Event Loop).

⏱Смотреть на YouTube ⏱25 минут

50 сайтов с бесплатными HTML/CSS/JS шаблонами

#почитать

Источники вдохновения, или творческого заимствования.

⏱Ознакомиться

Ускоряем сайт с помощью CSS

#почитать

Какие проблемы возникают с CSS:

CSS блокирует рендеринг: каждый @import останавливает другие загрузки, пока браузер загружает и анализирует требуемый файл CSS;

CSS влияет на рендеринг. Браузеры рендерят страницу в три этапа: (размер элементов), рисование (текст, цвета и т.д.) и позиционирование. Некоторые свойства CSS запускают все три фазы, что может сказаться на производительности;

Код CSS со временем может разрастаться. Выявление неиспользуемых стилей может быть сложной задачей, а их удаление может привести к хаосу, но разработчики выбирают лёгкий путь и добавляют больше свойств. Таблица стилей становится всё больше. Отсюда вывод: чем больше файл, тем дольше время загрузки и обработки.

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

▫️ Плавающие элементы и Clearfix

#посмотреть

Плавающие элементы и очистка потока (Floating Elements & Clearfix)

⏱Смотреть на YouTube ⏱10 минут

"Умные" макеты с контейнерными запросами

#почитать

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

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

Как работать с box shadows

#почитать

В инструментах наподобие Photoshop, Gimp, Figma и CSS есть множество разных реализаций фильтра отбрасываемой тени, каждая из которых обладает своим набором возможностей. Например, CSS поддерживает опциональное значение размытия, применяемого к отбрасываемой тени.

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

Ключи в JavaScript фреймворках и библиотеках

#почитать

"Ключи" в JavaScript фреймворках и библиотеках, зачем они используются и как помогают при работе с DOM.

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

Сократить HTML-код и писать только на CSS

#почитать

Вооружившись принципом DRY.

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

Изображения. Быстрый бесплатный курс для новых фронтендеров

#почитать

Курс от знакомства с элементом и до CDN-сетей доставки.

⏱Читать

25 передовых CSS-техник

#почитать

scroll-behavior: smooth и так далее

⏱Читать

Специфичность в CSS

#почитать

Специфичность в CSS определяет, как браузеры определяют важность, актуальность и «старшинство» стилей, то есть как разрешаются уонфликтующие стили.

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

Синус и косинус в веб-дизайне

#почитать

В CSS добавились новые стилевые тригонометрические функции, такие как sin(), cos(), tan() и др. В физике, математике и программировании, понятно, тригонометрические функции востребованы и нужны для различных вычислений. Но где их можно применять в веб-дизайне? В итоге появление всяких синусов и косинусов вызвало недоумение у многих веб-разработчиков.

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