✅ Как добавить Фавикон на сайт?

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

Вот вам уже готовый код с изображением Email -

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

#практика #html

✅ Как создать разные типы input?

Не все знают что в input есть много разных типов, таких как color, url, email и так далее. Для форм это очень важно, видь если пользователь хочет написать свой пароль скрытно, для этого поможет тип password.

Вот вам уже готовые типы и описание к ним:

<input type="password"> - поможет для написания скрытного пароля

<input type="color"> - делает цветовую гамму прямо на сайт

<input type="radio"> - поможет сделать значок выбора

<input type="file"> - поможет добавить любой файл на сайт

<input type="date"> - поможет написать вам любую дату

<input type="checkbox"> - поможет выбрать вариант с помощью галочки

<input type="range"> - делает ползунок громкости

#практика #html

✅ Как создать интерактивную карту?

Google map - это источник где каждый может посмотреть любую локацию, но не все знают что как раз там и можно сделать крутую карту себе на сайт.
Важно чтобы клиент мог легко найти вас, для этого на сайте размещаются интерактивные карты.

Вот вам уже готовый код с геолокацией "Испания":

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6250603.052559542!2d-8.999772137372801!3d40.09654749159853!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xc42e3783261bc8b%3A0xa6ec2c940768a3ec!2z0JjRgdC_0LDQvdC40Y8!5e0!3m2!1sru!2ses!4v1693061771512!5m2!1sru!2ses" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

#практика #html

✅ Что такое Udemy?

Каждый думаю хотел проходить курсы программирования по минимальной цене, у меня как раз есть такая возможность.
Udemy - онлайн сайт где можно приобрести любой курс на любую тему за 10-15 евро. Каждую неделю там проходят скидки до 85%. Это ваш шанс научиться создавать сайты, игры, дизайн и многое другое.

Вот ссылка на Udemy:

https://www.udemy.com/

#теория

✅ Как создать селектор выбора?

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

Вот вам пример готового кода:

<select name="selector" id="selector" multiple size="4">
<option disabled>-----</option>
<option selected>BMW</option>
<option>Mercedes</option>
<option selected>Audi</option>
</select>

#практика #html

✅ Тег <q>

Для цитат или коротких фраз в HTML есть отдельный тег <q>, он выделяет текст специальным символом.

Используйте тег <q> если вы хотите вставить цитату, прямую речь, отсылок, название предприятий или литературных произведений.

#теория #html

✅ Как привлечь внимание к тексту за пару кликов?

Первое на что смотрит пользователь - это текст. Если ваш заголовок красивый, яркий и тем более с градиентом пользователь обязательно на него посмотрит.

Мы сделали вариант градиента в CSS. В этом коде вы можете поменять цвета и стили под себя:

