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

Как получить оффер, лежа на пляже? История Маши — frontend-разработчицы с 6 месяцами опыта. 2 месяца она искала работу сама: читала вакансии, сравнивала требования, откликалась вручную. Потом подключила ИИ-ассистента Софи… и уехала в отпуск. Пока Маша отдыхала, Софи сделала 200 откликов. Результат: • 15 интервью • 7 тестовых • оффер Самое неожиданное — зарплата почти в 2 раза выше, чем была указана в резюме. Доступ в Софи открывается уже 24 марта. Будет 3 дня бесплатного теста. Подпишись, чтобы не пропустить.

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

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. #полезности

Бесплатная конференция по PostgreSQL — уже 19 марта! Регистрируйся на бесплатную конференцию по PostgreSQL — 19.03.2026. В фокусе — практический опыт эксплуатации PostgreSQL, ее внутреннее устройство, производительность, взаимодействие с другими системами и реальные кейсы из highload-среды. Мероприятие в формате онлайн+офлайн, 25+ тематических докладов, 3 потока. Вот некоторые темы конференции: ✅ Опыт выноса OLAP-нагрузки на реплику ✅ Временные таблицы в PostgreSQL: почему это критично для платформы 1С и что можно улучшить ✅ Разделение Compute и Storage: архитектурный прорыв для PostgreSQL в облаке ✅ Highload «из ниоткуда»: когда узкое место — не в СУБД, а в клиентской архитектуре ✅ Работа с логами PostgreSQL Регистрируйся, будет интересно! И бесплатно! Зарегистрироваться #реклама 16+ pgbootcamp.ru О рекламодателе

Подборка лучших постов за прошлую неделю Лучшие статьи @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) #лучшеезанеделю

Подборка лучших постов за прошлую неделю Лучшие статьи @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. Тени — это не просто эффект для создания объема, но и мощный инструмент для улучшения восприятия дизайна. В этом посте мы обсудим, как правильно использовать тени и световые эффекты, чтобы интерфейсы выглядели профессионально и стильно. Зачем нужны тени в интерфейсе? Тени помогают: 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;
   }
   {}
    

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