Макет для тренировки (Natitanic)
Лендинг - портфолио

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

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

Задача: Фиксация блока при скролле (CSS + HTML)

Представьте, что вам нужно создать страницу с фиксированной шапкой и основным контентом. Шапка должна оставаться видимой при прокрутке страницы.
Создайте HTML-структуру с блоками: header, main, и footer.
Напишите CSS, чтобы шапка оставалась на экране, а остальные блоки прокручивались.

Дополнительно:
Как сделать, чтобы шапка становилась полупрозрачной при скролле?

#домашка

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

Лучшие статьи @free_html_lessons:
1. Что такое PWA
2. Макет для тренировки (Natitanic)
3. Ссылки mailto: и tel:

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

Лучшие дизайн вакансии @job_webdesign:
1. Product дизайнер
2. Младший Web дизайнер
3. Web дизайнер

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

Что такое Progressive Enhancement и как его внедрить в проект?

Читать 👨‍💻

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

Красивый шаблон для портфолио

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

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

Что такое PostCSS и зачем он нужен?

Читать 👨‍💻

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

Основные методологии управления проектами: от Agile до Waterfall

Читать 👨‍💻

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

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

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

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

Задача на html и css: Grid и адаптив

Создайте сетку из трёх колонок, которая:
- На экранах шириной менее 768px становится одноколоночной.
- На экранах от 768px до 1200px отображается в две колонки.
- На экранах шире 1200px отображается в три колонки.

Подсказка: Используйте grid-template-columns и медиазапросы.

#домашка

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

Лучшие статьи @free_html_lessons:
1. Методологии управления проектами
2. PostCSS
3. Progressive Enhancement

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

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

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

Что такое Vite и как его настроить?

Читать 👨‍💻

#полезности

Атрибут disabled

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

Это булевый атрибут. Само его наличие говорит браузеру, что элемент нужно отключить.
Может применяться к следующим элементам формы:
button, input, option, select, textarea, optgroup, filedset

Атрибут disabled делает элемент неактивным: с ним нельзя взаимодействовать, кликнуть на него, на нём нельзя сфокусироваться, отключённое поле не будет отправлено вместе с остальными полями формы.
Атрибут срабатывает не только на самом элементе, но и на всех его потомках.

💡 Элемент с атрибутом disabled можно стилизовать при помощи псевдокласса :disabled. По умолчанию браузер делает их серыми и менее контрастными.

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

Функция debounce в JavaScript
При работе с событиями, такими как scroll или resize, часто возникает проблема частого вызова обработчика. Решение – использовать debounce, чтобы ограничить количество вызовов функции.

Пример функции debounce:

function debounce(func, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
}
window.addEventListener('resize', debounce(() => {
  console.log('Изменён размер окна');
}, 300));

Как работает debounce?
- Каждый раз, когда событие (например, resize) срабатывает, текущий таймер очищается с помощью clearTimeout.
- Новый таймер запускается на заданную задержку (delay).
- Если событие больше не срабатывает в течение времени задержки, переданная функция (func) вызывается с заданными аргументами (args).

Где использовать:
- Поиск с автоподсказками.
- Подгрузка контента при прокрутке.
- Оптимизация событий ввода.

#полезности

Cтартовый шаблон для верстки и js проектов на vite (scss, PostCSS)

Ссылка на github 👨‍💻

#полезности

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

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

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