👩‍💻 13 приемов CSS, которые изменят твой подход к верстке

13 продвинутых техник, которые редко встречаются в базовых туториалах, но активно используются в enterprise-разработке. Ты узнаешь, как избегать типичных ошибок и использовать современные возможности браузеров по максимуму.

Читать...

🤔 Каким образом HTML превращается в страницу?

1. Загрузка: Браузер загружает HTML-документ.
2. Парсинг: HTML разбивается на DOM (Document Object Model).
3. Стилизация: CSS применяется к элементам DOM.
4. Рендеринг: Браузер рендерит элементы на странице, создавая визуальное представление.

Ставь 👍 если знал ответ, 🔥 если нет

Забирай 📚 Базу Frontend книг

👩‍💻 Реализация кнопки с таймером блокировки

Создайте кнопку, которая становится недоступной (disabled) на 5 секунд после каждого нажатия. Отображайте обратный отсчёт времени на кнопке, чтобы пользователь видел, когда её можно будет нажать снова.

Ожидаемое поведение:

• При нажатии на кнопку она становится недоступной.
• На кнопке отображается обратный отсчёт времени: 5... 4... 3....
• Через 5 секунд кнопка снова становится активной и текст возвращается в исходное состояние.

Решение задачи🔽

<button id="timer-button">Нажми меня</button>


#timer-button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}

#timer-button:disabled {
background-color: #ccc;
cursor: not-allowed;
}


const button = document.getElementById('timer-button');

button.addEventListener('click', () => {
let countdown = 5;

// Деактивируем кнопку и запускаем таймер
button.disabled = true;
const interval = setInterval(() => {
button.textContent = `Ждите... ${countdown}`;
countdown--;

if (countdown < 0) {
clearInterval(interval);
button.disabled = false;
button.textContent = 'Нажми меня';
}
}, 1000);
});

🤔 Не кодь уставшим — всё равно переделаешь

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

👉 Совет: если чувствуешь, что мысли путаются, а ошибки валятся одна за другой — лучше сделай перерыв. 15 минут отдыха полезнее, чем 2 часа попыток «дожать» задачу в состоянии зомби.

🤔 Что сделать, чтобы setTimeout выполнился позже?

Для того чтобы setTimeout выполнялся позже, необходимо задать время задержки (в миллисекундах) в его втором аргументе.
Чем больше значение, тем позже будет выполнен переданный callback. Например, setTimeout(() => console.log('Hello'), 5000) выполнит код через 5 секунд.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу Frontend книг

📱 JavaScript. Напишите функцию pow(x, n), которая возвращает x в степени n (то есть умножает x на себя n раз и возвращает результат). Создайте страницу, которая запрашивает x и n, а затем выводит результат pow(x, n).

P.S. В этой задаче функция обязана поддерживать только натуральные значения n, т.е. целые числа от 1 и выше.

⏩ Ответ

📱 JavaScript. Что будет выведено в консоль?

Ответ

📱 JavaScript. Что будет выведено в консоль?

Ответ: 3. Приоритет оператора && выше, чем ||, поэтому он выполнится первым. Результат 2 && 3 = 3, поэтому выражение приобретает вид null || 3 || 4. Теперь результатом является первое истинное значение - 3.

📱 JavaScript. Что будет выведено в консоль?

Ответ