Future Skills | FrontEndDeveloper

Ви навчитесяРобити верстку сайту і форматувати його за допомогою: HTML / HTML5, CSS / CSS3Проводити базову SEO-оптимізацію сайтівЗастосовувати фреймворки: Bootstrap 4, jQuery, Angular, React, Ember.js і не тількиВзаємодіяти з серверами за допомогою JavaScriptСтворювати адаптивні сайти будь-якої складності

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

- Огляд інструментарію, налаштування середовища
- Формати файлів: вхідні, вихідні, внутрішні
- Створення зображення, використання тексту, контурів, інструментів малювання
- Використання фільтрів Photoshop для створення ефектів
- Інструменти кольору, перетворення макету сторінки
- Графічні елементи сторінки
- Способи створення графічних елементів
Верстка веб-сторінки на чистому HTML і CSS
Основи 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, які вирішуються на сторінці і поза нею
Методи поліпшення SEO
Просунута верстка веб-сторінки. Використання предпроцесорів та фреймворків
Адаптивність і оптимізація верстка за фреймворками BOOTSTRAP 4

- Створення і використання домішок (Mixin). Параметричні домішки. Адаптивність і оптимізація верстки з фреймворком Bootstrap 4
- Поняття: платформ, кросбраузерності, адаптивності. Огляд основних можливостей Bootstrap CSS, завантаження і підключення
- Особливості верстки колонками, шрифти
- Вивчення Bootstrap CSS: таблиці, картинки, форми, угруповання елементів форм, кнопки, угруповання кнопок
- Створення навігаційних блоків. “Хлібні крихти”; посторінкова навігація; смуги прогресу; групи списків; панелі контенту; перемикачі контенту; спливаючі підказки; слайдер для банерів
Основи JavaScript розробки
Основи мови 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 з множинним вибором. Вбудовані і власні конструктори
- Огляд основних вбудованих конструкторів
- Розгляд основних типів даних в якості об’єктів. Робота з рядками і датами
- Огляд методів
- Введення в регулярні вираження
JAVASCRIPT просунутий. Робота з веб-сторінками
- Обробка подій в моделі 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
Виконання персонального навчального проекту

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

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