Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

JS за выходные: твоё или нет? Frontend, React [DevHotSpot]

Name: JS за выходные: твоё или нет? Frontend, React [DevHotSpot]
Rating: 5.0 (5 reviews)

Короткий практический курс для тех кто хочет попробовать разработку за одни выходные [DevHotSpot]

Created byRuslan Tissen

Last updated 7/2026

Russian

What you'll learn

Искать и манипулировать любыми элементами на странице с помощью querySelector и getElementById.
Организовывать структуру проекта для командной разработки и высокой читаемости кода.
Понимать разницу между современными стандартами и «старой школой» (Window, Prompt, глобальные объекты).
Настраивать профессиональное окружение разработчика: терминал, VS Code и расширения.
Создавать React-проекты вручную, понимая назначение папок public, src и структуру SPA.
Применять философию «время — деньги бизнеса», оптимизируя написание кода.

Course content

4 sections • 41 lectures • 4h 51m total length

Как развернуть проект за 5 минут: Настройка VS Code и терминала.6:52
Зачем разбивать код на компоненты? Объект Window и секреты чистой архитектуры.5:22
Как правильно искать элементы в DOM: Разница querySelector vs querySelectorAll.4:32
Сложные CSS-селекторы в JavaScript: Как прицелиться к любому элементу по ID.2:14
querySelector vs getElementById: Что быстрее и в чем разница.1:19
Навигация в консоли: Как читать DevTools и быстро находить ошибки в коде.0:50
Продвинутый логинг в консоли: Сокращенный синтаксис объектов ES6.1:33
Как изменять CSS стили через JavaScript: Правило camelCase и частые ошибки.3:20
Первая интерактивность на JS: Как связать ввод пользователя и CSS стили.3:32
Первое сложное ДЗ: Перебор элементов через forEach и метод «озарения».2:35
Архитектура DOM: Концепция API и визуализация структуры проекта.6:48

Узлы и элементы в DOM: Свойство nodeName и почему автосохранение вредит коду.8:02
Почему HTMLCollection ломает код? parentElement и превращение в массив.3:35
В этом видео мы столкнулись с проблемой: HTMLCollection выглядит как массив, но не обладает его силой. Чтобы двигаться дальше, нам нужно научиться превращать «псевдомассивы» в настоящие массивы и эффективно ими управлять.
Ваше домашнее задание (Research Task): Программист — это прежде всего исследователь. Я хочу, чтобы вы самостоятельно изучили три ключевых инструмента, которые мы будем постоянно использовать:
Array.from() — как именно он превращает коллекцию элементов в полноценный массив?
forEach() — как с его помощью выполнить код для каждого элемента массива (например, изменить цвет сразу всем кнопкам)?
map() — в чем его отличие от forEach? (Подсказка: посмотрите, что он возвращает).
Как искать:
Воспользуйтесь MDN (Mozilla Developer Network) — это наша библия.
Используйте ChatGPT / Google Gemini. Сформулируйте запрос: "Объясни простому человеку разницу между forEach и map в JavaScript с примерами".
Попробуйте применить Array.from() к нашему списку list.children из урока и выведите результат в консоль.
Помните: Время, потраченное на самостоятельный поиск ответов, окупается десятикратно в реальной работе.
DOM-навигациия: Методы matches, closest и ловушка previousSibling.16:38
Скрытые проблемы textContent: Работа с текстом в DOM и Template Literals.3:33
Свойство innerHTML: Как динамически менять HTML и не поймать XSS-атаку.7:42
Управление классами через classList: Методы add, remove и секрет toggle.16:06
Асинхронность для новичков: Как работают setTimeout, setInterval и console.table6:58
Вся правда про Soft Skills: Почему софт-скиллы важнее чистого кода.2:47

Интерактивность: Основы addEventListener и типы событий (Click, Focus, Blur).4:59
Элегантный код: Почему classList.toggle() лучше, чем условия If/Else.2:24
DOM: Свойства parentElement, nextElementSibling и основы Problem Solving.5:41
Секреты Event Object: Что скрывает аргумент (e) и как работает e.target.11:06
Перехват ввода: Как работает KeyboardEvent в keydown и зачем это нужно в React.4:39
Жизненный цикл страницы: Вся правда о DOMContentLoaded и блокировке парсинга.7:33
Как работать с легаси-кодом? Инлайновые события vs современные стандарты.4:09
Работа с формами: Специфические события, опасность тега reset и шаг к SPA.11:02
Перехват поведения браузера: Как укротить e.preventDefault() и функцию confirm()8:21
Событие Submit: Отправка данных на сервер и основы валидации.7:18
Событие change: Динамическое управление атрибутами и интерактивные чекбоксы.6:02

