Udemy / Ruslan Tissen - JavaScript с нуля: Практический Frontend и основы SPA

От основ DOM и селекторов до ручной сборки React-проекта. Научитесь писать чистый код, который ценит бизнес

Этот курс — ваш путь от понимания того, как работает браузер, до создания архитектуры современного Single Page Application (SPA). Мы начинаем с «азов» jаvascript и фундаментальных основ DOM, постепенно переходя к профессиональной разработке на React.

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

Курс построен на практическом подходе «от простого к сложному»:

Инструментарий и база: Настроим окружение, научимся мастерски владеть терминалом и VS Code, чтобы ваша работа была быстрой и эффективной.

Манипуляции с DOM: Вы научитесь «прицеливаться» к любым элементам на странице, используя современные селекторы, и поймете разницу между актуальными методами и «старой школой» (Window, Prompt).

Чистота кода: Разберем, зачем разбивать проект на блоки и компоненты и как организовать структуру файлов так, чтобы через год вы могли вернуться к коду и понять его за минуту.

Погружение в React: Мы не будем использовать готовые шаблоны. Мы вручную соберем React-проект, детально изучив структуру папок public и src, чтобы вы понимали каждое звено в вашем приложении.

Чему вы научитесь:

Искать и манипулировать любыми элементами на странице с помощью querySelector и getElementById.

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

Понимать разницу между современными стандартами и «старой школой» (Window, Prompt, глобальные объекты).

Настраивать профессиональное окружение разработчика: терминал, VS Code и расширения.

Создавать React-проекты вручную, понимая назначение папок public, src и структуру SPA.

Применять философию «время — деньги бизнеса», оптимизируя написание кода.

Программа:

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

Как развернуть проект за 5 минут: Настройка VS Code и терминала.

Зачем разбивать код на компоненты? Объект Window и секреты чистой архитектуры.

Как правильно искать элементы в DOM: Разница querySelector vs querySelectorAll.

Сложные CSS-селекторы в jаvascript: Как прицелиться к любому элементу по ID.

querySelector vs getElementById: Что быстрее и в чем разница.

Навигация в консоли: Как читать DevTools и быстро находить ошибки в коде.

Продвинутый логинг в консоли: Сокращенный синтаксис объектов ES6.

Как изменять CSS стили через jаvascript: Правило camelCase и частые ошибки.

Первая интерактивность на JS: Как связать ввод пользователя и CSS стили.

Первое сложное ДЗ: Перебор элементов через forEach и метод «озарения».

Архитектура DOM: Концепция API и визуализация структуры проекта.

Архитектура DOM, Узлы (Nodes) и работа с API.

Узлы и элементы в DOM: Свойство nodeName и почему автосохранение вредит коду.

Почему HTMLCollection ломает код? parentElement и превращение в массив.

DOM-навигациия: Методы matches, closest и ловушка previousSibling.

Скрытые проблемы textContent: Работа с текстом в DOM и Template Literals.

Свойство innerHTML: Как динамически менять HTML и не поймать XSS-атаку.

Управление классами через classList: Методы add, remove и секрет toggle.

Асинхронность для новичков: Как работают setTimeout, setInterval и console.table.

Вся правда про Soft Skills: Почему софт-скиллы важнее чистого кода.

Интерактивный UI: Обработка событий и валидация форм.

Интерактивность: Основы addEventListener и типы событий (Click, Focus, Blur).

Элегантный код: Почему classList.toggle() лучше, чем условия If/Else.

DOM: Свойства parentElement, nextElementSibling и основы Problem Solving.

Секреты Event Object: Что скрывает аргумент (e) и как работает e.target.

Перехват ввода: Как работает KeyboardEvent в keydown и зачем это нужно в React.

Жизненный цикл страницы: Вся правда о DOMContentLoaded и блокировке парсинга.

Как работать с легаси-кодом? Инлайновые события vs современные стандарты.

Работа с формами: Специфические события, опасность тега reset и шаг к SPA.

Перехват поведения браузера: Как укротить e.preventDefault() и функцию confirm().

Событие Submit: Отправка данных на сервер и основы валидации.

Событие change: Динамическое управление атрибутами и интерактивные чекбоксы.

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

Жизненный цикл события: Всплытие (Bubbling) и Погружение (Capturing) в DOM.

Почему stopPropagation() это плохая практика? Обратная сторона всплытия событий.

Делегирование событий: Паттерн «Заставим работать родителя» и свойство nodeName.

Чистая архитектура: Зачем нужны модули и как работает изоляция кода в JS.

Модули в ES6: В чем разница между Named export и Default export?

Лабораторная работа: Экспорт стрелочных функций и тонкости ES6 Modules.

Что такое Node.js и NPM? Инициализация проекта и настройка package.json.

Как устанавливать пакеты NPM? Разбор node_modules, .gitignore и Moment.js.

NPM Scripts: Как автоматизировать рутину и развернуть любой проект с GitHub.

Транспирация: Зачем нам Babel и что происходит с кодом под капотом.

Что такое Бандлинг кода? Зачем нужен Webpack?