👩‍💻 Полезные горячие клавиши 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 | #практика

👩‍💻 Обязательные поля для заполнения

Псевдокласс :required в CSS используется для стилизации элементов формы, которые имеют атрибут required.

Это означает, что элемент должен быть заполнен перед отправкой формы.

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

👩‍💻 Фишка для корпоративных разработок

Если вы уже владеете системой управления версиями, то вам будет полезно знать🙄

Режим отслеживания изменений между версиями позволяет удобно посмотреть как изменялся код

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

📣 Code Ready | #vscode

Grid Garden — игра, которая учит основам CSS Grid, позволяя управлять растениями в саду, используя свойства для прохождения уровней.

📌 Ссылочка: cssgridgarden.com

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