«Фронтенд-разработчик с уклоном в фуллстек [Тариф Все сам] [Glo Academy]» [Артем Исламов, Александр Ильясов]

Длительность, на которую рассчитан курс изначально — от 7 до 10 месяцев, но в зависимости от тарифа можно проходить дольше. На этом курсе вы научитесь разрабатывать сайты, используя современные технологии, освоите программирование на JavaScript и научитесь работать с фреймворком Vue.js и React.js, а затем строить бэкенд на Node.js Почему набор именно такой: разработка сайтов — самый простой способ попасть в IT-сферу и иметь перспективы роста. Когда-то хватало знаний HTML/CSS, чтобы получить работу, но сейчас чаще всего их недостаточно. А если и достаточно — то для невысокой зарплаты. А зачем идти на невысокую, когда за дополнительные 3 месяца учёбы повысить свои навыки, шансы на трудоустройство и увеличить стартовую зарплату в 2-3 раза? Второй этап — язык программирования JavaScript. Он — основа работы во фронтенд-разработке. Без него сайты были бы просто статичными картинками без функционала. С ним — сайты умеют реагировать на поведение посетителя на странице, выполнять разные запланированные действия в зависимости от того, что сделал человек на странице. Третий этап — фреймворк Vue.js. Фреймворк — это набор инструментов, который облегчает и ускоряет разработку продуктов. В данном случае — ускоряет разработку на JavaScript. А там, где ускорение — там более разнообразная работа для разработчика с интересными задачами и более выгодная для работодателя, который может получить больше готовых продуктов за то же время. Кроме того, знание фреймворка увеличивает шансы на трудоустройство в 2 раза, как и стартовую зарплату новичка. Помимо этого вы освоите Node.js, научитесь писать на нём бэкенд и сможете претендовать на позиции не только фронтендера, но и фуллстек-разработчика. Дальше — программы каждого блока: разработки сайтов, JavaScript, Vue.js, React.js, Node.js Первая ступень: Разработка сайтов Научитесь создавать сайты с помощью языков HTML, CSS и JavaScript за 8 недель с упором на практику Раздел 1. Профессия разработчик сайтов Какие сайты бывают Кто делает сайты и сколько это стоит Этапы разработки сайта Инструменты разработчика Раздел 2. Техническая часть и практика Рабочее окружение Разметка HTML Стили CSS Скрипты JavaScript Хранение кода и запуск сайта Тестирование сайта Движки сайтов Раздел 3. Поиск заказчиков и работы Поиск работы Поиск заказчиков Подробно: Раздел 1. Профессия разработчик сайтов Какие сайты бывают — Одностраничники Landing Pages — Сайты-визитки и таплинки — Интернет-магазины — Веб-приложения и сервисы Кто делает сайты и сколько это стоит — Копирайтер — Дизайнер и Арт-директор — Верстальщик / фронтенд-разработчик — Бэкэнд-разработчик — SEO-специалист — Администратор Этапы разработки сайта — Прототипирование — Дизайн-макет — Верстка + фронтенд — Бэкенд + базы данных — Наполнение и управление — Продвижение Инструменты разработчика — HTML, CSS, JavaScript — React, Vue.js, Angular и др. — Тильда, Wix и др. — Webflow Раздел 2. Техническая часть и практика Рабочее окружение — Редактор дизайн-макетов Figma — Редактор кода Visual Studio Code — Плагины для быстрой работы — Профиль Github Разметка HTML — Структура документа — Семантические теги — Заголовки — Абзацы — Списки — Выделение текста — Ссылки — Изображения — Кнопки — Формы Стили CSS — Работа с текстом: шрифты, декорирование — Работа с цветом: фон, текст, графика — Блочная модель страницы: flexbox — Позиционирование — Работа с библиотеками: bootstrap, Tailwind — Препроцессоры стилей: SASS/SCSS — Адаптивная верстка — Pixel Perfect — Состояния и псевдоэлементы — Анимация в CSS Скрипты JavaScript — Подключение скриптов — Синтаксис языка — Переменные — Функции — Типы данных — Операторы — Циклы — Библиотеки JavaScript — Общение с сервером JSON — DOM/BOM Хранение кода и запуск сайта — Покупка и оформление домена — Покупка и подключение хостинга — Настройка сайта на хостинге — SSL сертификат — FTP доступ на сайт — Github репозиторий — Github Pages — Push, Pull Request — Работа по HTTPS, SSH — Ветки, изменения, откаты Тестирование сайта — Скорость загрузки сайта — Семантичность и валидация — Google Developer Tools — Тесты на устройствах Движки сайтов — Простая админка статичных сайтов — Wordpress — самый популярный движок Раздел 3. Поиск заказчиков и работы Поиск работы — Профиль разработчика на Github — Резюме на HeadHunter — Сопроводительное письмо — Отклики на вакансии — Собеседования и тестовые задания Поиск заказчиков — Профили в соцсетях — Фриланс-биржи — Холодные рассылки — Партизанский маркетинг — Общение с заказчиками — Сайт-портфолио Программа блока JavaScript Блок 1. Основы JavaScript. Зачем: Чтобы знать как работает этот язык изнутри и что на нем вообще можно сделать. Основы также нужны, чтобы быть готовым к простым вопросам на собеседовании. Блок 2. ООП, JavaScript на практике. Зачем: Чтобы Научится правильной структуре кода, писать код правильно с первой строчки, научиться работать с веб-страницами. Блок 3. Углубленное изучение JavaScript. Современные стандарты и дополнительные технологии Зачем: чтобы уметь отлавливать свои ошибки в коде, изменять содержимое страницы без перезагрузки, работать с данными форм, и использовать современные технологии существующие на основе JavaScript. + уроки по анимация JS, Observer, TypeScript и форматированию Intl Подробно: Блок 1. Основы JavaScript. Зачем: Чтобы знать как работает этот язык изнутри и что на нем вообще можно сделать. Основы также нужны, чтобы быть готовым к простым вопросам на собеседовании. Урок 1. Введение в язык, подключение javascript. Правила написания кода Основы работы с Git. Урок 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 на реальном проекте, который после курса вы сможете положить в своё портфолио. Необходимые навыки: – Базовые знания HTML, CSS – Препроцессор SASS/SCSS – Базовые знания JavaScript Необходимые инструменты: – Редактор кода VScode (либо любой удобный) – Среда разработки Node.JS Урок 1. Создание первого приложения Vue.JS. Ознакомление с архитектурой. Урок 2. Вывод первых данных на страницу. Компонентный подход. Работа со стилями. - Практика. Создание компонентов Header и Footer Урок 3. Роутинг приложения. Vue-router. - Практика. Настройка роутинга приложения. Вывод статической информации каждой страницы. Урок 4. Состояние компонента. Объекты data, computed. - Практика. Работа с состоянием компонента. Урок 5. Передача аргументов в компонент. Объект props. - Практика. Создание универсального компонента карточки товара. Урок 6. Директивы, циклы, условия, динамические стили и классы. - Практика. Динамический вывод карточек товара. Урок 7. Обработчики событий v-on. Объект methods. Жизненный цикл компонента. - Практика. Работа с обработкой событий. Урок 8. Vuex. Работа с геттерами и сеттерами. - Практика. Перенос данных товара во внутреннее хранилище store. Урок 9. Composition API. Объект setup. - Практика. Меняем подход с Options API на Composition API. Урок 10. Pinia. - Практика. Подключаем Pinia к проекту Урок 11. Динамические страницы. - Практика. Реализация страницы товара. Урок 12. Работа с формами. Валидация полей. Vuelidate. - Практика. Валидация формы обратной связи. Урок 13. JSON-server. - Практика. Получение данных с сервера и вывод ее на страницу. Урок 14. Поиск. Фильтрация. - Практика. Реализация поиска и фильтрации товара. Урок 14. Панель администратора - Практика. Настраиваем админку для сайта. Добавление/Удаление/Редактирование товара. Урок 15. Защита роутинга. - Практика. Настраиваем защиту роутинга для админ-панели Урок 16. VueFire. - Практика. Работа с БД Firebase на Vue 3. Урок 17. Деплой приложения на Git Pages Урок 18. Фичи Vue 3 Результат: Изучите основы фреймворка Vue.JS. Узнаете что такое компонентный подход. Научитесь создавать динамические реактивные приложения. Поработаете с получением и отправкой данных на сервер. Создадите интернет-каталог для собственного портфолио. Программа курса React Курс состоит из коротких видеоуроков, которые легче воспринимать, чем долгие практические обучалки на 30-40 минут. На блоке по JS удобнее объяснять более крупными кусками, на React — более мелкими. Уроки короче, поэтому их так много. Суммарно курс рассчитан на 2 месяца изучения. Модуль 1. Библиотека React. Базовый уровень Модуль 2. Библиотека React. Средний фундаментальный уровень Модуль 3. Библиотека React. Хуки и средний продвинутый уровень Модуль 4. Библиотека React. Тестирование Подробно: Модуль 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 swittc 404 etc Урок 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 добавить и делать запросы к json-server про редакс-форм Урок 55. SEO in React. React-helmet Урок 57. Итог модуля Модуль 4. Библиотека React. Тестирование Урок 58. Зачем вообще нужно тестирование и основы проговорить, что тема очень индивидуальная Урок 59. Фреймворк Jest Урок 60. Практика написания тестов и рассказать про Enzyme и другие Урок 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. Что делать дальше Эпилог Программа блока Node.js Тема 0. Подготовка рабочего пространства Тема 1. Введение в Node.js Тема 2. REPL, Модули, Пакеты Тема 3. NPM и package.json Тема 4. События и EventEmitter Тема 5. Файловая система (fs) Тема 6. Buffer и Stream Тема 7. Process и Readline Тема 8. CLI‑приложения Тема 9. Модули OS и Path, Публикация пакетов Тема 10. HTTP‑сервер и HTTP‑клиент Тема 11. HTTPS, Заголовки HTTP, ENV Тема 12. Сжатие и crypto Тема 13. Разработка REST API Тема 14. Работа с базой данных (PostgreSQL) Тема 15. Загрузка файлов на сервер Тема 16. Деплой приложения Подробно: Тема 0. Подготовка рабочего пространства Установка необходимых инструментов (VS Code, плагины, Git, Insomnia) Установка Node.js (Windows, macOS, Linux) Конфигурация EditorConfig, ESLint, Prettier Работа с GitHub (Опционально) Установка Linux в виртуальной машине Тема 1. Введение в Node.js Область применения Node.js Архитектура Node.js, Event Loop, V8 Тема 2. REPL, Модули, Пакеты REPL и основы командной строки Модульная система CommonJS и ES Modules Управление пакетами в Node.js Тема 3. NPM и package.json Структура и конфигурация package.json Семантическое версионирование Работа с зависимостями для продакшена и разработки Тема 4. События и EventEmitter Принцип работы событий в Node.js Класс EventEmitter и создание пользовательских событий Тема 5. Файловая система (fs) Работа с файлами и папками Асинхронные и синхронные операции Основные методы (stat, appendFile и др.) Тема 6. Buffer и Stream Буферы в Node.js Чтение и запись потоков Конвейеры потоков (pipe) Тема 7. Process и Readline Переменные окружения и аргументы командной строки Организация интерактивного ввода‑вывода с readline Тема 8. CLI‑приложения Разработка CLI‑инструментов на Node.js Обработка команд и аргументов Сохранение данных и файловая структура Тема 9. Модули OS и Path, Публикация пакетов Работа с информацией о системе (os) Манипуляции с путями (path) Публикация пакетов в npm Тема 10. HTTP‑сервер и HTTP‑клиент Создание HTTP‑сервера на встроенном модуле http Парсинг URL и обработка маршрутов Работа с внешними HTTP/HTTPS‑API Тема 11. HTTPS, Заголовки HTTP, ENV Настройка HTTPS‑сервера и SSL‑сертификаты Основные HTTP‑заголовки и MIME‑типы Переменные окружения и конфигурация через .env Тема 12. Сжатие и crypto Сжатие данных с zlib Создание хэшей и шифрование с crypto Тема 13. Разработка REST API Проектирование и реализация REST‑эндпоинтов Клиент‑серверное взаимодействие Тема 14. Работа с базой данных (PostgreSQL) Подключение, запросы и миграции Использование knex или node‑postgres Тема 15. Загрузка файлов на сервер Приём файлов через FormData и base64 Хранение и обработка заг