mullagaliev / front-end-edu

Курс Front-end разработчика

Курс Front-end разработчика

1. Общая информация

1.1 Формат курса

• Продолжительность: около 6 мес. (2 курса примерно по 3 мес.)
• Формат курса: Менторство
• Формат общения:
  1. Голосом через hangouts
  2. Чатом через slack
• Состав группы: 3 чел. (Далее от 6 чел.)

1.2 Цели курса

• Подготовка junior Front-end разработчиков
• Трудоустройство учеников на позицию junior c ЗП от 45 тыс. (после 6 мес.)
• Дать ученикам реальный опыт работы на проекте

1.3 Прочие цели курса

• Создать Front-end часть для внутреннего проекта
• Подготовка менторов из учеников

1.4 Входные требования

• ПК
• Любой браузер
• Любой уровень знаний в IT

2. О курсе

2.1 Список навыков после освоения курса

0. Владение основными инструментами:
   • Редактор кода (Простые, IDE и прочие)
   • Основы работы с терминалом
   • Основы работы с GIT
1. HTML-разметка
2. CSS:
   • Блочная верстка
   • Позиционирование
   • Верстка на flexbox
   • Умение работать с сеткой
   • Адаптивная верстка (или mobile first)
3. HTTP протокол (отправка и получение данных)
4. SEO, доступность
5. Верстка с помощью препроцессоров (На выбор: PostCSS, Sass/Scss, Less)
6. Основы JS:
   • Синтаксис языка
   • Структуры данных
   • Замыкания, область видимости
   • Методы объектов и контекст вызова
   • ООП в JS (в 2-х стилях)
   • Современный JS ES6/ES7
   • Работа с DOM
   • Браузерные API
7. Разработка на React.js:
   • Умение работать с Props и State
   • Создание умных и глупых компонентов (и умение их отличать)
   • Роутинг
   • Создание Styled-components
   • Lifecycle компонентов
   • Работы с HTTP
   • Тестирование компонентов
   • Redux
   • Настройка webpack и деплой на сервер
   • SSR - серверный рендеринг
8. Оптимизация front-end'а (Опционально)

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

Курс состоит из двух частей, примерно по 3 месяца каждый. Первый курс направлен на изучение основ (HTML, CSS, JS, React.js). Вторая часть курса направлена на получение реального опыта работы на проекте и создания портфолио.

2.2.1 Часть первая (Теория + практика)

0. Освоение работы с основными инструментами:
   • Установка и настройка инструментов
   • Основные команды terminal'a
   • Создание аккаунта на githb
   • Изучение основных команд git
   • Создание перового репозитория
1. HTML-разметка:
   • Создание первой HTML страницы
   • Изучение основных HTMl тегов и их отличия
   • Блочная модель
   • Что такое семантика?
   • Вводный урок по SEO и доступности
   • Рассказ об аттрибутах HTML тегов
2. CSS:
   • Введение в стилизацию HTML
   • История способов верстки (статья)
   • Первые стили
   • Стилизация элементов HTML страницы:
     • Вид элементов страницы с точки зрения отображения
     • Позиционирование
     • Верстка на flexbox
     • Создание сетки (+ урок по Bootstrap)
     • Медиа теги и Адаптивная верстка
3. HTTP протокол
   • История интернета
   • Отличия протоколов
   • Виды HTTP запросов и их отличия
   • Способы отправки данных
   • Работа с формами
4. SEO, доступность
   • Что будут требовать сеошники?
   • Что будут требовать люди с плохим зрением?
5. Верстка с помощью препроцессоров:
   • Обзор препроцессоров (PostCSS, Sass/Scss, Less)
     • Отличия
     • Что сейчас актуально?
   • Изучение одного из препроцессоров:
     • Способы компиляции
     • Переменные
     • Основные операторы
     • Миксины
     • Верстка по BEM
6. Основы JS:
   • Основы JavaScript
   • Структуры данных
   • Замыкания, область видимости
   • Методы объектов и контекст вызова
   • ООП (в 2-х стилях)
   • Современный js ES6/ES7
7. Разработка на React.js:
   • Как внедрить HTML верстку в проект на React.js
   • Что такое Props и State?
   • Создание умных и глупых компонентов и их отличия
   • Создание роутинга в приложении/сайте
   • Создание Styled-components
   • Работа с Lifecycle
   • Работы с HTTP (отправка данных)
   • Тестирование компонентов
   • Redux:
     • Введение в Redux
     • Что такое actions, reducers, store и функция dispatch
     • Связывание умных компонентов с хранилищем
   • Настройка webpack и деплой на сервер
   • Введение в SSR - серверный рендеринг

Продолжительность: около 3 мес.

2.2.2 Часть вторая (Практика на реальном проекте)

1. Разбивка на команды по 3-6 чел.
2. Знакомство с backend разработчиками
3. Углубление в работу с git и знакомство с методами деполя больших проектов
4. Введение в реальный процесс front-end разработки:
   • Верстка React компонентов реального проекта (около 2-4 страниц в неделю)
   • Работа с реальным API от backend разработчиков
   • Общение с backend разработчиками для улучщения API
5. Введение в Agile и таск-трекеры
6. Опционально:
   • Общение с реальным заказчиком
   • Углубление в SSR
   • Документирование кода
   • Создание личного сайта + портфолио

Продолжительность: около 3 мес.