[Skillbox] Профессия Frontend-разработчик (2019)

Skillbox – Профессия Frontend-разработчик (2019)

Курс идеально подойдет

Новичкам в IT
Вы научитесь создавать собственные проекты, освоите профессию frontend-разработчика и начнёте карьеру в этой сфере.

Разработчикам с начальным уровнем
Вы изучите основы языка и его синтаксиса, сможете создавать визуальные интерактивные элементы и разработаете первый веб-проект.

Чему вы научитесь

Верстать сайты и приложения для всех типов устройств.

Применять инструменты проверки и обеспечения адаптивности и кроссбраузерности.

Создавать сайты и приложения с помощью JavaScript.

Работать с системой Git (стандарт по управлению исходным кодом) и с сервисом GitHub.

Использовать библиотеки для ускорения и упрощения разработки.

Работать с анимацией для веб-страниц.

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

Программа курса содержит 2 основных блокa.

Веб-верстка

Вводный модуль
Как работают сайты. Backend и frontend. Вёрстка.
Как выглядит и из чего состоит код веб-страницы.
Установка редактора кода Sublime Text.
Простая веб-страница на HTML. Тэги и атрибуты.
CSS-стили. Селекторы, параметры и значения.

HTML
Структура HTML5-документа.
Обзор и демонстрация работы основных HTML-тэгов.
Вёрстка веб-форм. Поля и кнопки. Валидация форм.
Таблицы и табличная вёрстка.
Семантическая вёрстка. Стандарты и валидность.

Основы CSS
Как можно задавать стили. Селекторы.
Отступы, поля, размеры и единицы измерения.
Inline- и block-элементы, свойство display.
Обтекание, позиционирование и слои.
Блочная вёрстка.
Цвета, шрифты, фон и границы.

Основы JavaScript
Что такое JavaScript и как его подключать к веб-странице.
Библиотека jQuery. Управление стилями элементов.
Обработка событий.
Работа с DOM, изменение, добавление и удаление элементов.
Отображение и скрытие элементов, анимация.
Работа с сетью, получение и отправка данных.
JavaScript-фреймворки.

Адаптивность и кроссбраузерность
Ширина экрана и “резиновость” сайта.
Media-запросы.
Flexbox.
Шаги адаптивности и сетки.
Разнообразие браузеров и их особенности.
Инструменты проверки и обеспечения адаптивности и кроссбраузерности.

Оформление
Фон, прозрачность и градиенты.
Границы, аутлайны и тени.
Шрифты и оформление текста. Типографика и спецсимволы.
Стили указателей.
Изображения. Форматы, сжатие, cпрайты, iconfonts. Favicon.
Рисование на веб-странице. SVG и Canvas.

Advanced CSS
Сложные селекторы. Свойство !important
Псевдо-классы и псевдо-элементы.
Трансформации, переходы и анимации.
Стандарты именования в CSS. Методология БЭМ.
Библиотеки стилей: Bootstrap, Semantic UI, Material UI.
Шаблонизаторы (Twig, Haml) и препроцессоры (SASS, LESS, Stylus).

Инструменты верстальщика
Размещение своих работ в Интернете. Домен и хостинг.
Инструменты командной разработки. Таск-трекеры и Git.
Сборщики, минификаторы и оптимизаторы проектов.
Инструменты прототипирования.
Другие среды разработки. NetBeans, WebStorm.

JavaScript

Знакомство с языком
Что умеет JavaScript и почему он так популярен?
Инструменты разработчика
Hello, world!
Синтаксис языка

Основы
Интро
Числа
Строки
Логические (булевые) значения
NaN (Not a Number)
Infinity
Математические операторы
Переменные
Преобразование типов
Условия
Циклы

Функции
Интро
Объявление и вызов функций
Аргументы
Локальные и глобальные переменные
Hoisting
Возвращаемые значения
Рекурсия

Массивы и объекты
Понятие объектов
Объекты в JavaScript
Перебор свойств объекта
Массивы
Стандартный объект Math
Стандартный объект String
Стандартный объект Array
Стандартный объект Date

Замыкания
Глобальный объект window
Сборщик мусора
Замыкания
IIFE

Объекты и конструкторы
Функции-конструкторы
Контекст вызова
Привязка контекста (call, apply и bind)

Объектно-ориентированное программирование
ООП. Наследование, инкапсуляция, полиморфизм
Функциональное наследование
Прототипное наследование
Прототипы стандартных объектов

Разное
Объект arguments
setTimeout и setInterval
Выполнение кода через eval
Обработка исключений (throw, catch)
Регулярные выражения
Строгий режим (strict mode)

JavaScript в браузере, DOM
Интро
DOM
Порядок выполнения скриптов
Селекторы
Свойства и методы элементов
События и обработчики
Погружение и всплытие событий

Web API
Интро
Console
Window
Document
Информация о браузере и истории переходов
LocalStorage и SessionStorage
ContentEditable
Разнообразие Web API

Клиент и сервер
Клиент-серверное взаимодействие (интро)
Запуск локального сервера
AJAX и callback
JSON и Promise
API и WebSocker

jQuery
Библиотека jQuery. Интро
Библиотеки и frameworks. Интро
Возможности jQuery
Анимация
AJAX
Плагины

Современный JavaScript, ES 2015
История стандарта ECMAScript. Интро
Транспиляция и полифиллы
Let и const
Деструктуризация
Rest и spread
Template strings
Стрелочные функции и параметры по умолчанию
Классы и наследование

Сборка проектов
Что такое сборка проектов и для чего она нужна?
Node.js
npm
Gulp
Webpack

React
DOM и императивный подход. Интро
React и декларативный подход
Подготовка рабочего пространства
Простое React-приложение
Разделение на компоненты

Redux
Интро
Ключевые принципы Redux
Установка зависимостей и разделение на компоненты
Создание store и reducers
Создание actions
Запуск приложения

Бонус
Библиотеки и фреймворки 2017
Развитие стандарта ECMAScript
Тестирование кода

Экзаменационное задание