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

#посмотреть

Разбираемся с асинхронностью в 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() и др. В физике, математике и программировании, понятно, тригонометрические функции востребованы и нужны для различных вычислений. Но где их можно применять в веб-дизайне? В итоге появление всяких синусов и косинусов вызвало недоумение у многих веб-разработчиков.

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

Кратко о методологиях объектно-ориентированного CSS: OOCSS, SMACSS, BEM и SASS

#почитать

Многие девелоперы, даже имея за плечами не один успешно выполненный коммерческий проект не оставляют поиски наилучшего способа организации стилей в макете. И большинство из них остановились на синтезе OOCSS, SMACSS, BEM и SASS. В этой статье мы не только поговорим о том, что из себя представляет правильный CSS.

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

Стилевая функция rgb()

#почитать

Цвет в виде шестнадцатеричного значения не всегда удобен для использования из-за сложности перевода десятичных чисел в шестнадцатеричные. В качестве альтернативы в CSS имеется стилевая функция rgb(), позволяющая задавать компоненты цвета в виде десятичных чисел.

Сама функция rgb() принимается в качестве значения стилевого свойства и позволяет установить цвет фона или текста с помощью цветовой модели RGB. В настоящий момент функция rgb() поддерживает два синтаксиса, несколько различающихся между собой: традиционный и современный.

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

Псевдокласс :has()

#почитать

В CSS не существует селектора родителя, позволяющего применить стиль к родителю при наличии у него указанного дочернего элемента. Роль такого селектора выполняет псевдокласс :has().

Псевдокласс :has() применяет стилевые правила к элементу, если у него есть указанный потомок или родственный элемент. Это даёт возможность задавать стили родителя на основе его дочерних элементов.

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

Комбинированные селекторы

#почитать

Иногда при написании стилей мы хотим обратиться к селектору более точно, чем просто по имени класса или тега. Для этого можно использовать различные комбинации.

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

Всё о селекторах в CSS: от основ до высшего пилотажа

#почитать

Быстрый гайд от МТС.

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