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

Core Web Vitals

Core Web Vitals – это метрики Google, которые определяют, насколько ваш сайт удобен для пользователя. Если показатели в «красной зоне», сайт будет падать в поисковой выдаче.

Разберем «три кита» производительности:

1) LCP (Largest Contentful Paint) – Скорость загрузки основного контента.
Что это: Время, за которое загружается самый большой элемент в видимой области (обычно это баннер или заголовок).
Норма: до 2.5 секунд.

2) INP (Interaction to Next Paint) – Отзывчивость интерфейса.
Что это: С марта 2024 года заменила FID. Измеряет задержку после клика или нажатия клавиши до момента, когда браузер смог отрисовать следующий кадр.
Норма: до 200 миллисекунд.

3) CLS (Cumulative Layout Shift) – Стабильность верстки.
Что это: Бывало, что вы хотите нажать на кнопку, но в этот момент сверху загружается картинка и кнопка «улетает» вниз? Это и есть CLS.
Норма: индекс менее 0.1.

Как проверить?
Просто введите URL своего сайта в PageSpeed Insights или проверьте вкладку Lighthouse в DevTools.

#полезности

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

Лучшие статьи @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)

#лучшеезанеделю

Сжатие списка чисел в диапазоны

Дан список целых чисел, повторяющихся элементов в списке нет.
Напишите функцию 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"

#домашка

Макет для тренировки (konkritum)

Перейти к макету 🧑‍💻

#практика | #макет

CSS Subgrid

Долгое время у Grid Layout была одна проблема: дочерние элементы (внуки основного контейнера) не могли участвовать в сетке родителя. CSS Subgrid это исправил.

В чем была проблема?
Представьте карточки товаров. Внутри каждой есть заголовок, описание и кнопка. Если в одной карточке описание длиннее, оно растягивает карточку, но заголовки и кнопки в соседних карточках перестают идти «в одну линию».

Как работает Subgrid?
Теперь мы можем сказать дочернему элементу: «Используй сетку своего родителя».

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.card {
  display: grid;
  grid-template-rows: subgrid; /* Магия здесь! */
  grid-row: span 3; /* Карточка занимает 3 строки родительской сетки */
}

Почему это круто?

Идеальное выравнивание: Все заголовки, тексты и футеры во всех карточках всегда будут на одном уровне.

Меньше кода: Вам не нужно подбирать фиксированную высоту или использовать сложные хаки.

Гибкость: Сетка становится по-настоящему целостной.

Поддержка: На сегодняшний день Subgrid поддерживается всеми современными браузерами (Chrome 117+, Firefox, Safari).

#css

CSS модули

Читать 👨‍💻

#css | #полезности

Найдите ошибку в верстке

Перед вами фрагмент кода. На первый взгляд он кажется рабочим, но в нем допущена серьезная логическая ошибка с точки зрения спецификации HTML.

<nav>
  <a href="/">Главная</a>
  <a href="/about">О нас</a>
  <span>
    <h3>Наши услуги</h3>
    <p>Мы предлагаем лучший сервис в городе.</p>
  </span>
</nav>

Правильный ответ: Внутри строчного элемента <span> нельзя размещать блочные элементы <h3> и <p>. По правилам вложенности, строчные элементы могут содержать только другие строчные элементы или текст. Нарушение этой логики может привести к непредсказуемому поведению стилей и проблемам с SEO

#практика

Эффективная работа с тенями и светом в CSS: Добавляем глубину и реалистичность интерфейсу

Привет! Сегодня мы поговорим о том, как можно добавить глубину и реалистичность вашим веб-интерфейсам с помощью теней и света в CSS. Тени — это не просто эффект для создания объема, но и мощный инструмент для улучшения восприятия дизайна. В этом посте мы обсудим, как правильно использовать тени и световые эффекты, чтобы интерфейсы выглядели профессионально и стильно.

Зачем нужны тени в интерфейсе?
Тени помогают:
1. Создавать объем — Тени могут выделять элементы на странице, делая их визуально "поднятыми" над фоном.
2. Улучшать читаемость — Легкие тени на текстах помогают улучшить контраст и восприятие.
3. Добавлять акценты — С помощью теней можно выделить важные кнопки или элементы интерфейса.

Основные CSS-свойства для работы с тенями
1. `box-shadow` — для добавления тени вокруг элементов.
Пример простого использования:

   .box {
       box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.3);
   }
   

2. `text-shadow` — для добавления теней к тексту.
Пример применения к заголовкам:

   h1 {
       text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
   }
   

Как создать реалистичные тени?

1. Мягкость и прозрачность
Тени не должны быть слишком резкими или плотными. Используйте мягкие градиенты и полупрозрачные цвета для более естественного эффекта. Например, вместо черного цвета, используйте что-то вроде rgba(0, 0, 0, 0.2).

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

   .box {
       box-shadow: 
           2px 2px 5px rgba(0, 0, 0, 0.2),
           5px 5px 10px rgba(0, 0, 0, 0.1);
   }
   

