✅ Делаем буллиты для списков

Чтобы создать кастомные буллиты для неупорядоченных списков, используйте псевдоэлемент :before и его свойство content. Чтобы изменять вид буллита в примере, применяются классы .complete и .incomplete ⤵️

<ul class="complete">
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
  <ul class="incomplete">
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>

ul { list-style: none; }
.complete li::before {
    content: '🗹 '; 
}
.incomplete li::before {
    content: '☐ '; 
}
ul {
    text-align: center;
    font-family: Candara;
    font-size: 1.7rem;
    margin: 0 auto;
}

@code_ready | #обучение #html #css

✅ Создание анимации кадрирования фото

У нас есть два отличных свойства: object-fit и object-position. С их помощью можно изменять размеры изображения, не влияя на соотношение его сторон.

В примере можно запустить этот эффект с помощью чекбокса: он привязан к псевдоклассу :checked. ⤵️

  <input type="checkbox"/> <br>
<img src="https://source.unsplash.com/random/1920x1080" alt="Random" />

input {
    transform: scale(4);
    display: block;
    margin: 30px auto;
  }
  img {
    display: block;
    margin: 0 auto;
    width: 1400px;
    height: 900px;
    transition: 2s;
  }
  input:checked + br + img {
    width: 500px;
    height: 400px;
    object-fit: cover;
    object-position: left-top;
    transition: width 2s, height 3s;
  }

@code_ready | #обучение #html #css

✅ Создание Favicon на сайт

Favicon — значок веб-страницы. Отображается браузером во вкладке перед названием страницы, и в качестве картинки рядом с закладкой.

Чтобы его добавить, нужно использовать тег <link> вместе с атрибутами:
1. rel — тип ресурса: со значением icon или shortcut icon
2. type — Тип передаваемых данных: допустим png, jpeg...
3. href — указывающий на путь к изображению.

Как первый пример, кидаю код для создания фавикона с картинкой "Gmail". Там я использую всё, о чем рассказывал выше:

<link rel="icon" type="png" href="https://cdn4.iconfinder.com/data/icons/logos-brands-in-colors/48/google-gmail-128.png">



@code_ready | #практика #html

✅ Создание таймера с помощью JS

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

<div id="timer">00:00:00</div>
<button onclick="startStopTimer()">Старт/Стоп</button>
<button button onclick="resetTimer()">Сброс</button>

let timer, s = 0, m = 0, h = 0, t = 0;
function startStopTimer() {
    if (t) {
        clearInterval(timer);
    } else {
        timer = setInterval(() => {
            t ? s++ : clearInterval(timer);
            updateTimer();
        }, 1000);
    } t ^= 1;}
function resetTimer() {
    clearInterval(timer);
    timer = undefined;
    s = m = h = 0;
    updateTimer();
    t = 0;}
function updateTimer() {
    const padZero = (value) => (value < 10 ? '0' : '') + value;
    document.getElementById('timer').innerText = `${padZero(h)}:${padZero(m)}:${padZero(s)}`;}

@code_ready | #html #css #js

✅ Тег <details>

Тег <details> определяет дополнительные детали, которые пользователь может отобразить или скрыть.
Виджет раскрытия обычно представлен на экране с использованием небольшого треугольника, который поворачивается, чтобы показать состояние открытия / закрытия.

Внутрь можно поместить тег <summary>, его используют для определения видимого заголовока для элемента <details>.

<details>
  <summary>Details</summary>
   Something small enough to escape casual notice.
</details>



@code_ready | #практика #html

✅ Тег <select>

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

У него есть множество атрибутов и функций, кому интересно, я оставлю ссылку на документацию про этот тег)

<select name="select">
  <option value="value1">Значение 1</option>
  <option value="value2">Значение 2</option>
  <option value="value3">Значение 3</option>
</select>



@cod0e_ready | #практика #html

✅ Тег <optgroup>

Тег <optgroup> в HTML используется внутри тега <select> для группировки пунктов списка выбора. Он позволяет создавать подгруппы или категории для удобства пользователя. Внутри тега <optgroup> вы можете размещать один или несколько тегов <option>, представляющих отдельные пункты выбора.

<select>
  <optgroup label="Fruits">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
  </optgroup>
  <optgroup label="Vegetales">
    <option value="carrot">Carrot</option>
    <option value="potato" disabled>Potato</option>
  </optgroup>
</select>



@code_ready | #практика #html

✅ Тег <q>

Тег <q> в HTML используется для обозначения коротких цитат в тексте. Браузеры обычно отображают содержимое этого тега в кавычках, что помогает пользователю легко определить цитату в контексте текста.

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

@code_ready | #практика #html

✅ Размещение по центру с помощью html

Тег <center> помогает расположить любой вложенный в него контент по центру страницы, без помощи CSS

@code_ready | #обучение #html