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

Складчина: Фронтенд-разработчик [Тариф Все сам] [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. Поиск заказчиков и работы
Поиск работы
Поиск заказчиков

Спойлер: Подробно:

Раздел 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. Что делать дальше

Эпилог

Тариф Все сам
Цена 32990 руб
Скрытая ссылка