Курс “Front-End”

• Огляд завдань і засобів розробки
• Огляд браузерів, їх сумісності
• Принципи роботи браузера. Основи веб-орієнтованої клієнт-серверної архітектури веб-додатка
• Розуміння Web Single Page Application
• Основні завдання фронтенду й огляд інструментів розробки. Система контролю версій Github
• Визначення системи контролю версій. Порівняння існуючих систем
• Github як сховище коду. Реєстрація на Github, установка для комп’ютера
• Ініціалізація проекту і налаштування облікового запису
• Команди git pull, git add, git push, git commit
• Цикл розробки та філософія роботи з git

Основи роботи з PhotoShop:

• Огляд інструментарію, налаштування середовища
• Формати файлів: вхідні, вихідні, внутрішні
• Робота з шарами
• Створення зображення, використання тексту, контурів, інструментів малювання
• Використання фільтрів Photoshop для створення ефектів
• Інструменти кольору, перетворення макету сторінки
• Графічні елементи сторінки
• Способи створення графічних елементів
• Створення макету сторінки для підготовки до верстки

Основи HTML: теги для роботи з текстом та зображеннями:

• Опис стандарту HTML (W3C Standards). Особливості роботи з тегами й атрибути тегу. Структура HTML документа. Основні теги для роботи із заголовком
• Застосування валідатора HTML
• Основні теги роботи з текстом: заголовки, абзац, перенесення рядка, формат тексту. Тег div
• Робота із зображенням: фон, тег роботи із зображенням. Створення гіперпосилань і якорів. Робота зі списками. Використання графічних гіперпосилань

Робота з таблицями даних в HTML:

• Робота з таблицями даних. Використання
• Форми і їх елементи: текстові поля і елементи вибору. Атрибути тегів form і input

Робота с HTML5:

• Огляд специфікацій HTML5
• Формати дати і часу
• Робота з аудіо і відео з використанням відповідних тегів
• Робота з CSS / CSS3

Робота з CSS/ CSS3

• Синтаксис CSS. Створення та підключення
• CSS стилів на сторінку. Застосування валідатора CSS
• Базові контейнери CSS: Background, Text, Font, Link, List, Image
• Оптимізація графіки з використанням спрайтів. Блокова верстка сторінки

Блокова верстка сторінки

• Поняття блокової верстки та переваг використання, позиціювання елементів (властивості float і clear)
• Робота з шарами, позиціювання шарів (побудова макета). Налаштування властивостей padding і margin
• Поглиблена робота з CSS3
• Нові властивості
• Тіні і градієнти
• 2D і 3D трансформація
• Анімація
• Огляд існуючих методологій роботи з CSS

Основи:

• Огляд SEO оптимізації
• Завдання SEO, які вирішуються на сторінці і поза нею
• Методи поліпшення SEO

Використання предпроцесорів LESS / SAAS / PostCSS:

• Базові принципи роботи CSS предпроцесорів. Установка і підключення LESS SAAS / PostCSS
• Синтаксис мови програмування стилів LESS / SAAS / PostCSS
• Використання констант і змінних
• Функції роботи з кольором

Адаптивність і оптимізація верстка за фреймворками BOOTSTRAP 4

• Створення і використання домішок (Mixin). Параметричні домішки. Адаптивність і оптимізація верстки з фреймворком Bootstrap 4
• Поняття: платформ, кросбраузерності, адаптивності. Огляд основних можливостей Bootstrap CSS, завантаження і підключення
• Особливості верстки колонками, шрифти
• Вивчення Bootstrap CSS: таблиці, картинки, форми, угруповання елементів форм, кнопки, угруповання кнопок
• Створення навігаційних блоків. “Хлібні крихти”; посторінкова навігація; смуги прогресу; групи списків; панелі контенту; перемикачі контенту; спливаючі підказки; слайдер для банерів

Робота над практичним завданням по створенню проекту

• Обробка ТЗ
• Консультації по проекту (2 год.)
• Самостійна робота над проектом під керівництвом тренера (24 год.)

• Основи мови JavaScript
• Огляд мови JavaScript: історія, роль і місце, семантика і синтаксис
• Огляд інструментарію налагодження коду браузерів. Принципи роботи з console: огляд властивостей і методів
• Типи даних. Oператор: арифметичні, логічні. Оператор typef (). Пріоритет виконання
• Вирази. Операції над змінними. Область видимості змінних: Local Context, Global
• Context Взаємодія з користувачем

