Про закрытый чат, редакторы кода, материалы и ссылки
Не забывайте получить доступ к нашему закрытому чату в телеграме:
Именно там происходит все общение и все остальные мероприятия.
Для получения доступа просто напишите мне в личку свою почту, на которую вы зарегистрировались на сайте: https://t.me/ivanpetrychenko
Про редакторы кода, альтернативы
Вы можете использовать абсолютно любой редактор кода или интерактивную среду, которая вам по душе. Никаких ограничений нет и на прохождение курса никак не влияет. Скорее всего у вас уже установлен один из редакторов, вы к нему привыкли и можете продолжать работу в нем.
Тут я приложу еще дополнительные варианты, которые пользуются популярностью и в будущем вы можете их рассмотреть как альтернативы. Если вы только начинаете свой путь в программировании - не стоит тратить на это много времени, а лучше перейти к следующему пункту 🙂
- Atom - (разработчики перестали его поддерживать, но пока оставлю его тут) удобный, интересный, расширяемый текстовый редактор кода. Очень похож на VSCode, если честно. Бесплатный.
- Brackets - все аналогично 🙂
- Sublime Text - некоторые разработчики считают его немного морально устаревшим, хотя по функционалу не уступает своим братьям выше. Есть возможность приобрести платную подписку или использовать бесплатно.
- Vim - специфический редактор, который по душе уже бородатым программистам. Сначала стоит прочитать по нему гайды, прежде чем выбирать его. Бесплатный.
- WebStorm - полноценная IDE, то есть среда разработки со всем необходимым. Содержит много всего и новичку это может показаться излишним. Из-за этого может и медленно работать на слабых компьютерах. Платная, но есть 30-дневный пробный период и различные бесплатные доступы для студентов (ищите варианты в интернете)
Остальные либо поддерживаются на какой-то определенной операционной системе, либо заточены под определенный другой язык программирования. Так что эти самые популярные, используемые, обновляемые и поддерживаются на всех системах.
Учебники
Каждый из нас усваивает информацию по разному. Это из-за особенностей зрительной, слуховой или других видов памяти. Кому-то продуктивнее читать, а потом закреплять информацию видеороликом. Кому-то наоборот, кому-то достаточно урока. Все варианты - это норма. Мы здесь для того, чтобы учиться и освоить определенные навыки, так что все средства хороши.
В уроках будут множество ссылок на дополнительные статьи, документации и тп, но и хорошим дополнением будут учебники. Вы должны понимать, что большинство из них не нацелены на реальную практику. Но дополнительно к видеоурокам там можно закрепить теорию. (В любом случае, вы и так узнаете всю необходимую информацию). Какие из учебников можно рассмотреть:
Современный учебник JavaScript - это веб-учебник, который был переведен с английского на многие языки. Абсолютно бесплатный в формате сайта.
От себя должен сказать, что до последней редакции он мне не очень нравился. Многие моменты были не понятны со стороны новичка, некоторые темы были в неправильном порядке. Но последнее обновление вышло очень подробным и хорошо описывает некоторые детали. Иногда даже слишком подробно.
Из минусов могу отметить разделение учебника на три части: язык js, браузер и отдельные темы. Новичку совершенно не понятно как они связаны, и пока человек пройдет первый раздел - он может уже все бросить так и не дойдя до сути. Многие темы нужно комбинировать и давать в определенном порядке, чтобы сразу видеть результат своей работы.
Ну и то, что почти каждая тема - это отдельный кусок кода, все в месте которые они не складываются в один полноценный проект для практики.
Поэтому вы смело можете открывать отдельные темы в нем, которые мы будем проходить, смотреть там дополнительные примеры и тп. Но читать темы подряд может быть затруднительно.
Книга "JavaScript. Полное руководство", Флэнаган Дэвид
Хороший, большой и платный учебник. Тут хорошо выстроена программа, много примеров и намного больше информации. Иногда даже слишком много и нужно её фильтровать. Ведь все 722 страницы запомнить нереально 🙂
Важно! Нужно брать самое последнее издание учебника. Сейчас это 7е издание 2021го года. В нем все самые последние нововведения языка.
P.S. У меня, автора этого курса на полке лежит как раз такая, только 6е издание.
Серия книг «You Don’t Know JS» - подойдет как начинающим, так разработчикам среднего уровня. Я приложил ссылку на перевод, но есть и в оригинале. Книга написана больше в авторском стиле. Не как учебник, а как именно книга. Так что можно читать её в любой момент времени. Допустим, после прохождения определенных уроков.
Выразительный Javascript - не для новичков, буду говорить честно, но интересная практическая книга. Можете взять её на заметку. Второе издание с переводом в открытом доступе по ссылке.
«JavaScript. Шаблоны» Стоян Стефанов - Очень полезная книга для выхода на следующий уровень, не для новичков. Рекомендую на будущее.
Разные дополнительные полезные вещи я периодически размещаю в своем телеграм-канале по хэштэгу #полезности и другим. Там тоже можно подчерпнуть информацию для новичков.
Короткие обозначения в названиях уроков:
(д) - дополнительные уроки. Это либо более подробное объяснение, либо необязательный материал. Можно просмотреть в ускоренном режиме, позже или сразу промотать в конец для того, чтобы платформа засчитала.
(*) - необязательные задачи или уроки.
(**) - сложные и необязательные задачи или уроки.
❗️- сложные, но крайне желательные к просмотру уроки.
Все материалы и ссылки к урокам расположены в разделе "Ресурсы" под видео:

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