3. Правильное направление света
Выберите одно основное направление "света" для всего интерфейса. Например, если свет падает сверху слева, тени должны быть направлены вниз вправо. Это создаст гармонию и реалистичность интерфейса.

Работа со светом: Как добавить "сияние" элементам

1. Использование градиентов
Градиенты могут имитировать свет, падающий на элементы. Например, вертикальный градиент может сделать объект выглядящим более объемным:

   .button {
       background: linear-gradient(to bottom, #fff, #e0e0e0);
   }
   

2. Сияние с помощью `filter`
Используйте свойство filter: drop-shadow() для создания более сложных световых и теневых эффектов:

   .box {
       filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.4));
   }
   

3. Эффект "внутреннего света"
С помощью box-shadow можно создать эффект внутреннего свечения:

   .element {
       box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5);
   }
   

Советы для создания идеальных теней и света

- Контраст: Тени должны быть достаточно заметными, чтобы выделять элементы, но не чрезмерными.
- Цвет тени: Избегайте черных теней. Используйте цвет, который слегка отличается от основного фона.
- Анимация: Используйте плавные переходы для появления и исчезновения теней, чтобы интерфейс казался более "живым":

   .box {
       transition: box-shadow 0.3s ease;
   }
   

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

#какэтосделать

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

Лучшие статьи @free_html_lessons:
1. Полезные js библиотеки
2. Анимация `height: auto` без JS через `display: grid`
3. Макет для тренировки (stroymonolit)

Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик
2. Frontend developer
3. Frontend-разработчик (Vue 3 + ts)

Лучшие дизайн вакансии @job_webdesign:
1. UX/UI Designer
2. Junior веб-дизайнер
3. Product Designer

#лучшеезанеделю

Задача на html и css: Создание Кнопки "Подписаться"

Читать 👨‍💻

#домашка

Макет для тренировки (stroymonolit)

Перейти к макету 🧑‍💻

#практика | #макет

AR в браузере: Использование WebXR API для создания дополненной реальности на веб-сайтах

Читать 👨‍💻

#полезнаястатья

Анимация `height: auto` без JS через `display: grid`

Ограничение CSS: height: auto не анимируется.
Поэтому при создании аккордеонов, FAQ или раскрывающихся блоков часто используют:

• max-height с большим значением
• вычисление scrollHeight через JS
• transform: scaleY

Есть более аккуратный способ — через display: grid.

Идея в том, что grid-template-rows можно анимировать.

Пример:
HTML:

<button class="btn">Открыть</button>
<div class="wrapper">
  <div class="content">
    Контент любой высоты
  </div>
</div>

CSS:

.wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.wrapper.open {
  grid-template-rows: 1fr;
}
.content {
  overflow: hidden;
}

JS:

document.querySelector('.btn').onclick = () => {
  document.querySelector('.wrapper').classList.toggle('open')
}

Как это работает:
0fr — строка не занимает пространство
1fr — строка занимает доступное пространство

Grid перераспределяет высоту строки, и это изменение можно плавно анимировать.

Преимущества:
• не нужно вычислять высоту
• нет искусственных ограничений по max-height
• корректно работает с динамическим контентом
• минимальный JS

Подходит для:
• аккордеонов
• раскрывающихся карточек
• меню
• блоков с дополнительной информацией

#практика

Полезные js библиотеки

Читать 👨‍💻

#js | #полезности

Favicon для сайта

Читать 👨‍💻

#полезности

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

Лучшие статьи @free_html_lessons:
1. Анимации с помощью Lottie и Bodymovin
2. Куки в JavaScript
3. Веб приложение для рисования на Vue.js

Лучшие фронтенд вакансии @job_webdev:
1. Верстальщик HTML/CSS
2. Разработчик JavaScript/NodeJS
3. Junior верстальщик

Лучшие дизайн вакансии @job_webdesign:
1. UX/UI Designer
2. web designer
3. product designer

#лучшеезанеделю

Сумма всех значений в дереве

Напишите функцию getTreeVal(obj), которая принимает объект, представляющий дерево, и возвращает сумму всех значений в поле value. Условия:
Объект имеет следующую структуру:
- value: число
- children: массив дочерних узлов, каждый из которых имеет такую же структуру
- Если дочерние узлы отсутствуют, узел содержит только поле value.

Примеры:

Input: { value: -5, children: [ { value: -10, children: [ { value: -15 } ] } ] }
Result: -30

#домашка

Макет для тренировки (calidad)

Перейти к макету 🧑‍💻

#практика | #макет

Веб приложение для рисования на Vue.js

Смотреть на codepen👨‍💻

#практика