Топ 5 сайтов, которые должен посетить каждый

Топ 5 крутых современных веб-сайтов, которые должен посетить каждый веб-дизайнер и веб-разработчик. Это новейшие практики и современные тенденции веб-дизайна.

📺 YouTube

WebDEV #видео

Весь современный стек в одном видео! Блок на сайт на Nest.js, Next.js и FSD

В этом видео мы напишем браузерное расширение для блокировки сайтов с 0 за 7 часов. Будем использовать самый актуальный на 2023 год стек технологий:

Сервер мы реализуем с использованием:
Node.js, Nest.js, Prisma, PostgreSQL, Swagger

Админку напишем на:
React, Next.js, FSD архитектура, @tanstack/react-query, tailwindcss, react-hook-form, orval

Расширение напишем на:
React, Vite, FSD архитектура, @tanstack/react-query, tailwindcss, orval

📺 YouTube

WebDEV #видео

Формы в JS - доступ к элементам форм, чтение и изменение значений полей ввода

Изучим, как получать доступ ко всем элементам form на странице и как можно по-разному обращаться к полям форм. Обсудим атрибут form, который позволяет связать внешнее поле с конкретной формой, независимо от его расположения в разметке. Научимся управлять элементами input, textarea и select, а именно, узнаем как правильно читать и изменять их значения через value, checked и другие свойства DOM-элементов.

📺 YouTube

WebDEV #видео

💡Шпаргалка по CSS

WebDEV #советы

PixelPerfect все, что нужно знать

Если бы вы знали, сколько слез пролито из-за слов Perfect Pixel, это слезы наших коллег, они почти как слезы русалок=) Сегодня мы победим страх перед PixelPerfect и научимся правильно его применять

📺 YouTube

WebDEV #видео

CSS переменные. Кастомные свойства + практический пример на JavaScript

Подготовил крутой видос про css переменные, вы узнаете не только что это, а и как можно ловко манипулировать Custom Properties на javascript, и тем самым делать ваш сайт супер живым!

📺 YouTube

WebDEV #видео

Топ 7 антипаттернов React. Ошибки, которые угробят твой проект

Это видео - первые 7 уроков моего курса по React, который начнётся в понедельник. Здесь мы рассмотрим ВАЖНЕЙШИЕ ошибки, которые встречаются в огромном количестве React проектов. Почему redux не спасает от props-drilling. Почему component folder - это зло.
И почему useEffect - это худшее, что придумало человечество

📺 YouTube

WebDEV #видео

Плавный переход между страницами сайта

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

📺 YouTube

WebDEV #видео

Дизайн реального проекта на фрилансе. Редизайним главную страницу сайта в фигме

Новый ролик из рубрики: «как я это нафрилансил?» в которой показываю свои реальные проекты для реальных заказчиков. Но теперь буду показывать какие кнопки нажимаю в Фигме в процессе работы над дизайном сайта.

📺 YouTube

WebDEV #видео

10 горячих клавиш в VS Code, которые ускорят твою верстку

Решил записать видео по топ хоткеям, которые не только ускорят Вашу верстку, но и сделают ее намного комфортнее, а в итоге вы будете больше получать кайфа от нашей работы!

📺 YouTube

WebDEV #видео

Делаем анимацию при прокрутке на JavaScript

Анимация при прокрутке страницы это, пожалуй, самое удобное, что можно сделать с сайтом, используя JavaScript.

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

📺 YouTube

WebDEV #видео

Топ темы для VS Code. Мой список. Настройки редактора. Шрифт с лигатурами

Подборка тем для VS Code и визуальные настройки редактора. Ayu, Palenight, Material theme. Шрифт Fira Code, лигатуры и высота строки.

📺 YouTube

WebDEV #видео

Универсальный стартовый шаблон для твоих Пэт-проектов с JS, SASS и Vite

– Какие технологии выбрать для своего пет проекта?
– Как развернуть проект и заставить всё работать вместе?
– Какую структуру папок использовать?

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

📺 YouTube

WebDEV #видео

Резюме frontend веб разработчика. Что написать в блоке "профессиональные навыки"

Как оформить блок "Профессиональные навыки" в резюме для frontend разработчика, веб-разработчика. Разбираем на реальном примере. Исправляем ошибки. Стратегия для новичка и для разработчика с опытом.

📺 YouTube

WebDEV #видео

SVG Explained за 100 секунд

Что такое Scalable Vector Graphics? Чем векторные изображения отличаются от растровых? Изучите основы SVG за 100 секунд!

📺 YouTube

WebDEV #видео #svg #web

WebRTC за 100 секунд

WebRTC — это технология, которая создает соединение в реальном времени между браузерами, где пользователи могут обмениваться аудио / видеопотоками.

📺 YouTube

WebDEV #видео #WebRTC #web

Vim за 100 секунд

Vim — это текстовый редактор на основе клавиатуры, который может повысить вашу продуктивность при написании кода.

📺 YouTube

#видео #vim

Слайдер с 3D эффектом волны на чистом CSS

Слайдер с 3D эффектом волны на чистом CSS. Реализация с помощью CSS трансформаций, работа с перспективой и z-осью в CSS. Слайдер без JavaScript. Раскрытие активного слайда по клику

📺 YouTube

WebDEV #видео

Строгий режим в JavaScript. Как включить и его особенности.

Строгий режим в JavaScript. Включается командой 'use strict'; Строгий режим позволяет избежать некоторых ошибок и сделать JS код более надежным. Особенности использования строгого режима в JS. Ограничения, особенности, правила, нюансы, зачем придуман строгий режим в JavaScript.

📺 YouTube

WebDEV #видео

Урок по JavaScript. Как работать с DOM в JS.

В этом видео мы выполним 26 задач с DOM (объектная модель документа) элементами. Мы также познакомимся с объектом Document нашего браузера. В практической части видео разберем ключевые методы работы с DOM деревом нашего мини-проекта (смотри ссылку на проект в репозитории).

📺 YouTube

WebDEV #видео