• Взаємодія з користувачем через діалогові вікна
• Пошук елементів у документі, використовуючи getElementById і getElementsByTagName
• Використання валідатора Jshint.com Основні конструкції програмування

• Розгалуження: IF, If … else, if … else if
• Цикли (Повторення): While, do … while, for
• Конструкція Swich … Case
• Конструкція try … catch, клас Error. Обробка помилок. Робота з масивами

• Масиви даних: одномірні, двовимірні, багатовимірні. Властивості і методи роботи з масивом: length, map (), indexOf (), lastIndexOf (). конструкція foreach
• Aсоціативні масиви (структури даних типу: словник, хеш). Метод Keys () Стандартний клас Object, методи роботи: toString () і valueOf (). Oператор delete. Поняття функції, точки її виклику, рекурсія, принцип зворотнього виклику (callback). Інтервали і таймери (setInterval (), setTimeout (), setImmediate ()). Використання return з множинним вибором. Вбудовані і власні конструктори

• Огляд основних вбудованих конструкторів
• Розгляд основних типів даних в якості об’єктів. Робота з рядками і датами
• Огляд методів
• Введення в регулярні вираження

• Обробка подій в моделі DOM
• Огляд об’єктної моделі W3C DOM: визначення, історія, рівні
• Браузерна реалізація у веб
• Способи отримання доступу до елементів DOM

• get ElementById
• get ElementsByTagName
• get ElemensByClassName
• Об’єкти Document і Element
• Колекції HTML елементів Огляд подій елементів в моделі DOM

• Методи елемента addEventListener (), removeEventListener ()
• Життєвий цикл події (стадії перехоплення, на цільовому елементі, фаза спливання)
• StopPropagation (), preventDefault ()
• Кросбраузерна обробка подій
• Робота з формами

• Об’єкт Form
• Елементи управління форми
• Поля введення. Зміна реєстру введених даних
• Валідація даних через регулярні вирази. основи Canvas

• Інтерактив на стороні клієнта з використанням Javascript (Canvas)
• Управління відео і аудіо c використання javascript
• Огляд найголовніших подій audio, video. Обробка елементів сторінки

• Події миші і клавіатури для елементів управління input
• Кнопки
• Поля введення. Зміна реєстру введених даних
• Прапори. Масиви прапорів
• Перемикач. Масиви перемикачів
• Візуальне угруповання елементів. Ви можете налаштовувати видимість елементів використовуючи властивості visibility, hidden, display

XMLHttpRequest:

• Структура URL
• Використання об’єкта XMLHttpRequest: властивості, методи. JSON і XML

• Формати передачі даних клієнт-сервер-клієнт JSON, XML
• Web storage і Cookies
• Local & Session Storage
• Cookies
• Доступ до Cookies
• Механізми збереження і читання Cookies. Технологія Ajax

• Технологія Ajax
• Робота з HTTP протоколами
• Формування запитів, обробка відповідей

Модульний підхід до розробки: RequireJS, Backbone.js:

• Опис підходу до розробки Asynchronous Module Definition (AMD)
• Установка інструменту, який реалізує підхід RequireJS і підключення його до проекту
• Опис модуля за допомогою define і виконання за допомогою require
• Автоматизаторів збірки фронтенда проектів

• Мініфікація і обфускація JS і CSS з використанням uglify_js, minify_js та інших
• Огляд препроцесорів GRUNT, GULP, Broccoli
• Установка GRUNT, структура файлу Gruntfile.js
• Використання GRUNT на різних прикладах
• Сучасні фреймворки

• Yahoo! UI Library (YUI)
• MooTools
• jQuery
• Dojo Toolkit
• Backbone.js
• Angular
• Ember.js
• ReactNative
• Nativescript

Робота над практичним завданням по створенню фронтенд проекту:

• Обробка ТЗ
• Консультації по проекту (2 год.)
• Самостійна робота над проектом під керівництвом тренера (24 год.)
• Захист власного навчального проекту
• Захист відбувається в аудиторії, перед незалежним експертом-практиком з наших компаній партнерів
• Захист буде нагадувати вашу першу технічну співбесіду, що дозволить показати вашу майстерність
• Ви отримаєте розгорнутий фідбек про свою роботу, а також дізнаєтеся в якому напрямку вам ще потрібно прокачати скіли