Про закрытый чат, редакторы кода, материалы и ссылки
Не забывайте получить доступ к нашему закрытому чату в телеграме:
Именно там происходит все общение и все остальные мероприятия.
Для получения доступа просто напишите мне в личку свою почту, на которую вы зарегистрировались на сайте: 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 Сек.
- Новый проект и работа с сервером28 мин. 57 Сек.
- Трансформация данных и компонент со случайным персонажем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 Сек.
- 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 Сек.