Курс разработан для начинающих специалистов по frontend-разработке. Вы научитесь создавать интерактивные элементы и адаптивный дизайн с помощью технологий Javascript, Node.js, React и Typescript и др. В процессе обучения будет много практики и заданий с разными уровнями сложности.
Программа состоит из 15 тематических модулей и рассчитана на 6 недель. Занятия проходят очно в Санкт-Петербурге в аудиториях на 5-10 человек, у каждого студента своё оборудованное рабочее место.
Основы web-технологий
- Знакомство. Кто зачем пришел
- Профессии: Full stack разработчик. Backend. Frontend. Верстальщик и пр.
- Работодатели: Фриланс, Веб студии, Аутсорсинговые и продуктовые компании.
- Технологии веб рабработки. Фреймворки. CMS-системы.
- Клиент-серверная модель
- Сетевые технологии и протоколы Интернета: TCP/IP, HTTP, HTTPS, FTP
- Введение в курс. Пробежаться по всем блокам. Какой результат получат.
- Командная работа в больший проектах
- Системы контроля версий. Git
- Основные инструменты веб разработчика. Базовая настройка всего необходимого.
Вёрстка. HTML5 и CSS3
- Знакомство с HTML
- Структура страницы, теги, атрибуты
- CSS. Свойства, селекторы
- Семантические теги уровня документа
- Таблицы
- Валидность кода, валидаторы
- Наследование свойств
- Правила для оформления и форматирования HTML и CSS кода
- Цвета в вебе, подключение шрифтов
- Работа с векторными изображениями SVG
Блочная модель. Макет веб-страницы
- Блочные, строчные и блочно-строчные элементы.
- Ключевые свойства блоков
- Как рассчитывается размер блока и box-sizing: border-box
- Блочная модель. Применение блоков для построения макета
- Свойство display
Flexbox
- Основы Flexbox: контейнеры и элементы
- Выравнивание элементов по основной и поперечной оси
- Смена осей и вертикальное выравнивание элемент
- grid обзор
Позиционирование
- Виды позиционирования: статическое, абсолютное, относительное, фиксированное, липкое
- Особенности разных видов позиционирования
- z-index и контекст наложения
- Когда и как использовать позиционирование
- Пример выпадающего многоуровневого меню
Форма обратной связи
- Разметка, валидация
- Оформление и состояние
- Кастомные переключатели
Препроцессоры. Sass, SCSS и Less
- Знакомство с Sass, SCSS и Less
- Переменные
- Вложения
- Примеси
- Расширения
Адаптивный дизайн
- Понятие адаптивного и отзывчивого веб-дизайна
- Медиа-запросы
- Параметры области просмотра и тег Meta viewport
- Кроссбраузерная вёрстка
- Особенности многостраничных сайтов
- Правила вёрстки для seo-продвижения
- Подходы к адаптиву - Mobile-first и Desktop-first
Основы программирования на JavaScript
- Синтаксис Javascript
- Переменные, типы данных, операторы и объекты
- Условные конструкции и ветвления
- Циклы
- Массивы. Вложенные массивы
- Функции, методы и аргументы
- Math / Таймеры
Javascript в браузере. DOM. События
- Объектная модель документа (DOM), DOM-узлы
- DOM-узлы - объекты. Свойства и методы DOM-узлов
- Поиск DOM-узлов и манипулирование ими
- Взаимодействие с веб страницей
- Глобальный объект window
- Обработка событий
- События onload, onclick
- Поиск элементов по классу
- Клавиатурные события: onkeypress, onkeydown, onkeyup
Работа с jQuery
- Знакомство с JS фреймворками. React. Vue. jQuery
- Синтаксис jQuery
- Основы работы с функцией $()
- Поиск элементов на странице
- Готовые функции для типовых задач
- Взаимодействие с содержимым веб страницы
- Анимационные возможности jQuery
Javascript в браузере. Ajax, анимация, интерактивные компоненты
- Обмен данных без перезагрузки страницы. Ajax
- Ajax + JSON
Основы backend разработки
- Назначение серверных технологий
- Протокол HTTP
- Настройка локального сервера и домена
- Основы PHP для создания динамических страниц
- Принцип разделения логики и шаблонов страниц
- Обработка данных из форм и валидация форм
- Знакомство с CMS-Системам
PHP + MySQL
- MySQL. Системы управления базами данных
- PHP + MySQL
- Основы PHP для создания динамических страниц
- Отправка писем на email
- Защита от XSS
Окончание курса
- Защита проекта
- Подготовка к собеседованию
- Знакомство со сборкой: node.js обзор. gulp, webpack
- Подведение итогов
