Базовый анимированный значок меню
Сложность - ЛЕГКО
Языки - HTML, CSS, JS
🖥 Читать статью 🖥
Если есть вопросы по коду, писать сюда @WebLabFeedBackBot
#html #css #javascript
Сложность - ЛЕГКО
Языки - HTML, CSS, JS
🖥 Читать статью 🖥
Если есть вопросы по коду, писать сюда @WebLabFeedBackBot
#html #css #javascript
Telegraph
Базовый анимированный значок меню с помощью CSS и JavaScript
ШАГ 1 Добавляем HTML:
Эффект ввода текста
Сложность - ЛЕГКО
Языки - HTML, JS
🖥 Читать статью 🖥
Если есть вопросы по коду, писать сюда @WebLabFeedBackBot
#javascript #html
Сложность - ЛЕГКО
Языки - HTML, JS
🖥 Читать статью 🖥
Если есть вопросы по коду, писать сюда @WebLabFeedBackBot
#javascript #html
Telegraph
Эффект ввода текста с помощью JavaScript
ШАГ 1 Добавляем HTML:
Интересные теги HTML:
1) Тег <CODE> предназначен для отображения одной или нескольких строк текста, который представляет собой программный код.
2) Тег <BLOCKQUOTE> предназначен для выделения длинных цитат внутри документа. Текст, отображается как выровненный блок с отступами слева и справа.
3) Тег <DEL> используется для выделения текста, который был удален в новой версии документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны.
4) Тег <XMP> отображает содержимое контейнера «как есть» и шрифтом фиксированной ширины. Пока тег <XMP> не закрыт, все теги внутри него отображаются как обычный текст.
5) Тег <ABBR> указывает, что символы являются аббревиатурой. С помощью параметра title дается расшифровка сокращения, что позволяет понимать аббревиатуру.
6) Тег <ADDRESS> предназначен для хранения информации об авторе. Планируется, что поисковые системы будут анализировать содержимое этого тега для сбора информации.
#теги #html
1) Тег <CODE> предназначен для отображения одной или нескольких строк текста, который представляет собой программный код.
2) Тег <BLOCKQUOTE> предназначен для выделения длинных цитат внутри документа. Текст, отображается как выровненный блок с отступами слева и справа.
3) Тег <DEL> используется для выделения текста, который был удален в новой версии документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны.
4) Тег <XMP> отображает содержимое контейнера «как есть» и шрифтом фиксированной ширины. Пока тег <XMP> не закрыт, все теги внутри него отображаются как обычный текст.
5) Тег <ABBR> указывает, что символы являются аббревиатурой. С помощью параметра title дается расшифровка сокращения, что позволяет понимать аббревиатуру.
6) Тег <ADDRESS> предназначен для хранения информации об авторе. Планируется, что поисковые системы будут анализировать содержимое этого тега для сбора информации.
#теги #html
Часто задаваемый вопрос: "Как подключить CSS к HTML коду?"
Способ 1. Отдельный CSS файл.
Самый распространенный способ подключения CSS - это когда он хранится в отдельном файле. Преимущество такого подхода в том, что CSS файл один, а HTML файлов может быть любое количество. Чтобы подключить CSS файл к HTML странице, в теге head следует написать такую конструкцию:
Способ 2. CSS внутри тега style.
Второй способ заключается в том, что CSS код можно написать в теге <style> Его можно размещать как внутри <head>, так и внутри <body>. Недостаток этого способа в том, что CSS код применяется только к одной странице сайта. Этот способ обычно применяется тогда, когда нужно написать CSS на конкретной странице сайта, не затрагивая остальных. Пример:
#css #html
Способ 1. Отдельный CSS файл.
Самый распространенный способ подключения CSS - это когда он хранится в отдельном файле. Преимущество такого подхода в том, что CSS файл один, а HTML файлов может быть любое количество. Чтобы подключить CSS файл к HTML странице, в теге head следует написать такую конструкцию:
<link rel="stylesheet" href="путь к CSS файлу">. Сам CSS файл должен быть с расширением .css. Обычно его называют style.css.Способ 2. CSS внутри тега style.
Второй способ заключается в том, что CSS код можно написать в теге <style> Его можно размещать как внутри <head>, так и внутри <body>. Недостаток этого способа в том, что CSS код применяется только к одной странице сайта. Этот способ обычно применяется тогда, когда нужно написать CSS на конкретной странице сайта, не затрагивая остальных. Пример:
<style> p {color: red;} </style>#css #html
Классическая змейка
Сложность - СРЕДНЕ
Языки - HTML, JS, CSS
🖥 Читать статью 🖥
В этой статье Вы прочитаете как сделать классическую змейку, просто и понятно, с использованием canvas.
Справка
Тег <canvas> - создает область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства. При помощи тега <canvas> можно создавать рисунки, анимацию, игры.
Если есть вопросы по коду, писать сюда @WebLabFeedBackBot
#css #javascript #html #игры
Сложность - СРЕДНЕ
Языки - HTML, JS, CSS
🖥 Читать статью 🖥
В этой статье Вы прочитаете как сделать классическую змейку, просто и понятно, с использованием canvas.
Справка
Тег <canvas> - создает область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства. При помощи тега <canvas> можно создавать рисунки, анимацию, игры.
Если есть вопросы по коду, писать сюда @WebLabFeedBackBot
#css #javascript #html #игры
Полезный ресурс.
HTML CSS Палитра цветов
помогает подобрать цвет в виде HEX, RGB, RGBA, HSV и CMYK записи цветовой модели. Нажимайте на поля выбора цвета, а для более точного выбора, перемещайте курсор с зажатой левой кнопкой мыши. Изменяйте параметры цвета через поля ввода. А ещё можно скачать выбранный цвет, в формате SVG, PNG, JPEG или GIF.
Ссылка на данный сайт
#полезныйресурс
HTML CSS Палитра цветов
помогает подобрать цвет в виде HEX, RGB, RGBA, HSV и CMYK записи цветовой модели. Нажимайте на поля выбора цвета, а для более точного выбора, перемещайте курсор с зажатой левой кнопкой мыши. Изменяйте параметры цвета через поля ввода. А ещё можно скачать выбранный цвет, в формате SVG, PNG, JPEG или GIF.
Ссылка на данный сайт
#полезныйресурс
Иконка загрузки
Сложность - ЛЕГКО
Языки - HTML, CSS
ШАГ 1
Добавляем HTML:
ШАГ 2
Добавляем CSS:
border: определяет размер и цвет границы
border-radius: преобразует иконку в окружность
border-top: вращательный элемент
width height: размер
animation spin 3s linear infinite: анимация бесконечная со скоростью 3
Если есть вопросы по коду, писать сюда @WebLabFeedBackBot
#css #html
Сложность - ЛЕГКО
Языки - HTML, CSS
ШАГ 1
Добавляем HTML:
<div class="loading"></div>ШАГ 2
Добавляем CSS:
<style>
.loading {
border: 8px solid #AFAFAF;
border-radius: 50%;
border-top: 8px solid black;
width: 60px;
height: 60px;
animation: spin 3s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>border: определяет размер и цвет границы
border-radius: преобразует иконку в окружность
border-top: вращательный элемент
width height: размер
animation spin 3s linear infinite: анимация бесконечная со скоростью 3
Если есть вопросы по коду, писать сюда @WebLabFeedBackBot
#css #html
Как подключить JavaScript к HTML коду?
Способ 1. JavaScript внутри тега script.
Самый простой способ внедрения JavaScript в HTML. Для этого необходимо добавить парный тег <script>, его часто помещают как внутри <head>, так и внутри <body>. Пример:
Способ 2. Подключение внешнего файла скрипта с кодом.
Обычно такой файл называется script и имеет расширение js. Чтобы подключить JavaScript из внешнего файла, нужно использовать конструкцию
#html #javascript
Способ 1. JavaScript внутри тега script.
Самый простой способ внедрения JavaScript в HTML. Для этого необходимо добавить парный тег <script>, его часто помещают как внутри <head>, так и внутри <body>. Пример:
<script> alert("JavaScript подключен"); </script>Способ 2. Подключение внешнего файла скрипта с кодом.
Обычно такой файл называется script и имеет расширение js. Чтобы подключить JavaScript из внешнего файла, нужно использовать конструкцию
<script src="путь к файлу скрипта/script.js"></script>. Как правило, скрипты подключаются в области <head> документа.#html #javascript
This media is not supported in your browser
VIEW IN TELEGRAM
Удиви свою любимую! Сделай бьющееся сердце с помощью CSS.
Сложность - СРЕДНЕ
Языки - HTML, CSS
🖥 Читать статью 🖥
Если есть вопросы по коду, писать сюда @WebLabFeedBackBot
#css #html
Сложность - СРЕДНЕ
Языки - HTML, CSS
🖥 Читать статью 🖥
Если есть вопросы по коду, писать сюда @WebLabFeedBackBot
#css #html
Если Вы хотите больше практиковаться и усовершенствовать свою технику написания кода, то сайт Codewars для Вас.
На этом сайте представлены практические задания для многих языков программирования. Задачки имеют несколько уровней сложности: от 8 kyu до 1 kyu. Причем чем ниже kyu, тем сложнее. Оттачивайте свои навыки и сравниваете свое решение с другими.
#полезныйресурс
На этом сайте представлены практические задания для многих языков программирования. Задачки имеют несколько уровней сложности: от 8 kyu до 1 kyu. Причем чем ниже kyu, тем сложнее. Оттачивайте свои навыки и сравниваете свое решение с другими.
#полезныйресурс
Масштабирование изображения.
Сложность - СРЕДНЕ
Языки - HTML, JS, CSS
🖥 Читать статью 🖥
В этой статье Вы узнаете, как сделать масштабирование изображений с помощью лупы, просто и понятно.
Если есть вопросы по коду, писать сюда @WebLabFeedBackBot
#css #javascript #html
Сложность - СРЕДНЕ
Языки - HTML, JS, CSS
🖥 Читать статью 🖥
В этой статье Вы узнаете, как сделать масштабирование изображений с помощью лупы, просто и понятно.
Если есть вопросы по коду, писать сюда @WebLabFeedBackBot
#css #javascript #html
JavaScript. Как вывести модальное окно с сообщением?
Anonymous Quiz
16%
new alert ("Hi, WebLab")
62%
alert ("Hi, WebLab")
9%
readln ("Hi, WebLab")
13%
Нет верных вариантов
Google Fonts - удобный сервис для работы с веб-шрифтами.
Сайт содержит одну из крупнейших коллекций шрифтов, адаптированных к использованию в веб-разработке. На сайте представлено более 1000 различных семейств шрифтов. Можно скачать как отдельный шрифт, так и архив с несколькими семействами.
#полезныйресурс
Сайт содержит одну из крупнейших коллекций шрифтов, адаптированных к использованию в веб-разработке. На сайте представлено более 1000 различных семейств шрифтов. Можно скачать как отдельный шрифт, так и архив с несколькими семействами.
#полезныйресурс
CSS. Как убрать подчеркивание у гиперссылки?
Anonymous Quiz
25%
a { underline:none; }
2%
a { decoration:not-underline; }
18%
a { text-decoration:not-underline; }
55%
a { text-decoration:none; }
Теги <audio> и <video>
Добавляют, воспроизводят, управляют настройками аудиозаписей и видеороликов на веб-странице. Путь к файлу задается через атрибут src или вложенный тег <source>.
Синтаксис audio:
Синтаксис video:
Атрибуты audio:
autoplay - Звук начинает играть сразу после загрузки страницы.
controls - Добавляет панель управления.
loop - Повторяет воспроизведение звука с начала после его завершения.
preload - Используется для загрузки файла вместе с загрузкой веб-страницы.
Атрибуты video:
autoplay - Видео воспроизводиться сразу после загрузки страницы
controls - Добавляет панель управления
height и width - Задают ширину и высоту области для воспроизведения
loop - Повторяет воспроизведение видео с начала после его завершения
poster - Указывает картинку, которая будет отображаться, пока видео не воспроизводится
preload - Используется для загрузки видео вместе с загрузкой веб-страницы
#теги #html
Добавляют, воспроизводят, управляют настройками аудиозаписей и видеороликов на веб-странице. Путь к файлу задается через атрибут src или вложенный тег <source>.
Синтаксис audio:
<audio src="URL"> </audio>
<audio> <source src="URL"> </audio>Синтаксис video:
<video> <source src="URL"> </video>Атрибуты audio:
autoplay - Звук начинает играть сразу после загрузки страницы.
controls - Добавляет панель управления.
loop - Повторяет воспроизведение звука с начала после его завершения.
preload - Используется для загрузки файла вместе с загрузкой веб-страницы.
Атрибуты video:
autoplay - Видео воспроизводиться сразу после загрузки страницы
controls - Добавляет панель управления
height и width - Задают ширину и высоту области для воспроизведения
loop - Повторяет воспроизведение видео с начала после его завершения
poster - Указывает картинку, которая будет отображаться, пока видео не воспроизводится
preload - Используется для загрузки видео вместе с загрузкой веб-страницы
#теги #html
Что выведет этот код?
for(let i=0; i<10; i++) { setTimeout(function() { alert(i); }, 100); }
for(let i=0; i<10; i++) { setTimeout(function() { alert(i); }, 100); }
Anonymous Quiz
17%
10 раз число 0
33%
Числа от 0 до 10
11%
10 раз число 10
39%
Числа от 0 до 9