---

Видео на тему: WebTutorials - видео

В видео показаны варианты решения задачи 2619. Array Prototype Last. В видео объясняется метод массивов at(), обращение к элементу с помощью скобочной нотации, а так же упоминаем о тернарном операторе. Если еще не знакомы с новым оператором нулевого слияния ( ?? ), то в видео я также рассказываю его отличие от условного оператора ИЛИ ( || ). В конце видео я упоминаю о еще одной возможности получить последний элемент массива благодаря методу массива slice(). ----------------------------------------------- 00:14 – первый способ 00:51 – второй способ 01:29 – третий способ 02:04 – четвертый способ ----------------------------------------------- Мы на других площадках: VKontakte: https://vk.com/webtutorialsru Статьи, видео, подборки полезных плагинов и программ на Yandex Dzen: https://dzen.ru/webtutorials Ежедневные посты в Telegram: https://t.me/webtutorialsRuВ видео показано три варианта решения задачи 345. Reverse Vowels of a String на LeetCode. Решение выполнено на языке JavaScript. ----------------------------------------------- 00:03 – первый способ 00:37 – второй способ 02:29 – третий способ ----------------------------------------------- Мы на других площадках: Статьи, видео, подборки полезных плагинов и программ на Yandex Dzen: dzen.ru/webtutorials VKontakte: https://vk.com/webtutorialsru Ежедневные посты в Telegram: https://t.me/webtutorialsRu Короткие видео в TikTok: @webtutorialsruВ видео показано три варианта решения задачи 344. Reverse String на LeetCode ----------------------------------------------- 00:00 – метод reverse() 00:24 – логика решения 00:43 – с помощью цикла for() 01:31 – с помощью цикла while() ----------------------------------------------- Мы на других площадках: Статьи, видео, подборки полезных плагинов и программ на Yandex Dzen: https://dzen.ru/webtutorials Ежедневные посты в Telegram: https://t.me/webtutorialsRu Короткие видео в TikTok: @webtutorialsruХотите узнать как сделать крутой эффект при наведении с помощью всего одной строчки CSS? Скоро на канале выйдет видео с интресным применением этого эффекта. Это видео было написано на базе статьи "Cool Hover Effects That Use Background Properties". Советую ознакомиться со статьей. Кстати, на моем канале на Dzen.ru также есть перевод этой статьи. Мы на YaDzen: https://dzen.ru/webtutorials Ссылка на статью: https://css-tricks.com/cool-hover-effects-using-background-properties #html #css #animationЭффект спокойной волны внутри текста отлично подходит для целого ряда различных названий на сайтах, который поможет выделить его среди других. В анимации исползуются только html5 и css3. Благодаря свойству clip-path анимация легка для понимания. ============================ Yandex Dzen: https://dzen.ru/webtutorials Telegram: https://t.me/webtutorialsRu TikTok: @webtutorialsruПростая для понимания анимация загрузки привлекательна благодаря эффекту свечения. =========================== Мы на других ресурсах: Yandex Dzen: https://dzen.ru/webtutorials Telegram: https://t.me/webtutorialsRu TikTok: @webtutorialsru #css #html #animation #circle #spinner #frontend #livecodingПри наведении появляется цветной градиент, который следует за передвижением курсора мышки. В результате получился классный эффект, с которым хочется играть. Для реализации используются css переменные и небольшая функция javascript для определения позиции мышки. Этот потрясающий эффект при наведении улучшит дизайн вашего проекта. ============================ On hover, the color gradient appears that movement to the mouse cursor. As a result, we get a cool effect that is nice to play with. The implementation uses css variables and a small JavaScript function to determine the mouse position. This stunning hover effect will enhance your project desing. ============================ Мы на других площадках: Статьи, видео, подборки полезных плагинов и программ на Yandex Dzen: https://dzen.ru/webtutorials Ежедневные посты в Telegram: https://t.me/webtutorialsRu Короткие видео в TikTok: @webtutorialsru ============================ #css #html #javascript #hovereffect #button #animation #design #frontendЭта простая анимация текста, выполненная при помощи html и css, поможет сделать ваш сайт более интересным и придать ему уникальности. Достаточно изменить hex цвета и анимация заиграет по-новому. ====================================== Yandex Dzen: https://dzen.ru/webtutorials Telegram: https://t.me/webtutorialsRu TikTok: @webtutorialsruЕсли Вы ищете интересную анимацию для бургер меню на своем сайте, тогда можете присмотреться к этому варианту. Одна строчка JavaScript в видео используется только для установки состояния меню. Все остальное сделано на чистом CSS. Анимация интересная и легкая для понимания. ====================================== Мы на других площадках: Статьи, видео, подборки полезных плагинов и программ на Yandex Dzen: https://dzen.ru/webtutorials Ежедневные посты в Telegram: https://t.me/webtutorialsRu Короткие видео в TikTok: @webtutorialsru ====================================== #css #html #javascript #burgermenu #animationНебольшой и забавный проект для понимания принципа Drag'n'Drop. Drag’n’Drop – отличный способ улучшить интерфейс. Захват элемента мышкой и его перенос визуально упростят что угодно. В этом проекте при нажатии мышкой и перетаскивании объекта по сцене он должен менять свое внешнее состояние. Для красочности был добавлен звук смеха. Мини-проект сделан с помощью html, css и javascript. ==================================== Мы на других площадках: Статьи, видео, подборки полезных плагинов и программ на Yandex Dzen: https://dzen.ru/webtutorials Ежедневные посты в Telegram: https://t.me/webtutorialsRu Короткие видео в TikTok: @webtutorialsru #html #css #javascript #js #frontend #draganddropЭто второй небольшой проект для начинающих разработчиков, написанный с использованием JavaScript, позволяет выводить рандомные цитаты. В дальнейшем планируется реализовать дополнительные функции, такие как выбор различных API, смена языка и другие. На данный момент приложение при клике на кнопку выводит на экран рандомные цитаты. API с цитатами: https://type.fit/api/quotes ========================================= Мы на других площадках: Статьи, видео, подборки полезных плагинов и программ на Yandex Dzen: https://dzen.ru/webtutorials Ежедневные посты c полезной информацией в Telegram: https://t.me/webtutorialsRu Короткие видео в TikTok: @webtutorialsru ========================================= 00:05 - preview 00:06 - html 00:36 - css 05:10 - javascript #css #html #javascript #quotes #generator #fetch #asyncВ этом видео мы создадим небольшой проект на JavaScript с функцией, которая будет генерировать рандомные hex цвета и изменять фон основного элемента по нажатию на кнопку. Дополнительно пропишем функцию, с помощью которой будем конвертировать HEX в формат RGB с выводом полученного цвета на экран. На последнем этапе сделаем небольшую проверку и будем менять цвет текста в зависимости от цвета фона. ==================================== Мы на других площадках: Статьи, видео, подборки полезных плагинов и программ на Yandex Dzen: https://dzen.ru/webtutorials Ежедневные посты в Telegram: https://t.me/webtutorialsRu Короткие видео в TikTok: @webtutorialsru #css #html #javascript #hex #rgb #smallproject #hexgeneratorСоздать волновой спиннер достаточно легко при помощи css. Анимация занимает всего несколько строк. Для скорости работы использовался цикл @for в scss, так как каждому элементу волны задается небольшая задержка. ============================== Create water wave. Animation effects in CSS ============================== Мы на других площадках: Yandex Dzen: https://dzen.ru/webtutorials Telegram: https://t.me/webtutorialsRu TikTok: @webtutorialsru #css #html #animation #spinner #frontendВидео можно разделить на две части: 1. Создание простой анимации при вводе данных в форму с помощью html5 и css3; 2. Скрытие и отображение символов пароля благодаря нескольким строчкам JavaScript; Эти эффекты можно встретить достаточно части, и они не занимают много времени на создание. Также в видео можно узнать, как изменить цвет иконки, используя свойство filter. ===================== Мы на других ресурсах: Telegram: https://t.me/webtutorialsRu TikTok: @webtutorialsru RuTube: https://rutube.ru/channel/29787429/Простой и красивый эффект появления текста с помощью html и css (scss). =========================== Yandex Dzen: https://dzen.ru/webtutorials Telegram: https://t.me/webtutorialsRu TikTok: @webtutorialsruПереключатель можно создать несколькими способами. Видео показано стилизация простого свичера с использованием чекбокса. #html #css #checkbox #frontend #фронт #switcher #переключательПрекрасный эффект стилизации блока в виде капли на чистом css. Легко и просто Yandex Dzen: https://dzen.ru/webtutorials Telegram: https://t.me/webtutorialsRu TikTok: @webtutorialsru #html #css #frontend #waterdrop #effect #фронт #webtutorialКлассный эффект 3D с анимацией при помощи псевдоэлементов. Yandex Dzen: https://dzen.ru/webtutorials Telegram: https://t.me/webtutorialsRu TikTok: @webtutorialsru #html #css #blendmode #button #3d #effect #animation #webtutorialКак подключить стили к html файлу? Быстрая демонстрация подключения стилей. 4 типа подключения, включая директиву import. В качестве редактора используется Visual Studio Code (VSCode). ============================ Link styles to HTML it's easy! Visual Studio Code (VSCode) is used as the editor. ============================ Yandex Dzen: https://dzen.ru/webtutorials Telegram: https://t.me/webtutorialsRu TikTok: @webtutorialsru #html #css #linkstyles #styles #подключениестилейНеоморфизм — это сочетание плоского дизайна и скевоморфизма. При создании неоморфных элементов используются тени разной яркойсти. В видео показана простая стилизация кнопки в стиле неоморфизма при нажатии и нет. Telegram: https://t.me/webtutorialsRu Yandex.Dzen: https://dzen.ru/webtutorials #neumorphism #ui #button #html #css