font-size: 25px;
font-weight: 600;
background-image: linear-gradient(to bottom, #d429c3, #ff4331, #f49d5d);
color: transparent;
background-clip: text;
-webkit-background-clip: text;

#обучение #css

✅ Как создать псевдокласс: hover?

Если вы хотите сделать красивое оформление с простой анимацией, в этом поможет это свойство. ⬇️

Hover - самый важный и нужный псевдокласс в css для создания быстрых анимированных действий, срабатывает когда пользователь наводит на элемент мышью.

Вот уже готовый код для любой кнопки: ↙️

.btn:hover{
    transition: all 0.6s linear;
    background-color: #fff;
    color: #000;
}

#обучение #css

✅ Как сделать обводку для текста?

Лучший вариант сделать текст более выразительным и оригинальным это добавить ему обводку.
В этом сможет помочь свойство -webkit-text-stroke. ⤵️

Стилевое свойство text-stroke одновременно устанавливает цвет и толщину контура вокруг букв и символов текста, используется вместе с движком -WebKit

Вот готовый пример кода: ⬇️

text-transform: uppercase;
-webkit-text-stroke: 1px #000000;
color: rgb(243, 169, 119);
font-family: 'DM Sans', sans-serif;
font-size: 2.2rem;
font-weight: 600;

#обучение #css

✅ Атрибут title

Чтобы создать готовую подсказку для пользователя при наведении на текст, в html есть уже готовый атрибут title. Вид такой подсказки зависит от браузера, настроек операционной системы и не может быть изменен с помощью HTML-кода или стилей.

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

Вот готовый пример кода: ⤵️

<div title="TITLE">Clue</div>

#теория #html

✅ Как создать тень для текстов?

Еще один способ украсить веб-страницу – сделать текст с тенью в CSS. При грамотном применении данного стиля можно удачно выделить заголовок, абзац, часть текста.

Тени придают объем дизайну и сейчас это пользуется большой популярностью. Задать в CSS тень текста можно с помощью свойства text-shadow.

Ниже показан пример записи кода ⤵️

text-shadow: rgb(0, 153, 255) -3px -1px 4px;
color: #fff;
-webkit-text-stroke: 0.1px #000;
font-family: 'M PLUS 1p', sans-serif;

#обучение #css

✅ Тег <details>

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

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

Вот интерактивный пример: ⤵️

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

#практика #html

✅ Свойство filter: invert()

Функция invert() инвертирует цвета в изображении. По своему действию похоже на превращение фотографии в негатив. ⬇️

Принимает значение от 0% до 100%.
0% (0) - значение по умолчанию (исходное изображение).
100% (1) - изображение полностью инвертировано.

Готовый пример кода: ⤵️

img {
filter: invert(70%);
border-radius: 4px;
}

#обучение #css

✅ Z-index

Z-Index является важным свойством CSS. Оно указывает на уровень элемента в стеке. Это свойство регулирует вертикальный порядок перекрытия элементов. ⬇️

Оно используется для стабилизации порядка элементов, которые перекрываются.
В качестве значения используются целые числа. Чем больше значение, тем выше находится элемент.

#теория #css

✅ Свойство transform (scale)

Метод scale() увеличивает или уменьшает размер элемента (в соответствии с заданными параметрами ширины и высоты).
Может принимать один или два параметра, перечисляемых через запятую. ⬇️

Если параметров два - первый параметр задает масштабирование по горизонтали, а второй - по вертикали. Если параметр один то он задает масштабирование по горизонтали и вертикали одновременно.

Вот готовый код с увеличением квадрата ⤵️

:hover {
  transform: scale(1.5, 1.7);
  transition: 0.7s;
  cursor: pointer;
}

#обучение #css

✅ Как создать неоновый текст?

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

Что полезно в text-shadow, так это то, что мы можем применить к нему несколько теней, просто разделив их запятыми.

Готовый код для неонового текста: ⤵️

text-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 40px #b303f8, 0 0 80px #b303f8, 0 0 90px #b303f8, 0 0 100px #b303f8, 0 0 150px #b303f8;

#практика #css

✅ Тег <meta>

<meta> определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем, содержит метаданные о документе HTML. ⬇️

Мета-элементы обычно используются для указания описания страницы, ключевых слов, автора документа, последнего изменения и других метаданных. Все они размещаются в контейнере <head>

Важные атрибуты: ⤵️

charset - Задает кодировку документа
content - Устанавливает значение атрибута
http-equiv - Предназначен для конвертирования метатега в заголовок HTTP.
name - Имя метатега

#теория #html

✅ Как добавить loading button на сайт?

Кнопки загрузки можно создать не используя JavaScript. В мире Web разработки есть очень крутая библиотека иконок - Font Awesome, она идет сразу с анимацией и очень облегчает работу. ⬇️

Чтобы добавить эту библиотеку на сайт, достаточно просто подключить готовый код -

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Теперь осталось добавить иконки через тег i (на сайте Font Awesome вы найдете много разных вариантов) ⤵️

Loading 1 - <i class="fa fa-spinner fa-spin">Loading

Loading 2 - <i class="fa fa-refresh fa-spin">Loading

#практика #html #css

✅ Свойство filter: blur()

☑️ Функция blur() устанавливает размытие элемента, словно он находится не в фокусе.  ⬇️

В качестве значения указывается радиус размытия, он пишется в любых доступных единицах размера CSS. Чем больше значение, тем сильнее будет размыто изображение

Готовый код: ⤵️

img {
  filter: blur(10px);
  border-radius: 0.4rem;
}

#обучение #css

✅ Теги <sub> и <sup>

Тег <sub> используется для определения текста с нижним индексом. Сдвигает текст ниже базовой линии, уменьшая его размер.
Тег <sup> отображает текст в виде степени (в виде верхнего индекса). Сдвигает текст ниже базовой линии, уменьшая его размер. ⬇️

☑️ Эти теги чаще используются для выделения отдельных символов, а не слов. Их используют для указания единиц измерения или написания простых формул.
Для создания более сложных формул, теги <sup> и <sub> можно использовать внутри друг друга. ⤵️

<p>H<sub>2</sub>O</p> 
<p>X<sup>3</sup>+X<sup>3</sup>=X<sup>6</sup></p>

#теория #html