Подготовительная неделя
Знакомство с основными инструментами front-end разработчика.
Computer Science Basics
Знать и понимать:
- составляющие компьютера
- основы двоичной система счисления
- существующие операционные системы
- типы данных и алгоритмы
- основы компьютерных сетей
- инструменты повышения производительности
- Computer Science Basics - 16 часов.
HTML/Css basic
Знать и понимать:
- основы HTML, текст, элементы и медиаэлементы
- структура HTML дерева
- формы в HTML
- семантика и семантические элементы HTML
- основы CSS (селекторы, наследование)
- стили для текста
- блочные и строчные элементы
- единицы измерения, медиа запросы, анимации
- позиционирование
HTML для начинающих - 8 часов.
CSS для начинающих - 8 часов.
JS basic
Знать и понимать:
- основы JS (инструкции, арифметика, строки,
синтаксис, переменные, типы данных)
- функции в JS (вызов, объявление, свойства, методы)
- условные конструкции, логические переменные
и выражениея
- циклы
- JavaScript для начинающих - 20 часов.
Неделя №1
Изучение инструментов, настройка рабочего окружения, синтаксис Markdown, базовый HTML/CSS
Basic Git & GitHub
Зарегистрироваться на github
Добавить SSH ключ и авторизоваться с помощью git
Клонировать любой публичный репозиторий с github
Сделать первоначальную настройку гит используя
git config
Изучить базовые команды git
Изучить работу с ветками
Изучить требования к коммитам
Запустить репозиторий на GitHub Pages
Регистрация на Гитхабе - 30 мин
Полезные команды для работы с Git - 30 мин
Требования к именам коммитов - 30 мин
IDE
Установить VS Code
Создать HTML и CSS файлы в VS Code
Markdown
Изучить синтаксис markdown
- Что такое Markdown - 30 мин
Практическое задание №1.1
Выполнить задание по ссылке
HTML/Css Basic. Semantic.
Знать и понимать:
- структуру документа в HTML
- тэги и аттрибуты
- ссылки, изображения, таблицы
- формы и семантические тэги
Уметь применять семантические тэги на практике
HTML для самых маленьких - 2.5 часа
HTML для начинающих - 2.5 часа
Семантические теги в HTML - 30 мин
HTML5 Семантические элементы - 30 мин
Практическое задание №1.2
Выполнить задание по ссылке
CSS3
Изучить основы CSS
Изучить примеры CSS селекторов
Знать и понимать:
- как подключить CSS в HTML
- селекторы CSS
- специфичность, каскадность и наследование
Попробовать на практике писать CSS селекторы
Видео лекция HTML/Css Basic - 2.5 часа
CSS для самых маленьких - 1 час
Практическое задание №1.3
Выполнить задания по ссылкам
CSS positioning and layout (Flex)
Изучить и понимать position, floats, semantic,
CSS3, основы flexbox layout
Закрепить основные правила flexbox
Попробовать на практике flexbox
Видео лекция Position. Floats. Flex. Semantic. CSS3 - 2 часа
CSS: Flexbox - 30 мин
Шпаргалка по Flexbox - 30 мин
Практическое задание №1.4
Выполнить задание по ссылке
Медиазапросы
- изучить основы медиазапросов
- знать основные операторы
- знать назначение метатэга viewport
CSS3-медиазапросы - 30 мин
Уроки CSS - Медиа запросы основы - 30 мин
Практическое задание №1.5
Выполнить задание по ссылке
Неделя №2-3
Работа с Git & GitHub и Сhrome DevTools, продвинутый HTML/CSS
Git & GitHub
Закрепить знания по использованию git
Конспект - 1 час
Интерактивный курс - 1.5 часа
Сhrome DevTools
Изучить основные принципы использования
chrome dev tools
- Видео лекция по Chrome DevTools - 1.5 часа
HTML/Css
Знать и понимать:
- рамки, закругления, треугольники в CSS
- фон, спрайты в CSS
- тени и градиенты в CSS
- плавные переходы и трансформации
- анимации
- шрифты
- верстка макетов и многоколоночного текста
Изучить использование:
- git в vs code
- браузеры
- cookie, localStorage, sessionStorage
Изучить работу с формами, событиями в JS, DOM
Изучить материалы о Singolo на видео
Посмотреть Friday Live Coding event
Основы CSS/CSS3 - 5 часов
Вебинар Сергея Шаляпина. FAQ Broswers and IDEs FAQ HTML and CSS Basics - 1.5 часа
Вебинар Сергея Шаляпина. Forms & Inputs. Flexbox & Grid example. Singolo 1 review - 2.5 часа
Вебинар Сергея Шаляпина. DOM events exampes. Singolo 3 review - 2.5 часа
Вебинар Сергея Шаляпина. DOM examples. Singolo DOM FAQ. Singolo responsive details - 2 часа
Вебинар Сергея Шаляпина. Singolo FAQ - 1.5 часа
Вебинар Виктории Ворожун. Часть 1 - 2.5 часа
Вебинар Виктории Ворожун. Часть 2 - 2.5 часа
Вебинар Виктории Ворожун. Часть 3 - 3 часа
Вебинар Виктории Ворожун. Часть 4 - 3 часа
Вебинар Виктории Ворожун. Часть 5 - 3.5 часа
Sass
Знать и понимать:
- виды и задачи препроцессоров
- основы SASS (перменные, наследование,
селекторы, операторы)
- импорты, миксины, комментарии
- плейсхолдеры, функции, медиа запросы
- 7-1 паттерн
Preprocessors. SASS - 2 часа
Основы Sass - 1 час
JavaScript для верстальщика
Знать и понимать:
- селекторы в JS
- события в JS
- classList
- события клавиатуры
- JavaScript для верстальщика - 1 час
Grid
Изучить основы Grid layout в CSS:
- адаптивный grid
- вложенный grid
- выравнивание
- формы
- наложение
- позиционирование
Вёрстка на Grid в CSS - 30 мин
Видео курс Css Grid - 1.5 часа
Изучение гридов посредством игры - 1 час
Практическое задание №2-3.1
Применить grid layout знания на практике
Неделя №4
Базовый JavaScript
JavaScript Basic
Знать и понимать:
- основы JS (синтаксис, инструкции, переменные, операторы)
- типы данных и преобразование типов
- условные конструкции и операторы сравнения
- циклы
Введение в JavaScript - 30 мин
Привет, мир! - 30 мин
Переменные - 1 час
Основы JavaScript. Видеокурс - 10 часов (изучить все 35 видео)
Типы данных - 1 час
Преобразование типов - 30 мин
Операторы - 30 мин
Видео лекция JS Data types - 1 час (смотреть только первый час, до массивов)
Операторы сравнения - 30 мин
Условные операторы: if, '?' - 30 мин
Логические операторы - 30 мин
Циклы while и for - 30 мин
Конструкция "switch" - 30 мин
Практическое задание №4.1
Выполнить задания по ссылкам
Неделя №5
JavaScript: Array, Object, Function, Data mapping. Basic operations.
JavaScript. Array. Object.
Знать и понимать:
- предназначение типа данных массив
- методы для работы с массивами (используемые в видео)
- предназначение типа данных объект, создание объектов
- литералы и свойства объектов
- использование квадратных скобок
- циклы для работы с объектами
- сравнение, копирование и клонирование объектов
Видео лекция JS Data types - 1 час (смотреть часть, посвященную массивам)
Объекты - 1 час
Работа с объектами - 1 час
Основы Javascript - 8 часов
JavaScript. Function.
Знать и понимать:
- назначение и объявление функций
- внешние переменные в функциях
- аргументы функций и их значения по-умолчанию
- возврат значения из функций
- выбор имени функции
- различия между function expression и function declaration
- стрелочные функции
Функции - 1 час
Function Expression - 1 час
Функции-стрелки, основы - 30 мин
Видео лекция. Functions - 2.5 часа
JavaScript. Data mapping. Basic operations.
Укрепить знания по примитивным и ссылочным типам данных
Изучить принципы работы дестуктурирующего присваивания
Методы у примитивов - 30 мин
Числа - 1 час
Строки - 1 час
Массивы - 1 час
Методы массивов - 1 час
Object.keys, values, entries - 1 час
Деструктурирующее присваивание - 1 час
Практическое задание №5.1
Выполнить задания по ссылкам
Неделя №6-7
JavaScript: DOM elements, Browser events, other events.
JavaScript. Date and time
Знать и понимать:
- создание объектов даты
- получение и установка элементов даты
- автоисправление дат
- преобразование к числу, разница дат, бенчмаркинг
- преобазование из строки
- Дата и время - 1 час
JavaScript. DOM, elements
Знать и понимать:
- DOM, BOM, CCSOM
- навигация по DOM
- использование селекторов для поиска элементов
- тэг, тип, содержимое элементов
- аттрибуты и свойства элементов
- изменение элементов
- стили и класс элементов в JS
- размеры и координаты элементов
- прокрутка элементов и окна
DOM-дерево - 1 час
Навигация по DOM-элементам - 1 час
https://learn.javascript.ru/basic-dom-node-properties - 1 час
Изменение документа - 1 час
Стили и классы - 1 час
Размеры и прокрутка элементов - 1 час
Размеры и прокрутка окна - 1 час
Координаты - 1 час
JavaScript. Browser events, other events
Знать и понимать:
- события в браузере
- всплытие и погружение
- делегирование
- действие браузеров по умолчанию для событий
- генерация пользовательских событий
- события мыши
- drag'n'drop события
- ES6 основы и особенности
- JS объекты и прототипы
- JS анимации и взаимостейсвие с CSS
Введение в браузерные события - 1 час
Всплытие и погружение - 1 час
Делегирование событий - 1 час
Действия браузера по умолчанию - 1 час
Основы событий мыши - 1 час
Drag'n'Drop с событиями мыши - 1 час
Понимание javascript - работа с DOM - 2 часа
Javascript. Стандарт ES6. Смысл, основные фишки и подвохи - 2 часа
Понимание javascript - замыкания, контекст, callback - 2 часа
Webpack
Знать и понимать:
- назначение webpack
- основы сборки проекта
- основные конфигурации webpack
Webpack 4 - простая сборка проекта - 2 часа
Webpack. Полный курс 2020 - 3 часа
Практическое задание №6-7.1
Выполнить задания по ссылкам
Неделя №8-9
Продвинутый JavaScript: this, scope, closure, ES6
Продвинутый JavaScript. This. Scope. Closure
Знать и понимать:
- контекст в JS
- объекты переменных
- ключевое слово this
- области видимости, включая цепи областей видимости
- функции
- замыкания
Сложный JavaScript простым языком - 20 часов (плейлист состоит из 17 видео лекций)
Контексты исполнения - 1 час
Объект переменных - 1 час
This - 1 час
Цепь областей видимости - 1 час
Функции - 1 час
Замыкания - 1 час
Продвинутый JavaScript. OOP
Изучить основы ООП в JS
Продвинутый JavaScript. Inheritance
Знать и понимать:
- классы, их назначение и синтаксис
- наследование классов
- статические свойства и методы
- модификаторы доступа (private, protected)
- расширение встроенных классов JS
- определение принадлежности к классу
- примеси
Класс: базовый синтаксис - 1 час
Наследование классов - 1 час
Статические свойства и методы - 1 час
Расширение встроенных классов - 1 час
Проверка класса: "instanceof" - 1 час
Примеси - 1 час
Продвинутый JavaScript. ES6+
Изучить нововведения в ES6, ES7, ES8
EcmaScript - Полный курс (ES6, ES7, ES8) - 2.5 часа
ES6 по-человечески - 1 час
Что нового в JavaScript 2020? - 1 час
Практическое задание №8-9.1
Выполнить задания по ссылкам
Неделя №10-11
Event Loop, Async programming, RESTful API
Async programming
Знать и понимать:
- назначение и использование асинхронности
- async/await
- основы работы event loop в JS
- асинхронные запросы и функции
- fetch
Асинхронность в JavaScript. Таймеры, промисы, async/await - 2.5 часа
Полное понимание синхронного и асинхронного JavaScript с Async/Await - 1 час
Про цикл событий в JavaScript или "как на самом деле работает асинхронность"? - 1 час
Использование Fetch - 1 час
JavaScript Fetch API and using Async/Await - 1 час (статья на английском языке. В случае сложностей с переводом - обратитесь к ментору за помощью)
RESTful API Style
Знать и понимать основные принципы REST API
Разбираемся с REST и RESTful API - 1 час
REST: простым языком - 1 час
Практическое задание №10-11.1
Выполнить задание по ссылке
Неделя №12
HTTP/ HTTPS, WebSocket
HTTP/ HTTPS
Знать и понимать:
- основы HTTP
- разницу с HTTPS
- основы WebSocket
- Разница между HTTP и HTTPS - 30 мин
WebSocket
Знакомство с WebSocket - 30 мин
Echo Test - 30 мин
WebSockets - 1,5 часа
Practical JavaScript
Изучить курс по практическому JS
- Практика JavaScript - 10 часов.
Практическое задание №12.1
Выполнить задания по ссылкам
Неделя №13
Подготовка к интервью.
Interview
Изучить возможные вопросы и подготовить к собеседованию
Список (продвинутых) вопросов по JavaScript - 10 часов ( прочитайте внимательно вопрос, дайте на него ответ и только после этого сравните с предложенным ответом)
Подготовка к собеседованию - 30 часов