Фронтенд-разработчик от Glo Academy

Длительность, на которую рассчитан курс изначально — от 7 до 10 месяцев, но в зависимости от тарифа можно проходить дольше. На этом курсе вы научитесь разрабатывать сайты, используя современные технологии, освоите программирование на JavaScript и научитесь работать с фреймворком Vue.js и React.js.

Почему набор именно такой: разработка сайтов — самый простой способ попасть в IT-сферу и иметь перспективы роста. Когда-то хватало знаний HTML/CSS, чтобы получить работу, но сейчас чаще всего их недостаточно. А если и достаточно — то для невысокой зарплаты. А зачем идти на невысокую, когда за дополнительные 3 месяца учёбы повысить свои навыки, шансы на трудоустройство и увеличить стартовую зарплату в 2-3 раза?

Второй этап — язык программирования JavaScript. Он — основа работы во фронтенд-разработке. Без него сайты были бы просто статичными картинками без функционала. С ним — сайты умеют реагировать на поведение посетителя на странице, выполнять разные запланированные действия в зависимости от того, что сделал человек на странице.

Третий этап — фреймворк Vue.js. Фреймворк — это набор инструментов, который облегчает и ускоряет разработку продуктов. В данном случае — ускоряет разработку на JavaScript. А там, где ускорение — там более разнообразная работа для разработчика с интересными задачами и более выгодная для работодателя, который может получить больше готовых продуктов за то же время. Кроме того, знание фреймворка увеличивает шансы на трудоустройство в 2 раза, как и стартовую зарплату новичка.

Дальше — программы каждого блока: разработки сайтов, JavaScript, Vue.js, React.js.

Первая ступень: Разработка сайтов

Научитесь создавать сайты с помощью языков HTML, CSS и JavaScript за 8 недель с упором на практику

Раздел 1. Профессия разработчик сайтов

• Какие сайты бывают
• Кто делает сайты и сколько это стоит
• Этапы разработки сайта
• Инструменты разработчика

Раздел 2. Техническая часть и практика

• Рабочее окружение
• Разметка HTML
• Стили CSS
• Скрипты JavaScript
• Хранение кода и запуск сайта
• Тестирование сайта
• Движки сайтов

Раздел 3. Поиск заказчиков и работы

• Поиск работы
• Поиск заказчиков

Программа блока JavaScript

Блок 1. Основы JavaScript.

Зачем: Чтобы знать как работает этот язык изнутри и что на нем вообще можно сделать. Основы также нужны, чтобы быть готовым к простым вопросам на собеседовании.

• Урок 1. Введение в язык, подключение javascript. Правила написания кода
• Урок 2. Типы данных, операторы, методы и свойства.
• Урок 3. Динамическая типизация данных в Javascript. Условия, ветвления.
• Урок 4. Функции, анонимные функции, callback — функции, чистые функции
• Урок 5. Циклы. Рекурсия.
• Урок 6. Функции. Область видимости и замыкание.
• Урок 7. Знакомимся с объектами и массивами, методы переборов и псевдомассивы
• Урок 8. Подготовим наш проект для работы со страницей

Результат: Изучите основы JavaScript, необходимы чтобы двигаться дальше. Узнаете как строится архитектура программы используя объектно-ориентированное программирование. Придет понимание как работает JavaScript будете готовы к изучать API браузера и ООП.

Блок 2. ООП, JavaScript на практике.

Зачем: Чтобы Научится правильной структуре кода, писать код правильно с первой строчки, научиться работать с веб-страницами.

• Урок 9. Доступ к элементам на странице DOM (часть 1). Отладка кода
• Урок 10. Работа с DOM, работа с элементами DOM (часть 2)
• Урок 11. Загрузка документа, События в JS, обработчики событий и особенности их работы, события мыши и клавиатуры.
• Урок 12. Storage. localStorage, sessionStorage, cookie
• Урок 13. Контекст вызова — this
• Урок 14. ООП — Наследование, прототипы, конструкторы и классы
• Урок 15. Особенности современного стандарта ES6 Шаблонные строки,интерполяция, Стрелочные функции, Геттеры, Сеттеры и Классы
• Урок 16. ООП ES6+. Rest, spread, Деструктуризация, Коллекции Map и Set
• Урок 17. Способы перебора массивов