Жизненный цикл события: Всплытие (Bubbling) и Погружение (Capturing) в DOM.12:11
Почему stopPropagation() это плохая практика? Обратная сторона всплытия событий.5:33
Делегирование событий: Паттерн «Заставим работать родителя» и свойство nodeName.5:17
Чистая архитектура: Зачем нужны модули и как работает изоляция кода в JS.9:44
https://github.com/RuslanTissen/SPA-videos/tree/main/Modules-1
Модули в ES6: В чем разница между Named export и Default export?6:43
https://github.com/RuslanTissen/SPA-videos/tree/main/Modules-1
Лабораторная работа: Экспорт стрелочных функций и тонкости ES6 Modules.17:27
Ребята, в этом уроке информации получилось много, и она может показаться вам немного скомканной или сложной. Не переживайте! На самом деле всё гораздо проще, чем кажется на первый взгляд. Я дал вам максимум вариантов (избыточную информацию), чтобы вы понимали, как это устроено под капотом.
В реальной работе вы выберете один удобный для вас способ и будете использовать его на автомате. В дальнейших практических уроках мы будем постоянно повторять эти приемы, и вы увидите, что в импорте и экспорте нет ничего страшного. Просто смотрите, практикуйтесь, и всё встанет на свои места!

https://github.com/RuslanTissen/SPA-videos/tree/main/Modules-1
Что такое Node.js и NPM? Инициализация проекта и настройка package.json.10:44
Как устанавливать пакеты NPM? Разбор node_modules, .gitignore и Moment.js.16:13
NPM Scripts: Как автоматизировать рутину и развернуть любой проект с GitHub6:55
Транспирация: Зачем нам Babel и что происходит с кодом под капотом.12:10
Что такое Бандлинг кода? Зачем нужен Webpack?11:14

Requirements

Базовое понимание HTML и CSS (селекторы, классы, ID).
Установленный редактор кода (желательно VS Code).
Желание разобраться, как код влияет на бизнес-задачи и скорость разработки.

Description

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

Наша цель — помочь вам ответить на главный вопрос: «Программирование — это моё или нет?»

ЧТО МЫ СДЕЛАЕМ ЗА ВЫХОДНЫЕ?

Курс построен по принципу «минимум теории, максимум фана»:

1. Быстрый старт: Настроим инструменты за 10 минут и сразу начнем писать код.

2. Оживим страницу: Разберемся, как JavaScript управляет элементами на экране (DOM) без заумных терминов.

3. Потрогаем React: Вручную соберем проект на самом популярном фронтенд-фреймворке в мире, чтобы вы поняли, как работают настоящие приложения.

КУРС ЗАКОНЧИТСЯ, НО МЫ ВАС НЕ БРОСИМ

Этот короткий интенсив — лишь входная дверь в мир разработки. Мы в DevHotSpot против скучного одиночного обучения по записанным лекциям. Мы строим живое инженерное сообщество.

Как продолжить развиваться с нами после выходных:

1. Загляните в профиль автора здесь, на Udemy — там прикреплены официальные ссылки на наши ресурсы.

2. Вбейте в поиске в сети DevHotSpot, найдите наше живое комьюнити и подписывайтесь на открытые материалы.

3. Внутри сообщества мы проводим разборы кода, живые сессии, помогаем решать сложные архитектурные затыки и ведем ребят до уровня Junior++ и первых заказов.

ДЛЯ КОГО ЭТОТ КУРС?

• Для тех, кто сомневается и хочет «пощупать» код руками перед тем, как покупать дорогие обучения.

• Для новичков, которым нужен быстрый, понятный и интерактивный старт в вебе.

• Для всех, кто ценит системный подход и хочет развиваться в кругу единомышленников.

Об авторе:

Руслан Тиссен — разработчик, ментор и основатель экосистемы DevHotSpot. Сторонник строгого, инженерного подхода к обучению. Без воды — только то, что работает на практике.

Выделите себе одни выходные, чтобы изменить карьеру. Ждем вас на первом уроке!

Who this course is for:

Новички, которые хотят выучить JavaScript правильно, без «каши» в голове.
Frontend-разработчики, желающие понять внутреннее устройство React.
Те, кто ценит системный подход и хочет подготовиться к серьезной работе в команде

JS за выходные: твоё или нет? Frontend, React [DevHotSpot]

What you'll learn

Explore related topics

Course content

Окружение и основы манипуляции DOM.11 lectures • 39min

Архитектура DOM, Узлы (Nodes) и работа с API.8 lectures • 1hr 5min

Интерактивный UI: Обработка событий и валидация форм.11 lectures • 1hr 13min

Продвинутый JS: Чистая архитектура, ES6-модули и сборка проекта.11 lectures • 1hr 54min

Requirements

Description

Who this course is for: