Классическая змейка
Сложность - СРЕДНЕ
Языки - 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")
8%
readln ("Hi, WebLab")
13%
Нет верных вариантов
Google Fonts - удобный сервис для работы с веб-шрифтами.
Сайт содержит одну из крупнейших коллекций шрифтов, адаптированных к использованию в веб-разработке. На сайте представлено более 1000 различных семейств шрифтов. Можно скачать как отдельный шрифт, так и архив с несколькими семействами.
#полезныйресурс
Сайт содержит одну из крупнейших коллекций шрифтов, адаптированных к использованию в веб-разработке. На сайте представлено более 1000 различных семейств шрифтов. Можно скачать как отдельный шрифт, так и архив с несколькими семействами.
#полезныйресурс
CSS. Как убрать подчеркивание у гиперссылки?
Anonymous Quiz
26%
a { underline:none; }
3%
a { decoration:not-underline; }
19%
a { text-decoration:not-underline; }
53%
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
Переключение видимости паролей.
Сложность - ЛЕГКО
Языки - HTML, JS
ШАГ 1
Добавляем HTML:
ШАГ 2
Добавляем JavaScript:
Если есть вопросы по коду, писать сюда @WebLabFeedBackBot
#javascript #html
Сложность - ЛЕГКО
Языки - HTML, JS
ШАГ 1
Добавляем HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebLab - password</title>
</head>
<body>
Пароль: <input type="password" value="Введите пароль" id="Webpassword">
<input type="checkbox" onclick="ShowPass()">Показать пароль
</body>
</html>ШАГ 2
Добавляем JavaScript:
function ShowPass() {
var x = document.getElementById("Webpassword");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
} Если есть вопросы по коду, писать сюда @WebLabFeedBackBot
#javascript #html
Орёл или решка?
Сложность - ЛЕГКО
Языки - HTML, JS
ШАГ 1
Добавляем HTML:
ШАГ 2
Добавляем JavaScript:
Если есть вопросы по коду, писать сюда @WebLabFeedBackBot
#javascript #html
Сложность - ЛЕГКО
Языки - HTML, JS
ШАГ 1
Добавляем HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebLab - coin</title>
</head>
<body>
<button id="click" type="button">Подбросить монетку</button>
<p>
Выпало: <span id="result"></span>
</p>
</body>
</html>ШАГ 2
Добавляем JavaScript:
document.getElementById('click').onclick = click;
var orel = 0;
var reshka = 0;
function click() {
x = (Math.floor(Math.random() * 2) == 0);
if(x){
flip("Орёл");
}else{
flip("Решка");
}
};
function flip(coin) {
document.getElementById("result").innerHTML = coin;
};Если есть вопросы по коду, писать сюда @WebLabFeedBackBot
#javascript #html
Как создать новый массив в JavaScript?
Anonymous Quiz
22%
var animals = 'cat', 'dog', 'cow'
59%
var animals = ['cat', 'dog', 'cow']
9%
var animals = 1 = ('cat'), 2 = ('dog'), 3 = ('cow')
9%
var animals = (1:'cat', 2:'dog', 3:'cow')
Chart.js — библиотека JavaScript, которая позволяет быстро и удобно создавать различные графики и диаграммы на сайте, используя Canvas.
#полезныйресурс
#полезныйресурс
Вопрос от подписчика.
Решаем:
Задаем 2 переменные: point и answer. Функция prompt вызывает окно с вопросом и поле для ввода ответа. Введенный ответ попадает в переменную answer. Программа сравнивает данный ответ с правильным. Если ответ правильный, то программа пойдет по одной ветке, в противном случае программа пойдет по другой ветке.
Наш код:
Если есть вопросы по коду, писать сюда @WebLabFeedBackBot
Решаем:
Задаем 2 переменные: point и answer. Функция prompt вызывает окно с вопросом и поле для ввода ответа. Введенный ответ попадает в переменную answer. Программа сравнивает данный ответ с правильным. Если ответ правильный, то программа пойдет по одной ветке, в противном случае программа пойдет по другой ветке.
Наш код:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebLab - ВопросОтПодписчика</title>
</head>
<body>
<script>
let point = 0;
let answer = "";
answer = prompt("В каком году был создан язык JavaScript?");
if (answer == "1995"){
alert("Верно");
point++
}else{
alert("Неверно!");
}
answer = prompt("Создатель языка JavaScript?");
if (answer == "Брендан Айк"){
alert("Верно");
point++ }
else{
alert("Неверно!");
}
alert("Вы набрали: " + point + " баллов");
</script>
</body>
</html>Если есть вопросы по коду, писать сюда @WebLabFeedBackBot
Тег <table>
Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>. Внутри <table> допустимо использовать следующие элементы: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> и <tr>.
Синтаксис
Атрибуты
align - Определяет выравнивание таблицы
background - Задает фоновый рисунок в таблице
bgcolor - Цвет фона таблицы
border - Толщина рамки в пикселах
bordercolor - Цвет рамки
cellpadding - Отступ от рамки до содержимого ячейки
cellspacing - Расстояние между ячейками
cols - Число колонок в таблице
frame - Сообщает браузеру, как отображать границы вокруг таблицы
height - Высота таблицы
rules - Сообщает браузеру, где отображать границы между ячейками
summary - Краткое описание таблицы
width - Ширина таблицы
#теги #html
Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>. Внутри <table> допустимо использовать следующие элементы: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> и <tr>.
Синтаксис
<table>
<tr>
<td>Текст</td>
</tr>
</table>Атрибуты
align - Определяет выравнивание таблицы
background - Задает фоновый рисунок в таблице
bgcolor - Цвет фона таблицы
border - Толщина рамки в пикселах
bordercolor - Цвет рамки
cellpadding - Отступ от рамки до содержимого ячейки
cellspacing - Расстояние между ячейками
cols - Число колонок в таблице
frame - Сообщает браузеру, как отображать границы вокруг таблицы
height - Высота таблицы
rules - Сообщает браузеру, где отображать границы между ячейками
summary - Краткое описание таблицы
width - Ширина таблицы
#теги #html
Добавлять под постами хэштеги? Кликая на них, можно переходить к интересующему посту. Это улучшит навигацию по каналу.
Final Results
93%
Да
7%
Нет
Навигация по каналу.
Кликай по хэштегу, чтобы перейти к посту, который опубликован на канале с данным хэштегом.
#javascript
#css
#html
#игры
#теги
#полезныйресурс
#учись
#python
#измираIT
#сниппет
#курсы
#книга
#шпаргалки
#ии
#статья
#начинающему
Кликай по хэштегу, чтобы перейти к посту, который опубликован на канале с данным хэштегом.
#javascript
#css
#html
#игры
#теги
#полезныйресурс
#учись
#python
#измираIT
#сниппет
#курсы
#книга
#шпаргалки
#ии
#статья
#начинающему
CSS Gradient - генератор градиентов
Бесплатный инструмент, который позволяет создавать градиентный фон. Помимо этого, он включает в себя необходимые настройки: тип, количество переходов, их позиции, HEX/RGBA кодировки цветов, угол наклона и прозрачность. Результат отображается ниже в виде CSS стилей градиента. Так же имеется совместимость с IE6+
#css #полезныйресурс
Бесплатный инструмент, который позволяет создавать градиентный фон. Помимо этого, он включает в себя необходимые настройки: тип, количество переходов, их позиции, HEX/RGBA кодировки цветов, угол наклона и прозрачность. Результат отображается ниже в виде CSS стилей градиента. Так же имеется совместимость с IE6+
#css #полезныйресурс