Вёрстка сайтов | HTML, CSS, JS
4.87K subscribers
613 photos
1 video
4 files
1.04K links
👋 Привет, друг!

В этом канале я выкладываю структурированные, обучающие уроки и материалы по вёрстке сайтов и фронтенду.
Присоединяйся и начинай учиться!

Связь: @Tigran1963
Download Telegram
CSS Вопрос:

Какое свойство определяет область позиционирования элемента, в которой будет показано его содержимое?
Anonymous Quiz
55%
position
17%
overflow
12%
z-index
10%
clip
6%
Посмотреть ответы
Функция мемоизации

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

function memoize(fn) {
// Твой код здесь
}

const slowFunction = (n) => {
console.log("Вычисляю...");
return n * n;
};

const memoizedFunction = memoize(slowFunction);

console.log(memoizedFunction(5)); // "Вычисляю..." 25
console.log(memoizedFunction(5)); // 25 (без вычислений)


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

Лучшие статьи @free_html_lessons:
1. Grid with corner item
2. CSS св-во contain
3. Тег time

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

Лучшие дизайн вакансии @job_webdesign:
1. Web-дизайнер
2. Продуктовый дизайнер
3. UX/UI дизайнер

#лучшеезанеделю
Цветные шрифты
На Google Fonts выходит партия цветных шрифтов.

Среди них иконочные по типу эмоджи (https://fonts.google.com/noto/specimen/Noto+Color+Emoji), несколько поддерживающих латиницу (https://fonts.google.com/specimen/Bungee+Spice
https://fonts.google.com/specimen/Nabla ) и ряд из них - арабские алфавиты.

COLRv1 являются векторными, что, конечно, позволяет масштабировать без пикселизации изображения.

Среди особенностей: возможности изменения цветовых схем шрифта, добавление градиента и изменение ширины / высоты / толщины букв.

Источник: https://material.io/blog/color-fonts-are-here

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

Лучшие статьи @free_html_lessons:
1. Валидаторы
2. Цветные шрифты
3. Timeline на jquery

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

Лучшие дизайн вакансии @job_webdesign:
1. Графический дизайнер
2. UX/UI дизайнер

#лучшеезанеделю
Почему rem лучше, чем px в 2025 году?

Когда вы задаёте размеры в px, вы игнорируете предпочтения пользователя — например, масштаб текста в настройках браузера.
А вот rem (root em) — это единица, зависящая от базового размера шрифта (html { font-size: 16px } по умолчанию).

Пример:
.button {
padding: 1rem 2rem;
font-size: 1.25rem;
}

Преимущества rem:
— Легко масштабировать весь интерфейс
— Лучше для доступности
— Удобно поддерживать консистентность

👉 Используйте rem для отступов, размеров шрифта и элементов. А px — разве что для границ и теней.

#полезности
Какая единица соответствует 1% ширины окна браузера?
Anonymous Quiz
15%
em
10%
rem
59%
vw
11%
vh
5%
Посмотреть ответы