NAV
Критерии достижения результата

Подготовительная неделя

Знакомство с основными инструментами front-end разработчика.

Computer Science Basics

Знать и понимать:
- составляющие компьютера
- основы двоичной система счисления
- существующие операционные системы
- типы данных и алгоритмы
- основы компьютерных сетей
- инструменты повышения производительности

HTML/Css basic

Знать и понимать:
- основы HTML, текст, элементы и медиаэлементы
- структура HTML дерева
- формы в HTML
- семантика и семантические элементы HTML
- основы CSS (селекторы, наследование)
- стили для текста
- блочные и строчные элементы
- единицы измерения, медиа запросы, анимации
- позиционирование

JS basic

Знать и понимать:
- основы JS (инструкции, арифметика, строки,
синтаксис, переменные, типы данных)
- функции в JS (вызов, объявление, свойства, методы)
- условные конструкции, логические переменные 
и выражениея
- циклы

Неделя №1

Изучение инструментов, настройка рабочего окружения, синтаксис Markdown, базовый HTML/CSS

Basic Git & GitHub

Зарегистрироваться на github
Добавить SSH ключ и авторизоваться с помощью git
Клонировать любой публичный репозиторий с github
Сделать первоначальную настройку гит используя 
  git config
Изучить базовые команды git
Изучить работу с ветками
Изучить требования к коммитам
Запустить репозиторий на GitHub Pages

IDE

Установить VS Code
Создать HTML и CSS файлы в VS Code

Markdown

Изучить синтаксис markdown

Практическое задание №1.1

Выполнить задание по ссылке

HTML/Css Basic. Semantic.

Знать и понимать:
  - структуру документа в HTML
  - тэги и аттрибуты
  - ссылки, изображения, таблицы
  - формы и семантические тэги
Уметь применять семантические тэги на практике

Практическое задание №1.2

Выполнить задание по ссылке

CSS3

Изучить основы CSS
Изучить примеры CSS селекторов
Знать и понимать:
  - как подключить CSS в HTML
  - селекторы CSS
  - специфичность, каскадность и наследование
Попробовать на практике писать CSS селекторы

Практическое задание №1.3

Выполнить задания по ссылкам

CSS positioning and layout (Flex)

Изучить и понимать position, floats, semantic,
  CSS3, основы flexbox layout
Закрепить основные правила flexbox
Попробовать на практике flexbox

Практическое задание №1.4

Выполнить задание по ссылке

Медиазапросы

- изучить основы медиазапросов
- знать основные операторы
- знать назначение метатэга viewport

Практическое задание №1.5

Выполнить задание по ссылке

Неделя №2-3

Работа с Git & GitHub и Сhrome DevTools, продвинутый HTML/CSS

Git & GitHub

Закрепить знания по использованию git

Сhrome DevTools

Изучить основные принципы использования
chrome dev tools

HTML/Css

Знать и понимать:
  - рамки, закругления, треугольники в CSS
  - фон, спрайты в CSS
  - тени и градиенты в CSS
  - плавные переходы и трансформации
  - анимации
  - шрифты
  - верстка макетов и многоколоночного текста
Изучить использование:
  - git в vs code
  - браузеры
  - cookie, localStorage, sessionStorage
Изучить работу с формами, событиями в JS, DOM
Изучить материалы о Singolo на видео
Посмотреть Friday Live Coding event

Sass

Знать и понимать:
- виды и задачи препроцессоров
- основы SASS (перменные, наследование,
селекторы, операторы)
- импорты, миксины, комментарии
- плейсхолдеры, функции, медиа запросы
- 7-1 паттерн

JavaScript для верстальщика

Знать и понимать:
- селекторы в JS
- события в JS
- classList
- события клавиатуры

Grid

Изучить основы Grid layout в CSS:
- адаптивный grid
- вложенный grid
- выравнивание
- формы
- наложение
- позиционирование

Практическое задание №2-3.1

Применить grid layout знания на практике