Результат: Изучишь ООП, Написанный и полностью готовый таймер для сайта на JS. Ты сможешь манипулировать содержимым страницы браузера, писать анимации, наконец-то поймешь, что такое этот this.

Блок 3. Углубленное изучение JavaScript. Современные стандарты и дополнительные технологии

Зачем: чтобы уметь отлавливать свои ошибки в коде, изменять содержимое страницы без перезагрузки, работать с данными форм, и использовать современные технологии существующие на основе JavaScript.

• Урок 18. Настраиваем сборщик Webpack. Модульный JavaScript
• Урок 18. Скрипты и время выполнения. setTimeout, setInterval и requestAnimationFrame. Объект Date. Пишем таймер
• Урок 19. Параметры документа, окна и работа с ними. Пишем Меню и Модальное окно
• Урок 20. Делегирование. Пишем Табы
• Урок 21: Пишем Слайдер (делегирование)
• Урок 22. Работа с атрибутами, Дата Атрибуты. Регулярные выражения
• Урок 23: Пишем калькулятор
• Урок 24. Работа с формами и валидация
• Урок 25. Работа с JSON, AJAX. Получение и отправка данных на сервер.
• Урок 26. try..catch — перехват ошибок
• Урок 27. Асинхронный JS. Promise. Контекст выполнения, асинхронное выполнение, стек вызовов и event loop.
• Урок 28. Подробно про Fetch API

Результат: Готовый скрипт — обработчик формы обратной связи. Постигнешь асинхронный JavaScript, Promise, Fetch Узнаешь последние тренды JavaScript. Изучишь современные технологии сборки проектов. Научишься делать свой код кроссбраузерным.

+ уроки по анимация JS, Observer, TypeScript и форматированию Intl

Дипломный проект в конце курса

Программа курса Vue

Курс построен так, чтобы разобраться во фреймворке Vue.js на реальном проекте, который после курса вы сможете положить в своё портфолио.

• Урок 1 Создание первого приложения Vue.JS
• Урок 2 Вывод первых данных на страницу. Компонентный подход
• Урок 3 Роутинг приложения. Vue-router.
• Урок 4 Состояние компонента. Объекты data, computed.
• Урок 5 Передача аргументов в компонент. Объект props.
• Урок 6 Директивы, циклы, условия, динамические стили и классы.
• Урок 7 Обработчики событий v-on. Объект methods. Жизненный цикл компонента.
• Урок 8 Vuex. Работа с геттерами и сеттерами.
• Урок 9 Динамические страницы
• Урок 10 Работа с формами. Валидация полей. Vuelidate
• Урок 11 JSON-server, получение данных, сохранение данных.
• Урок 12 Поиск. Фильтрация

Результат: Изучите основы фреймворка Vue.JS. Узнаете что такое компонентный подход. Научитесь создавать динамические реактивные приложения. Поработаете с получением и отправкой данных на сервер. Создадите интернет-каталог для собственного портфолио.

Программа курса React

Курс состоит из коротких видеоуроков, которые легче воспринимать, чем долгие практические обучалки на 30-40 минут. На блоке по JS удобнее объяснять более крупными кусками, на React — более мелкими. Уроки короче, поэтому их так много. Суммарно курс рассчитан на 2 месяца изучения.

Модуль 1. Библиотека React. Базовый уровень

• Урок 1. Введение
• Урок 2. Что такое реакт, зачем он нам и почему не обычный JS
• Урок 3. Фундаментальные принципы Реакта
• Урок 4. Create React App — создаем свое приложение
• Урок 5. Работаем с JSX-препроцессором, ограничения в нем
• Урок 6. Элементы и компоненты
• Урок 6.5 Строгий режим
• Урок 7. Начнем создавать проект
• Урок 8. Свойства компонентов
• Урок 9. Практика на проекте и дз
• Урок 9.5 Работа со списками и алгоритм согласования
• Урок 10. Состояния компонентов
• Урок 11. Задание с состояниями
• Урок 12. События в React и вспоминаем this
• Урок 13. Практика и дз
• Урок 14. Работа с формами и её элементами
• Урок 15. Практика. Иммутабельность состояния и собственные события
• Урок 15. Практика. Подъём состояния
• Урок 16. React-фрагменты
• Урок 16.5 Практика. Реализуем поиск и фильтры
• Урок 17. Семантика и доступность контента
• Урок 18. Стили в React. Inline Styles
• Урок 19. Стили в React. CSS и SASS/SCSS
• Урок 20. Стили в React. Динамические классы и стили
• Урок 21. Стили в React. Styled Components
• Урок 22. Стили в React. Готовые библиотеки компонентов со стилями
• Урок 23. Поля классов (уже не новый синтаксис)
• Урок 24. Заключение модуля

