Skillbox Профессия Frontend-разработчик 2019
О курсе
Skillbox - Профессия Frontend-разработчик (2019)
Курс идеально подойдет
Новичкам в IT
Вы научитесь создавать собственные проекты, освоите профессию frontend-разработчика и начнёте карьеру в этой сфере.
Разработчикам с начальным уровнем
Вы изучите основы языка и его синтаксиса, сможете создавать визуальные интерактивные элементы и разработаете первый веб-проект.
Чему вы научитесь
Верстать сайты и приложения для всех типов устройств.
Применять инструменты проверки и обеспечения адаптивности и кроссбраузерности.
Создавать сайты и приложения с помощью JavaScript.
Работать с системой Git (стандарт по управлению исходным кодом) и с сервисом GitHub.
Использовать библиотеки для ускорения и упрощения разработки.
Работать с анимацией для веб-страниц.
Программа курса
Программа курса содержит 2 основных блокa.
Курс идеально подойдет
Новичкам в 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
- Тестирование кода
Экзаменационное задание
- Веб-верстка