Неделя №4

Базовый JavaScript

JavaScript Basic

Знать и понимать:
- основы JS (синтаксис, инструкции, переменные, операторы)
- типы данных и преобразование типов
- условные конструкции и операторы сравнения
- циклы

Практическое задание №4.1

Выполнить задания по ссылкам

Неделя №5

JavaScript: Array, Object, Function, Data mapping. Basic operations.

JavaScript. Array. Object.

Знать и понимать:
- предназначение типа данных массив
- методы для работы с массивами (используемые в видео)
- предназначение типа данных объект, создание объектов
- литералы и свойства объектов
- использование квадратных скобок
- циклы для работы с объектами
- сравнение, копирование и клонирование объектов

JavaScript. Function.

Знать и понимать:
- назначение и объявление функций
- внешние переменные в функциях
- аргументы функций и их значения по-умолчанию
- возврат значения из функций
- выбор имени функции
- различия между function expression и function declaration
- стрелочные функции

JavaScript. Data mapping. Basic operations.

Укрепить знания по примитивным и ссылочным типам данных
Изучить принципы работы дестуктурирующего присваивания

Практическое задание №5.1

Выполнить задания по ссылкам

Неделя №6-7

JavaScript: DOM elements, Browser events, other events.

JavaScript. Date and time

Знать и понимать:
- создание объектов даты
- получение и установка элементов даты
- автоисправление дат
- преобразование к числу, разница дат, бенчмаркинг
- преобазование из строки

JavaScript. DOM, elements

Знать и понимать: 
- DOM, BOM, CCSOM
- навигация по DOM
- использование селекторов для поиска элементов
- тэг, тип, содержимое элементов
- аттрибуты и свойства элементов
- изменение элементов
- стили и класс элементов в JS
- размеры и координаты элементов
- прокрутка элементов и окна

JavaScript. Browser events, other events

Знать и понимать:
- события в браузере
- всплытие и погружение
- делегирование
- действие браузеров по умолчанию для событий
- генерация пользовательских событий
- события мыши
- drag'n'drop события
- ES6 основы и особенности
- JS объекты и прототипы
- JS анимации и взаимостейсвие с CSS

Webpack

Знать и понимать:
- назначение webpack
- основы сборки проекта
- основные конфигурации webpack

Практическое задание №6-7.1

Выполнить задания по ссылкам

Неделя №8-9

Продвинутый JavaScript: this, scope, closure, ES6

Продвинутый JavaScript. This. Scope. Closure

Знать и понимать:
- контекст в JS
- объекты переменных
- ключевое слово this
- области видимости, включая цепи областей видимости
- функции
- замыкания

Продвинутый JavaScript. OOP

Изучить основы ООП в JS

Продвинутый JavaScript. Inheritance

Знать и понимать:
- классы, их назначение и синтаксис
- наследование классов
- статические свойства и методы
- модификаторы доступа (private, protected)
- расширение встроенных классов JS
- определение принадлежности к классу
- примеси

Продвинутый JavaScript. ES6+

Изучить нововведения в ES6, ES7, ES8

Практическое задание №8-9.1

Выполнить задания по ссылкам

Неделя №10-11

Event Loop, Async programming, RESTful API

Async programming

Знать и понимать:
- назначение и использование асинхронности
- async/await
- основы работы event loop в JS
- асинхронные запросы и функции
- fetch

RESTful API Style

Знать и понимать основные принципы REST API

Практическое задание №10-11.1

Выполнить задание по ссылке

Неделя №12

HTTP/ HTTPS, WebSocket

HTTP/ HTTPS

Знать и понимать:
- основы HTTP
- разницу с HTTPS
- основы WebSocket

WebSocket

Practical JavaScript

Изучить курс по практическому JS

Практическое задание №12.1

Выполнить задания по ссылкам

Неделя №13

Подготовка к интервью.

Interview

Изучить возможные вопросы и подготовить к собеседованию