P.S. Интерфейс в мобильном приложении может отличаться
Перед обучением
Потратьте минут 5 на прочтение небольшой вводной главы одного из учебников выше по этой ссылке: тут
Она действительно хороша.
Если вам тяжело ..., не нужно думать о себе плохо. С вами всё в порядке – вам нужно просто продолжать движение. Сделайте перерыв, вернитесь назад – и всегда удостоверяйтесь, что вы прочли и поняли примеры программ. Обучение – это сложная работа, но раз вы что-то выучили, оно уже принадлежит вам, и облегчает дальнейшие шаги.
Что такое JS и как его подключить к странице11 мин. 38 Сек.
Про упражнения и дополнительные уроки5 мин. 44 Сек.
Переменные и строгий режим16 мин.
(д) Правила и типы названия переменных13 мин. 43 Сек.
Упражнение по написанию кода 1: Задание на создание правильных переменных10 мин.
Классификация типов данных в JavaScript16 мин. 21 Сек.
(д) Разница между объектами и массивами и неочевидные синтаксические возможности19 мин. 24 Сек.
Упражнение по написанию кода 2: Задание на создание правильных типов данных15 мин.
Простое общение с пользователем14 мин. 40 Сек.
Интерполяция (ES6)3 мин. 59 Сек.
Операторы в JS14 мин. 30 Сек.
Учимся работать с системой контроля версий Git и с сервисом GitHub25 мин. 7 Сек.
Как работать с GitHub с разных компьютеров, gitignore и Git Kraken15 мин. 52 Сек.
(д) Сетевые протоколы. Подключение компьютера к аккаунту Github через SSH12 мин. 58 Сек.
Практика, ч.1. Начинаем создавать приложение11 мин. 40 Сек.
Условия12 мин. 17 Сек.
(д) Логические операторы33 мин. 23 Сек.
Циклы8 мин. 48 Сек.
(д) Цикл в цикле и метки17 мин. 20 Сек.
Упражнение по написанию кода 3: Задания на использование циклов и условий30 мин.
Упражнение по написанию кода 4: (*) Продвинутые задания на использование циклов и условий30 мин.
Упражнение по написанию кода 5: (**) Задача на формирование фигуры25 мин.
Практика, ч2. Применяем условия и циклы17 мин. 4 Сек.
Функции, стрелочные ф-ции (ES6)20 мин. 15 Сек.
(д) Еще раз про аргументы функций7 мин. 11 Сек.
(д) Про важность return13 мин. 29 Сек.
Упражнение по написанию кода 6: Задание на работу с функциями20 мин.
Методы и свойства строк и чисел19 мин. 31 Сек.
Практика , ч3. Используем функции15 мин. 14 Сек.
Упражнение по написанию кода 7: (*) Продвинутые задания на использование функций35 мин.
Упражнение по написанию кода 8: (*) Продвинутые задания на использование функций30 мин.
Упражнение по написанию кода 9: (**) Задача с собеседований на числа Фибоначчи30 мин.
(д) Метод trim()4 мин. 36 Сек.
Callback- функции7 мин. 24 Сек.
Объекты, деструктуризация объектов (ES6)24 мин. 35 Сек.
Массивы и псевдомассивы23 мин. 50 Сек.
(*) Алгоритмы в целом и в JavaScript1 мин.
Передача по ссылке или по значению, Spread оператор (ES6-ES9)24 мин. 57 Сек.
Упражнение по написанию кода 10: Задачи на работу с объектами40 мин.
Упражнение по написанию кода 11: Задачи на работу с массивами20 мин.
Упражнение по написанию кода 12: Задачи на работу с массивами, часть 225 мин.
Основы ООП, прототипно-ориентированное наследование16 мин. 24 Сек.
Практика , ч4. Используем объекты20 мин. 56 Сек.
Упражнение по написанию кода 13: (*) Продвинутая задача на работу с объектами и массивами25 мин.
Упражнение по написанию кода 14: (*) Продвинутая задача на работу с объектами и массивами20 мин.
Отлавливаем ошибки в своем коде при помощи консоли разработчика. Breakpoints13 мин. 37 Сек.
Динамическая типизация в JS14 мин. 20 Сек.
Замыкание и лексическое окружение30 мин. 36 Сек.
Промежуточный тест на закрепление знаний №140 мин.
Задачи с собеседований на понимание основ17 мин. 55 Сек.
Упражнение по написанию кода 15: Задания на поиск ошибок в коде15 мин.
Получение элементов со страницы18 мин. 17 Сек.
Действия с элементами на странице34 мин. 58 Сек.
Практика. Задание на отработку действий со страницей20 мин. 49 Сек.
События и их обработчики26 мин. 20 Сек.
Навигация по DOM - элементам, data-атрибуты, преимущество for/of15 мин. 39 Сек.
Рекурсия43 мин. 57 Сек.
Упражнение по написанию кода 16: (*) Задача на рекурсию15 мин.
Практика. Используем события на странице проекта32 мин. 46 Сек.
События на мобильных устройствах13 мин. 22 Сек.
Async, defer, динамические скрипты15 мин.
Промежуточный тест на закрепление знаний №240 мин.
Ресурсы для оттачивания навыков программирования8 мин.
Про дополнительную информацию по основам1 мин.
(д) Оператор нулевого слияния (Nullish, ??) ES1112 мин. 56 Сек.
(д) Оператор опциональной цепочки (?.) ES1111 мин. 46 Сек.
(д) Живые коллекции и полезные методы18 мин. 14 Сек.
(д) Тип данных Symbol16 мин. 5 Сек.
(д) Дескрипторы свойств и полезные методы объектов22 мин. 32 Сек.
(*) Итерируемые конструкции21 мин. 7 Сек.
(*) Map26 мин. 36 Сек.
(*) Set11 мин. 37 Сек.
(*) BigInt10 мин. 38 Сек.
Упражнение по написанию кода 17: (**) Сложная задача на вычисление количества страниц15 мин.
Упражнение по написанию кода 18: (**) Сложная задача на работу со строками10 мин.
Упражнение по написанию кода 19: (**) Сложная задача на работу с рекурсией10 мин.
Про что будет этот модуль1 мин. 59 Сек.
ClassList и делегирование событий21 мин. 35 Сек.
Создаем табы в новом проекте22 мин. 19 Сек.
Скрипты и время их выполнения. setTimeout и setInterval21 мин. 28 Сек.
(д) Сборщик мусора и утечки памяти20 мин. 38 Сек.
(*) WeakMap и WeakSet18 мин. 53 Сек.
Работа с датами17 мин. 37 Сек.
Создаем таймер обратного отсчета на сайте25 мин. 29 Сек.
(*) Обработка прошедшей даты3 мин. 44 Сек.
Параметры документа, окна и работа с ними23 мин. 29 Сек.
Создаем модальное окно19 мин. 8 Сек.
Модификации модального окна11 мин. 4 Сек.
(д) MutationObserver, ResizeObserver и contenteditable11 мин. 16 Сек.
Функции-конструкторы10 мин. 36 Сек.
Контекст вызова. This27 мин. 6 Сек.
Классы (ES6)15 мин. 52 Сек.
Где отслеживать информацию о новых стандартах8 мин.
Используем классы в реальной работе18 мин. 58 Сек.
Rest оператор и параметры по умолчанию (ES6)17 мин. 2 Сек.
Тест на закрепление знаний модуля25 мин.
Локальные сервера11 мин. 20 Сек.
JSON формат передачи данных, глубокое клонирование объектов9 мин. 13 Сек.
AJAX и общение с сервером26 мин. 25 Сек.
Реализация скрипта отправки данных на сервер26 мин. 17 Сек.
Красивое оповещение пользователя24 мин. 40 Сек.
Promise (ES6)26 мин. 19 Сек.
Fetch API20 мин. 47 Сек.
Методы перебора массивов28 мин. 59 Сек.
Упражнение по написанию кода 20: Задания на работу с методами массивов25 мин.
Упражнение по написанию кода 21: Задания на работу с методами массивов20 мин.
Подробно про npm и проект. JSON-server18 мин. 38 Сек.
Получение данных с сервера. Async/Await (ES8)32 мин. 44 Сек.
Дополнительно: Что такое библиотеки. Библиотека axios8 мин. 54 Сек.
Создаем слайдер на сайте, вариант 117 мин. 4 Сек.
Создаем слайдер на сайте, вариант 223 мин. 34 Сек.
Создаем навигацию для слайдов15 мин. 50 Сек.
Как сохранить данные без БД. Работа с localStorage16 мин. 28 Сек.
Регулярные выражения23 мин. 48 Сек.
Создаем калькулятор на сайте, часть 132 мин. 22 Сек.
Создаем калькулятор на сайте, часть 218 мин. 23 Сек.
Промежуточный тест на закрепление знаний40 мин.
Геттеры и сеттеры (свойства объектов)5 мин. 8 Сек.
Инкапсуляция20 мин. 20 Сек.
Прием модуль, как и зачем его использовать9 мин. 34 Сек.
Webpack. Собираем наш проект29 мин. 4 Сек.
ES6 Modules10 мин. 38 Сек.
Собираем наш проект и фиксим баги33 мин. 49 Сек.
Формируем портфолио на GitHub8 мин. 13 Сек.
Ошибки. Как избежать “поломки” своего кода11 мин.
(д) Создание своих ошибок10 мин. 27 Сек.
Как превратить код ES6+ в старый формат ES5. Babel, Core.js и полифиллы20 мин. 40 Сек.
Современные библиотеки и фрэймворки19 мин. 58 Сек.
Библиотека Jquery29 мин. 21 Сек.
Функции-генераторы8 мин.
JS анимации, requestAnimationFrame12 мин. 12 Сек.
(*) Web Animations API14 мин. 10 Сек.
Упражнение по написанию кода 22: (**) Сложная задача на понятие композиции функций15 мин.
Event loop, подробная работа асинхронных и синхронных операций23 мин. 13 Сек.
Макро и микрозадачи9 мин. 5 Сек.
Работаем с готовым кодом16 мин. 54 Сек.
Финальный практическо-теоретический тест
Какие проекты можно придумать и реализовать самостоятельно10 мин.
Ваш индивидуальный проект на JS1 мин.
Введение Бесплатно2 мин. 42 Сек.
Что такое реакт, зачем он нам и почему не обычный JS Бесплатно3 мин. 31 Сек.
Фундаментальные принципы Реакта Бесплатно16 мин. 31 Сек.
Create React App - создаем свое приложение13 мин. 36 Сек.
Работаем с JSX-препроцессором, ограничения в нем32 мин. 2 Сек.
Элементы и компоненты26 мин. 7 Сек.
Строгий режим4 мин. 37 Сек.
Strict Mode и React 18+5 мин.
Создание нового проекта43 мин. 39 Сек.
Свойства компонентов13 мин. 3 Сек.
Практика свойств на проекте20 мин.
Работа со списками и алгоритм согласования14 мин. 55 Сек.
Состояния компонентов18 мин. 21 Сек.
Самостоятельное задание на работу с состояниями3 мин. 31 Сек.
События в React и вспоминаем this17 мин. 14 Сек.
Практика состояний на проекте7 мин. 40 Сек.
Работа с формами, управляемые и неуправляемые компоненты10 мин. 26 Сек.
Иммутабельность состояния и собственные события24 мин. 23 Сек.
Практика. Подъём состояния31 мин. 15 Сек.
React-фрагменты5 мин. 4 Сек.
Практика. Реализуем поиск и фильтры36 мин. 55 Сек.
Семантика и доступность контента8 мин. 59 Сек.
Стили в React. Inline Styles5 мин. 39 Сек.
Стили в React. CSS и SASS/SCSS8 мин. 10 Сек.
Стили в React. Динамические классы и стили4 мин. 5 Сек.
Стили в React. Styled Components20 мин. 43 Сек.
Стили в React. Готовые библиотеки компонентов со стилями14 мин. 35 Сек.
Поля классов и static7 мин. 15 Сек.
Заключение модуля2 мин. 18 Сек.
Тест на закрепления знаний модуля30 мин.
Что такое API и как работают реальные приложения12 мин. 9 Сек.
❗️К следующему уроку про Marvel API3 мин. 57 Сек.
Новый проект и работа с сервером28 мин. 57 Сек.
Альтернативный вариант Marvel API2 мин.
Трансформация данных и компонент со случайным персонажем31 мин. 59 Сек.
Хороший тон приложения (спиннер, ошибки...)25 мин. 10 Сек.
Жизненный цикл компонентов23 мин. 51 Сек.
Практика с жизненным циклом, componentDidUpdate38 мин. 36 Сек.
Предохранители (Error Boundaries)18 мин. 31 Сек.
Пагинация данных (дозагрузка персонажей)28 мин. 45 Сек.
Проверка типов с помощью PropTypes7 мин. 18 Сек.
Вставка элементов через props.children18 мин. 41 Сек.
Специализация и наследование4 мин. 1 Сек.
Render-props паттерн13 мин. 25 Сек.
Что такое ref и зачем он нужен20 мин. 23 Сек.
Порталы15 мин. 16 Сек.
“Бандлинг” и выгрузка проекта на сервер28 мин. 4 Сек.
Тест на закрепления знаний модуля30 мин.
Введение в хуки5 мин. 32 Сек.
useState27 мин. 36 Сек.
useEffect22 мин.
useCallback13 мин. 19 Сек.
useMemo14 мин. 17 Сек.
useRef10 мин. 58 Сек.
Практика. Перепишем весь проект на хуки22 мин. 51 Сек.
Создание собственных хуков23 мин. 53 Сек.
Практика собственных хуков на проекте44 мин. 35 Сек.
Что такое batching и как он работает в React 18+11 мин. 49 Сек.
(д) useTransition, useDeferredValue и другие нововведения React 18+15 мин. 50 Сек.
Навигация в приложении, React Router v5+32 мин. 41 Сек.
React Router v6+21 мин. 54 Сек.
Практика создания динамических путей34 мин. 43 Сек.
Динамические импорты и React.lazy26 мин. 12 Сек.
React.memo, Pure Component и оптимизация скорости работы приложения30 мин. 14 Сек.
React Context и useContext33 мин. 47 Сек.
useReducer20 мин. 43 Сек.
Компоненты высшего порядка (HOC)27 мин. 52 Сек.
Библиотеки и экосистема React2 мин. 18 Сек.
Обязательно к следующему уроку2 мин.
React Transition Group44 мин. 19 Сек.
Formik, Yup и работа с формами любой сложности, часть 153 мин. 34 Сек.
Formik, Yup и работа с формами любой сложности, часть 231 мин. 14 Сек.
Разбор домашнего задания14 мин. 43 Сек.
SEO-оптимизация веб-приложений, React-helmet17 мин. 36 Сек.
❗Принцип конечного автомата (FSM, Finite-state machine) и +1 подход к состояниям52 мин. 44 Сек.
Разбираем ошибки сторонних библиотек и проблему с фокусом14 мин. 22 Сек.
Основные принципы Redux. Теория15 мин. 33 Сек.
Основные принципы Redux. Практика35 мин. 5 Сек.
Чистые функции9 мин. 8 Сек.
Оптимизация через actionCreators и bindActionCreator15 мин. 17 Сек.
Добавим React в проект14 мин. 9 Сек.
Соединяем React и Redux при помощи connect24 мин. 36 Сек.
Соединяем React и Redux при помощи хуков17 мин. 14 Сек.
Redux devtools4 мин. 18 Сек.
Правило названия action и домашнее задание (мини-экзамен)27 мин. 24 Сек.
Разбор самых сложных моментов10 мин. 27 Сек.
Комбинирование reducers и красивые селекторы. CreateSelector()28 мин. 19 Сек.
Про сложность реальной разработки1 мин. 35 Сек.
Store enhancers10 мин. 23 Сек.
Middleware9 мин. 58 Сек.
Redux-thunk9 мин. 58 Сек.
Redux Toolkit: configureStore()13 мин. 22 Сек.
Redux Toolkit: createAction()7 мин. 32 Сек.
Redux Toolkit: createReducer()22 мин. 3 Сек.
Redux Toolkit: createSlice()21 мин. 57 Сек.
Redux Toolkit: createAsyncThunk()20 мин. 33 Сек.
Redux Toolkit: createEntityAdapter()36 мин. 23 Сек.
Подводные камни домашнего задания6 мин. 14 Сек.
Про разные структуры проектов и закрепление материала4 мин. 16 Сек.
❗️ Redux Toolkit: RTK Query56 мин. 14 Сек.
Эпилог1 мин. 35 Сек.
Ваш индивидуальный проект на React1 мин.
Вступление к практическому курсу3 мин. 42 Сек.
Настраиваем сборку проекта и разбираемся с ТЗ15 мин. 36 Сек.
Работа с модальными окнами30 мин. 45 Сек.
Работа с табами (вкладками) на странице25 мин. 9 Сек.
Работа с формами отправки данных31 мин. 10 Сек.
Работа с формой-калькулятором, часть 118 мин. 46 Сек.
Работа с формой-калькулятором, часть 238 мин. 54 Сек.
Работа с таймером22 мин. 1 Сек.
Реализуем модуль с показом изображений11 мин. 7 Сек.
Улучшаем наш проект (анимации, правильное поведение overflow)11 мин. 32 Сек.