Открыто

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

Тема в разделе "Курсы по программированию", создана пользователем Топикстартер, 22 июн 2026 в 14:49.

Основной список: 1 участников

  1. 22 июн 2026 в 14:49
    #1
    Топикстартер
    Топикстартер ЧКЧлен клуба

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

    Screenshot_5.png

    Этот курс — ваш путь от понимания того, как работает браузер, до создания архитектуры современного Single Page Application (SPA). Мы начинаем с «азов» JavaScript и фундаментальных основ 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-селекторы в JavaScript: Как прицелиться к любому элементу по ID.
    • querySelector vs getElementById: Что быстрее и в чем разница.
    • Навигация в консоли: Как читать DevTools и быстро находить ошибки в коде.
    • Продвинутый логинг в консоли: Сокращенный синтаксис объектов ES6.
    • Как изменять CSS стили через JavaScript: Правило 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?
    Цена 745 руб. (9.99 долларов)
    Скрытая ссылка
     
    1 человеку нравится это.
  2. Последние события

    1. dimbos_s
      dimbos_s участвует в складчине.
      23 июн 2026 в 21:29