Программа курса "Frontend developer (Фронтенд разработчик)"

Программа курса "Frontend developer (Фронтенд разработчик)".

Основы интернет-технологий, введение в язык разметки HTML (структура документа)

• Обзор знаний, которыми должен владеть front end developer (фронтенд разработчик)
• Что такое тег, атрибуты тега, правила оформления HTML документа
• Разметка текста, заголовков и абзацев
• Виды и применение гиперссылок
• Создание таблиц и списков ( нумерованных и маркированных)
• Графика в HTML. Форматы изображений, используемые в WEB-е, использование спецсимволов
• Формы и их элементы (кнопки, поля ввода, переключатели и др.)

Оформление внешнего вида сайта. Каскадные таблицы стилей (CSS)

• Консоль разработчика (FireBug)
• Синтаксис CSS
• Основные селекторы и свойства
• Приоритет правил, псевдоэлементы и псевдоклассы
• Единиц измерения в CSS
• Работа с текстом (+ шрифты)

Фотошоп и предподготовка

• Базовые инструменты фотошопа необходимые для специальности front end developer (фронтенд разработчик)
• Анализ макета = структура сайта
• Раскрой макета (что и как сохранять?)
• Цифровая информация с макета (где брать данные для пиксель перфект вёрстки?)

Современные методы и способы Front end HTML5 + CSS3

• Шаблон/каркас/структура сайта
• Теги HTML5 и их применение
• Многоуровневые меню
• Атрибуты для форм
• Применение валидатора
• Проблема «кроссбраузерности» грамотная, универсальная вёрстка
• Табы и аккордеоны без JS
• Медиа контент (аудио и видео)
• Генерируемое содержимое (создание содержимого на стороне стилей)
• Оживляем сайт (анимации и трансформации)
• Создаём слайдер без JS
• Адаптация сайта под моб. устройства
• SVG
• Canvas

Инструменты front end разработчика

• Emmet
• Bootstrap 3 / 4
• nodeJs (платформа для следующих инструментов)
• Атрибуты для форм
• Pug (препроцессор HTML
• Less / Sass (препроцессоры CSS)
• Gulp / Webpack
• Git (контроль версий)

Web программирование на языке JavaScript (в рамках курса front end developer)

• Библиотека jQuery
• Изучаем селекторы для работы с DOM
• Вводим понятие коллекции и фильтров
• Манипулируем CSS свойствами
• вывод на страницу
• поиск и исправление ошибок в коде 
• События, обработка событий
• Получение объекта события
• Всплытия и перехват
• Действия браузера по умолчанию
• Выделения. Делегирование событий
• События мыши и клавиатуры
• Drag’n’drop
• События форм
• Примитивные типы данных, переменные, операторы
• Основные алгоритмы: сравнение, циклы
• Методы и функции
• Деление задач на подзадачи 
• Особенности объявления функций
• Области видимости переменных
• Параметры функций
• Классы и объекты (переходим от простых типов данных к массивам, строкам, изучаем объекты и особенности работы с ними)
• Документ и объекты страниц
• Создаем и модифицируем элементы на странице
• Работаем со структурой HTML
• Пишем калькулятор
• Таймеры (работаем с таймерами, запускаем и останавливаем таймеры)
• Делаем анимацию на странице. Управляем анимацией
• Пишем слайдер 
• Координаты (прокрутка вверх и паралакс)
• Валидация форм (формы и регулярные выражения)

Размещение сайта в Интернете

• Что такое хостинг и доменное имя
• Загружаем сайт на хостинг. Работаем с FTP-сервером
• Сборка проекта (загрузка содержимого файла в DOM)
• AJAX (Учимся получать и обрабатывать данные со стороны сервера. Обработка ответа сервера, работа с JSON)

Web-программирование на языке PHP (базовые знания необходимые для front end developer высокого уровня)

• Обработка POST и GET запросов
• Отправка писем
• Работа с cookie на странице
• Вывод в консоль
• Работа с сессия на сайте
• сборка проекта по модели MVC 

Основы работы с CMS (на примере Wordpress)

• Основы работы с CMS системами
• Установка Wordpress (на примере бесплатного хостинга)
• Создание простого сайта на Wordpress
• Подключение и настройка модулей