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