👩‍💻 Свойство scroll-snap-align

Используется для управления поведением привязки прокрутки. Оно определяет, как элемент внутри контейнера прокрутки будет выравниваться после завершения прокрутки, создавая эффект привязки к заданным точкам.

Его основные параметры:

• start — элемент выравнивается по началу области прокрутки.
• center — выравнивается по центру области прокрутки.
• end — выравнивается по концу области прокрутки.
• none — отключает эффект привязки.

📣 Code Ready | #свойство

👩‍💻 Ускорь написание своего кода

А ты знал про Codeium? — это мощное расширение для VS Code, которое помогает быстрее писать код. Оно предлагает интеллектуальные подсказки и автозаполнение, основанные на AI. Также плагин поддерживается многими языками программирования.

📣 Code Ready | #плагин

Интересный ресурс для фронтендеров — Web Reference

Это отличная платформа с множеством туториалов, здесь собраны небольшие статьи для разных уровней, вы можете закрепить новые знания, решив задачу, которая прикрепляется к статьи.

📌 Ссылочка: webref.ru

📣 Code Ready | #ресурсы

Знали про такую интересую фичу Vs Code?

У каждого было такое, что хочется просто сосредоточатся на код, но разные фигни тебя отвлекают 🙄

Попробуй включить Zen Mode, а точнее режим Дзен. Он оставляет для вас исключительно область кода, чтобы вы могли сконцентрироваться на коде.

Чтобы включить — нажмите Ctrl+Shift+P и введите zen. Пробуйте 🤩

📣 Code Ready | #vscode

Основы взаимодействия HTML и JavaScript
#новичкам

Если хотите добавить интерактивности и оживить свою HTML-страницу, JavaScript — ваш лучший друг.

Сегодня поговорим про базовые моменты, которые нужно знать каждому фронтенд-разработчику.

1. Как получить элементы через DOM — с помощью JS можно найти любой элемент на странице и изменить его. Например, давайте поменяем текст заголовка:

const heading = document.getElementById('title');

// Изменяем текст заголовка
heading.textContent = 'Новый заголовок'; 

2. Как реагировать на действия пользователя с помощью addEventListener — добавить событие на кнопку — дело двух строк. Смотри, как это делается:

const button = document.querySelector('button');

// Реагируем на клик
button.addEventListener('click', () => alert('Кнопка нажата!')); 

3. Динамическое создание элементов — JS позволяет добавлять элементы в DOM на лету. Всё работает динамически: элемент создаётся, наполняется текстом и сразу появляется на странице:

const list = document.querySelector('ul');
const newItem = document.createElement('li');

newItem.textContent = 'Новый пункт';
 // Добавляем пункт в список
list.appendChild(newItem);

🔥 Эти приёмы — основа для работы с JavaScript. Учитесь управлять DOM и создавать динамичный контент)

📣 Code Ready | #техсобес

👩‍💻 Знали про Html атрибут onblur?

Он используется для обработки события потери фокуса элементом. Как например — полем ввода.

Когда элемент теряет фокус (типа пользователь щелкает вне поля ввода), то срабатывает событие blur, и можно выполнить определённые действия, такие как валидация данных или изменение стиля элемента.

📣 Code Ready | #атрибут

🔥 Нашел вам сайт, где можно творить крутые анимации — Amnista

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

📌 Ссылочка: animista.net

📣 Code Ready | #ресурсы

👩‍💻 Полезные горячие клавиши VSCode

• Shift + Del — удаляет строку целиком. Не нужно будет выделять мышкой всю строку и потом нажимать Backspace.

• Ctrl + L — выделяет всю строку целиком. Теперь копипастить еще проще.

• Ctrl + / — Закомментирует или раскомментирует текущую строку.

📣 Code Ready | #клавиши

🙄 Знал ли ты, как можно добавить целое видео в любой текст на CSS?

Главное, о чем нужно знать — это свойство background-clip: text, которое заставляет фоновое изображение заполнять только сам текст, а не весь блок.

.clip-text {
  background: url (http://i.giphy.com/fsULJFFGv8X3G.gif);
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  color: transparent;
}

Из-за этого текст становится "покрашенным" в изображение, а сам цвет текста устанавливается как прозрачный (color: transparent), что позволяет увидеть только фон внутри текста.

▶️ Ещё кому интересно, оставлю ссылку на готовый код

📣 Code Ready | #css

Порекомендую вам, что из интересного можно добавить на свой сайт.
#средничкам

Добавление интерактивных элементов — отличный способ оживить вашу веб-страницу. Сегодня мы создадим таймер обратного отсчета, который начнет работать при нажатии на кнопку.

HTML-разметка будет простой: блок для отображения времени и кнопка для запуска таймера.

<div id="countdown">10</div>
<button id="start-timer">Старт</button>

Добавим немного стилей, чтобы таймер выглядел аккуратно:

#countdown {
  font-size: 2em;
  text-align: center;
  margin: 20px;
}
button {
  display: block;
  margin: 10px auto;
}

Теперь переходим к JavaScript. Вначале получим элементы страницы, которые будут участвовать в работе таймера:

const countdownEl = document.getElementById('countdown');
const startButton = document.getElementById('start-timer');

Далее реализуем сам таймер. Он будет уменьшать число каждую секунду:

startButton.onclick = () => {
  let time = parseInt(countdownEl.textContent);
  const timer = setInterval(() => {
    time--;
    countdownEl.textContent = time;
    if (time <= 0) clearInterval(timer); // Остановка таймера при достижении нуля
  }, 1000);
};

🔥 Теперь, когда вы нажмете кнопку Старт, таймер начнет обратный отсчет с 10 до 0, а затем остановится. Такой простой механизм может использоваться для создания счетчиков или отображения времени на вашей странице!

📣 Code Ready | #практика