Задача на 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)

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

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

Задача: Оптимизация изображения в вебе

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

Вопросы:
- Какие форматы изображения лучше использовать для веба?
- Какое HTML-свойство можно использовать для подгрузки изображений только при их появлении в зоне видимости?

#домашка

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

Лучшие статьи @free_html_lessons:
1. Cтартовый шаблон
2. Функция debounce
3. Что такое Vite

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

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

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

Атрибут rel="noreferrer"

Читать 👨‍💻

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

Мета теги Apple

Они помогают улучшить отображение сайта в браузере Safari, настройку работы с веб-приложениями и взаимодействие с устройствами на iOS.

Основные мета-теги Apple
1. Добавление сайта на главный экран (Web App Mode)
Чтобы пользователи могли добавлять сайт на главный экран с интерфейсом как у приложения:
<meta name="apple-mobile-web-app-capable" content="yes">
Этот тег активирует полноэкранный режим веб-приложения, исключая элементы браузера (например, адресную строку).
2. Установка цветовой темы статус-бара
Можно задать цвет статус-бара для веб-приложения:
<meta name="apple-mobile-web-app-status-bar-style" content="default">
Значения:
• default — стандартный вид статус-бара (белый текст на чёрном фоне).
• black — чёрный фон статус-бара.
• black-translucent — полупрозрачный чёрный статус-бар.

3. Иконка приложения для главного экрана
Чтобы настроить иконку для сайта, добавляем:
<link rel="apple-touch-icon" href="icon.png">
Можно указать несколько иконок разных размеров:
<link rel="apple-touch-icon" sizes="180x180" href="icon-180.png">
<link rel="apple-touch-icon" sizes="152x152" href="icon-152.png">
<link rel="apple-touch-icon" sizes="120x120" href="icon-120.png">

4. Тег для сплэш-экрана при загрузке веб-приложения
Чтобы пользователь видел загрузочный экран, пока приложение открывается:
<link rel="apple-touch-startup-image" href="splash.png">

5. Запрет автоматического масштабирования
Чтобы отключить автоматическое изменение масштаба страницы, можно использовать:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

6. Оптимизация заголовков и переходов
Тег для более плавного отображения шрифтов и стиля текста:
<meta name="format-detection" content="telephone=no">

Этот тег предотвращает автоматическое преобразование телефонных номеров в ссылки.

Зачем использовать мета-теги Apple?
• Улучшение пользовательского опыта для владельцев iOS-устройств.
• Добавление сайта на главный экран с функциональностью, схожей с нативным приложением.
• Брендирование сайта с помощью иконок и кастомного интерфейса.


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

Как общаться с заказчиками на фрилансе?

1. Правильно составляйте отклик: приводите примеры работ по теме заказчика и описывайте релевантный опыт. 2. Указывайте сроки, размер и форму оплаты. Если не соответствуете каким-либо требованиям из вакансии, говорите об этом и предлагайте альтернативы.
3. Обсуждайте задачу до старта. Спрашивайте о целях, ожиданиях, способах оценки. Выясните, кто будет согласовывать вашу работу.
4. Заключайте договор. Прописывайте задачи, сроки, цены, порядок приема и оплаты.
5. Оговаривайте ход работы, чтобы не допускать конфликтов. Указывайте, когда вы на связи, сколько правок внесете бесплатно. Отвечаете ли за результат, если вдруг клиент решит исправить вашу работу.
6. Задавайте вопросы. Добивайтесь полного понимания задачи, чтобы не переделывать всё в итоге.
7. Структурируйте мысли. Упрощайте восприятие информации: используйте абзацы, списки, выделяйте главное. Объясняйте решения и ищите компромиссы. Аргументируйте точку зрения фактами, приводите примеры.
8. Думайте не о том, как отстоять свое мнение, а как решить проблему клиента.
9. Не записывайте голосовые. Когда они необходимы, обозначайте их тему. Излагайте мысль коротко и в одном сообщении.
10. Предупреждайте о срывах сроков. Вероятно, вы потеряете клиента, но разойдетесь мирно.
11. Отказывайтесь от задачи, когда заказчик хамит, постоянно нарушает договоренности. Не слышит и не идет на компромиссы, обесценивает.

#фриланс | #полезности

Макет для тренировок (грузовые перевозки)
Не для новичков

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

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

JS Задача: Палиндромная сумма

Описание: Напишите функцию на JavaScript, которая принимает на вход два числа и возвращает сумму всех палиндромных чисел в диапазоне между этими двуми числами (включая их самих, если они палиндромы).

#домашка

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

Лучшие статьи @free_html_lessons:
1. Как общаться с заказчиками на фрилансе?
2. Доступность. Aria label
3. Атрибут rel="noreferrer"

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

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

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