Модуль 2. Библиотека React. Средний фундаментальный уровень

• Урок 26. Что такое API и как работают реальные приложения
• Урок 27. Новый проект и работа с сервером
• Урок 27.5 Трансформация данных и случайный компонент
• Урок 28. Хороший тон приложения
• Урок 29. Жизненный цикл компонентов
• Урок 30. Практика
• Урок 31. Предохранители (Error Boundaries)
• Урок 32. Пагинация данных
• Урок 33. Тест
• Урок 34. Проверка типов с помощью PropTypes
• Урок 35. Вставка элементов через props.children
• Урок 36. Дополнительно: Специализация и наследование
• Урок 36.5 render-props
• Урок 37. Что такое ref и зачем он нужен
• Урок 38. Порталы
• Урок 39 “бандлинг” и выгрузка на сервер проекта

Модуль 3. Библиотека React. Хуки и средний продвинутый уровень

• Урок 40. Введение в хуки
• Урок 41. UseState
• Урок 42. UseEffect
• Урок 43. UseCallback
• Урок 44. UseMemo
• Урок 45. UseRef
• Урок 46. Практика. Перепишем весь проект на хуки
• Урок 47. Создание собственных хуков
• Урок 48. Практика
• Урок 48.1 Что такое batching и как он работает в React 18+
• Урок 48.2 useTransition, useDeferredValue и другие нововведения React 18+
• Урок 49. Навигация в приложении, React Router
• Урок 50. Практика
• Урок 51 Динамические импорты и React.lazy
• Урок 51 React.memo, Pure Component и оптимизация скорости работы приложения
• Урок 51.5. React Context и useContext
• Урок 51.6. useReducer
• Урок 51.7. Дополнительно: компоненты высшего порядка
• Урок 52. Дополнительные библиотеки и экосистема React
• Урок 53. React Transition Group
• Урок 54. Formik
• Урок 55. SEO in React. React-helmet
• Урок 57. Итог модуля

Модуль 4. Библиотека React. Тестирование

• Урок 58. Зачем вообще нужно тестирование и основы
• Урок 59. Фреймворк Jest
• Урок 60. Практика написания тестов
• Урок 61. Дебаггинг приложения

Модуль 5. Библиотека Redux

• Урок 62. Основные принципы Redux. Теория
• Урок 63. Основные принципы Redux. Практика
• Урок 64. Чистые функции
• Урок 65. Оптимизация через actionCreators и bindActionCreator
• Урок 66. Добавим React в проект
• Урок 67. Соединяем React и Redux при помощи connect
• Урок 68. Соединяем React и Redux при помощи хуков
• Урок 69. Redux devtools
• Урок 70. Правило названия action и домашнее задание (мини-экзамен)
• Урок 71. Разбор самых сложных моментов
• Урок 72. Комбинирование reducers и красивые селекторы. CreateSelector()
• Урок 73. Про сложность реальной разработки
• Урок 74. Store enhancers
• Урок 75. Middleware
• Урок 76. Redux-thunk
• Урок 77. Redux Toolkit: configureStore()
• Урок 78. Redux Toolkit: createAction()
• Урок 79. Redux Toolkit: createReducer()
• Урок 80. Redux Toolkit: createSlice()
• Урок 81. Redux Toolkit: createAsyncThunk()
• Урок 82. Redux Toolkit: createEntityAdapter()
• Урок 83. Про разные структуры проектов и закрепление материала
• Урок 84. Redux Toolkit: RTK Query
• Урок 85. Что делать дальше. Эпилог