Web Lab | Веб разработка
6.57K subscribers
118 photos
9 videos
304 links
Лучший бесплатный материал для начинающих программистов

Сотрудничество: @AmerigoVes

- Всё самое лучшее для Web-разработчиков
- IT инструменты, хитрости и секреты
- Отборные материалы для FullStack-специалистов
- Новости из мира IT
Download Telegram
Interactive Quiz - интерактивная викторина на JavaScript.

Интересный и привлекательный вариант готовой викторины для вашего сайта.

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

#полезныйресурс #css #html #javascript
CSS Layout - собрал в себе огромное количество готовых макетов и шаблонов, созданных с помощью CSS.

#полезныйресурс #css #html
Keyboard Hero - тренажёр печати.

Интересный и красивый проект, для изучения код.

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

#полезныйресурс #css #html #javascript
Серия книг-бестселлеров от Кайла Симпсон для изучения языка JavaScript с нуля. Оригинальное название: You don’t know JS.

Отличная серия книг, которая рассказывает и объясняет все тонкости языка от простого к сложному. Материал подаётся понятным языком. Подойдёт как новичкам, так и опытным разработчикам.

Рекомендую начать с книги «Замыкания и объекты».

#javascript
Генератор случайных паролей

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

#html #css #javascript #полезныйресурс
Cleave.js - библиотека, которая поможет автоматически форматировать вводимый текстовый контент.

Идея состоит в том, чтобы предоставить простой способ повысить удобочитаемость поля ввода путем форматирования типизированных данных.
The Chameleon from Null Island

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

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

#полезныйресурс #css #javascript #html
Developer-roadmap - дорожная карта веб-разработчика

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

#полезныйресурс
This media is not supported in your browser
VIEW IN TELEGRAM
Создаём матрицу.

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

🧩Читать статью 🧩

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

#html #javascript #css
Какие конструкции для циклов есть в JavaScript?
Anonymous Quiz
10%
Только одна: for.
34%
Только две: for и while.
56%
Три: for, while и do...while.
This media is not supported in your browser
VIEW IN TELEGRAM
Удивляем женский пол! Создаём бьющееся сердце.

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

❤️Читать статью❤️

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

#html #css
CSS Layout - собрал в себе огромное количество готовых макетов и шаблонов, созданных с помощью CSS.

#полезныйресурс #css #html
This media is not supported in your browser
VIEW IN TELEGRAM
Узнайте, как сделать классическую змейку в браузере

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

🐍Читать статью🐍

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

#html #javascript #css
🖥Диалоговые окна в JavaScript: методы alert, prompt, confirm.

В языке JavaScript существует 3 стандартных метода для ввода и вывода данных:

Alert – вызывает диалоговое окно с текстом и имеет кнопку ОК.

alert("Подпишись на канал WebLab!");

Prompt - вызывает диалоговое окно, которое содержит поле ввода. Можно вводить строки и значения.

var result = confirm("Вы подписались на канал WebLab?");

Confirm - вызывает диалоговое окно с текстом и двумя кнопками: Cancel и OK.

var userName = prompt("Пожалуйста, введите ваше имя:");

#javascript #учись
This media is not supported in your browser
VIEW IN TELEGRAM
Duck Hunt game in CSS

Легендарная игра на Dendy, реализована с помощью HTML и CSS, обёрнутых препроцессорами.

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

#полезныйресурс #css #html
Запрещаем вставлять текст

Чтобы запретить пользователю вставлять в поля ввода скопированный откуда-то текст, нужно отследить событие paste и вызвать его метод preventDefault().

<input type="text"> </input>

<script>
const input = document.querySelector('input');

input.addEventListener("paste", function(e){
e.preventDefault()
})

</script>


#javascript #учись
CORRUPT A FILE

Если ты не сдал проект в сроки, то загрузи свой файл на этом сайте и он вернёт тебе битый файл. Получатель не сможет его открыть. Этот способ выиграет тебе немного времени.

#полезныйресурс
🖥 Простые типы данных в JavaScript

В языке JavaScript переменная может принимать значения разных типов.

К простым типам относятся:

🧩Строковый (String) – последовательность символов, стоящая в кавычках. Строковые символы могут быть не только буквами и прочими символами, но и цифрами, поэтому следует отличать их от числовых данных.

let web = prompt (“Введите число”);

Строковый тип можно превратить в числовой, поставив в начале плюс:

let web = +prompt (“Введите число”);

🧩Числовой (Number) – целые или дробные числа.

Console.log (12345);

🧩Логический, или булевый (Boolean) – принимают значения true/false.

let lab = true;
if (lab === true) {
alert('Верно');
} else {
alert('Неверно');
}

🧩Пустой (Null) – не имеет значения.

🧩Неопределенный (Undefined) – значение не присвоено.

Узнать тип данных можно при помощи оператора typeof:

Print (typeof 123)
Print (typeof 't.me/labweb')

#javascript #учись
This media is not supported in your browser
VIEW IN TELEGRAM
Animated Tab Bar

Красивое анимированное меню, которое Вы сможете использовать в своём проекте или просто добавить в свои закладки.

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

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