Вёрстка сайтов | HTML, CSS, JS

CSS Subgrid Долгое время у Grid Layout была одна проблема: дочерние элементы (внуки основного контейнера) не могли участвовать в сетке родителя. CSS Subgrid это исправил. В чем была проблема? Представьте карточки товаров. Внутри каждой есть заголовок, описание и кнопка. Если в одной карточке описание длиннее, оно растягивает карточку, но заголовки и кнопки в соседних карточках перестают идти «в одну линию». Как работает Subgrid? Теперь мы можем сказать дочернему элементу: «Используй сетку своего...

Создаем анимации с помощью JavaScript: Используем requestAnimationFrame() для плавного рендеринга Читать 👨‍💻 #js | #полезности

Анимации с помощью CSS Scroll Snap: Управляем прокруткой Читать 👨‍💻 #css | #полезности

Core Web Vitals Core Web Vitals – это метрики Google, которые определяют, насколько ваш сайт удобен для пользователя. Если показатели в «красной зоне», сайт будет падать в поисковой выдаче. Разберем «три кита» производительности: 1) LCP (Largest Contentful Paint) – Скорость загрузки основного контента. Что это: Время, за которое загружается самый большой элемент в видимой области (обычно это баннер или заголовок). Норма: до 2.5 секунд. 2) INP (Interaction to Next Paint) – Отзывчивость интерфейса...

Сжатие списка чисел в диапазоны Дан список целых чисел, повторяющихся элементов в списке нет. Напишите функцию compress(list), которая преобразует этот список в строку, сворачивая соседние по числовому ряду числа в диапазоны. Примеры: Input 1: [-10, -8, -7, -6] Output 1: "-10,-8--6" Input 2: [1, 4, 5, 2, 3, 9, 8, 11, 0] Output 2: "0-5,8-9,11" #домашка

Компонентный подход в CSS: Введение в BEM, OOCSS и Atomic Design Читать 👨‍💻 #css

Подборка лучших постов за прошлую неделю Лучшие статьи @free_html_lessons: 1. Эффективная работа с тенями и светом в CSS 2. CSS модули 3. CSS Subgrid Лучшие фронтенд вакансии @job_webdev: 1. javascript developer 2. Стажер Frontend-разработчик 3. HTML-верстальщик Лучшие дизайн вакансии @job_webdesign: 1. UX/UI Designer 2. Web-дизайнер 3. Младший дизайнер (Junior) #лучшеезанеделю

Макет для тренировки (konkritum) Перейти к макету 🧑‍💻 #практика | #макет

Кроссбраузерное тестирование: чек-лист и лучшие практики Читать 👨‍💻 #полезности

Подборка лучших постов за прошлую неделю Лучшие статьи @free_html_lessons: 1. Core Web Vitals 2. Компонентный подход в CSS 3. MyReadonly Лучшие фронтенд вакансии @job_webdev: 1. Next.js-разработчик 2. Frontend-разработчик (Angular) 3. HTML-верстальщик Лучшие дизайн вакансии @job_webdesign: 1. Дизайнер продуктовых интерфейсов 2. Web-дизайнер 3. UX/UI-дизайнер #лучшеезанеделю