Web Lab | Веб разработка

Навигация по каналу.

Кликай по хэштегу, чтобы перейти к посту, который опубликован на канале с данным хэштегом.

#javascript
#css
#html
#игры
#теги
#полезныйресурс
#учись
#python
#измираIT
#сниппет
#курсы
#книга
#шпаргалки
#ии
#статья

3.3K viewsedited 20:25

CSS Gradient - генератор градиентов

Бесплатный инструмент, который позволяет создавать градиентный фон. Помимо этого, он включает в себя необходимые настройки: тип, количество переходов, их позиции, HEX/RGBA кодировки цветов, угол наклона и прозрачность. Результат отображается ниже в виде CSS стилей градиента. Так же имеется совместимость с IE6+

#css #полезныйресурс

2.9K views16:20

Web Lab | Веб разработка

Создаём конвертер длины, в нашем случае из миль в километры.

Сложность - ЛЕГКО
Языки - HTML, JS

ШАГ 1
Добавляем HTML:

<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
 <title>WebLab - конвертер</title> 
</head> 
<body> 
 
 <h2>Конвертер длины Миль в Километры</h2> 
 
<p> 
 <label>Миль</label> 
 <input id="Ml" type="number" placeholder="Миль" oninput="Converter(this.value)" onchange="Converter(this.value)"> 
</p> 
<p> 
 Километры: <span id="Km"></span> 
</p> 
 
</body> 
</html>

ШАГ 2
Добавляем JavaScript:

<script> 
 function Converter(Num) { 
 document.getElementById("Km").innerHTML=Num/0.62137; 
 } 
 </script>

Если есть вопросы по коду, писать сюда @WebLabFeedBackBot

#javascript #html

1.5K views21:30

Web Lab | Веб разработка

Несколько бесплатных онлайн игр для освоения CSS, преимущественно для новичков.

🧩 Flexbox Froggy

🧩 Flexbox Defense

🧩 Grid Garden

🧩 CSS Diner

Если есть вопросы, писать сюда @WebLabFeedBackBot

#css #игры

1.4K views14:30

Web Lab | Веб разработка

Создаём изображение с прозрачным фоновым текстом.

Сложность - ЛЕГКО
Языки - HTML, CSS

ШАГ 1
Добавляем HTML:

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1">  
</head> 
<body> 
 
<div class="container"> 
 <img src="WebLab.jpg" alt="Photo" style="width:100%;"> 
 <div class="avatar"> 
 <h1>WebLab</h1> 
 <p>Подпишись на канал WebLab | Веб-разработка</p> 
 </div> 
</div> 
 
</body> 
</html>

ШАГ 2
Добавляем CSS:

<style> 
* { 
 box-sizing: border-box; 
} 
 
body { 
 margin: 0; 
 font-family: Courier New; 
 font-size: 15px; 
} 
 
.container { 
 position: relative; 
 max-width: 777px; /* Максимальная ширина */ 
 margin: 0 auto; /* Ставим в центр */ 
} 
 
.container img {vertical-align: middle;} 
 
.container .avatar { 
 position: absolute; /* Располагаем фоновый текст */ 
 bottom: 0; 
 background: rgba(0, 0, 0, 0.5); /* Черный фон с непрозрачностью 0,5 */ 
 color: aqua; 
 width: 100%; 
 padding: 20px; 
} 
</style>

#css #html

1.4K views15:20

Web Lab | Веб разработка

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

#полезныйресурс

1.5K views17:10

Web Lab | Веб разработка

Embla Carousel - лёгкая библиотека для создания слайдеров-каруселей на JavaScript. Она позволяет создавать отзывчивые и адаптивные, кастомизируемые карусели. Есть большое количество готовых шаблонов.

#css #javascript #html

1.3K views17:10

Web Lab | Веб разработка

Реализуем секундомер с использованием JavaScript.

Сложность - СРЕДНЕ
Языки - HTML, JS

🖥 Читать статью 🖥

Если есть вопросы по коду, писать сюда @WebLabFeedBackBot

#javascript #html

1.3K views12:15

Web Lab | Веб разработка

Baba is You – одна из лучших головоломок 2019 года и хороший инструмент для обучения использованию логики и переменных в программировании. Каждое слово соответствует объекту или действию, определяющему свойства уровней. Слова, обозначающие объекты и свойства, можно перемещать для изменения выполняемых объектами действий. Это игра показывает, как замена переменных может повлиять на код.

#игры

1.7K views12:30

Web Lab | Веб разработка

JavaScript. Как сгенерировать случайное число от 1 до 10?

Anonymous Quiz

31%

Math.floor(Math.random(10)+1);

35%

Math.floor(Math.random() * 10) + 1;

15%

Math.random() * 10+1;

19%

Math.random(10)+1;

226 voters1.7K views10:59

Web Lab | Веб разработка

Создаём русскую матрицу.

Сложность - ЛЕГКО
Языки - HTML, JS, CSS

🖥 Читать статью 🖥

Если есть вопросы по коду, писать сюда @WebLabFeedBackBot

#html #javascript #css

1.3K views11:00

Web Lab | Веб разработка

Реализуем простое, но необычное боковое меню.

Сложность - ЛЕГКО
Языки - HTML, JS, CSS

🖥 Читать статью 🖥

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

Если есть вопросы по коду, писать сюда @WebLabFeedBackBot

#css #javascript #html

1.4K views09:00

Web Lab | Веб разработка

CSS Button Generator - css генератор кнопок для сайтов

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

#полезныйресурс #css

1.5K views04:00

Web Lab | Веб разработка

Html. Укажите тег позволяющий определить нумерованный список.

Anonymous Quiz

323 voters1.2K views09:10

Web Lab | Веб разработка

Html. Выберите тег, создающий маркированный список.

Anonymous Quiz

292 voters1.2K views18:15

Web Lab | Веб разработка

Создаем неоновый текст с помощью CSS.

На этом сайте, Вы пошагово научитесь создавать имитацию неоновых вывесок с различными анимированными эффектами.

#css #html #полезныйресурс

1.4K views12:40

Web Lab | Веб разработка

Fancy Border Radius - инструмент для генерации сложной фигуры.

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

#полезныйресурс #css

1.3K views16:35

Web Lab | Веб разработка

Тег <canvas>.

Создает область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства. При помощи тега <canvas> можно создавать рисунки, анимацию, игры и др.

Синтаксис
<canvas id="идентификатор"> </canvas>

Атрибуты
height - Задает высоту холста. По умолчанию 300.
width - Задает ширину холста. По умолчанию 150.

Обязателен закрывающий тег.

#html #javascript

1.4K views09:35

Web Lab | Веб разработка

3D CSS Plane - самолёт, который летит и управляется с помощью библиотеки GSAP. Самолёт может менять направление движения и включать "огни" с наступлением ночи.

Полный код проекта присутствует.

#полезныйресурс #css #javascript #html

1.3K views16:00

Web Lab | Веб разработка

Как называется защищённый протокол, по которому передаются веб-страницы?

Anonymous Quiz

366 voters1.3K views19:20

Web Lab | Веб разработка

Недавно вышел Notepad++ 8 — это крупное обновление редактора за последние 5 лет.

Появилась поддержка ARM64-архитектуры и наконец-то исправили ряд проблем, преследовавших приложение последние релизы.

Скачать и почитать подробнее об изменениях

1.3K views15:45

About

Blog

Apps

Platform