Front-End Developer - Mainacademy
Front-End Developer
сертифікат спеціаліста
Junior Front-End Developer

Front-End Developer – одна з найбільш популярних професій на сьогодні. Кожна компанія та організація прагне мати власний сайт, тому Front-End розробнику є з чого вибирати, щоб мати високий заробіток і цікаву роботу!

Програма курсу

Навчальна програма складена відповідно до вимог провідних IT-компаній та відповідає вимогам сучасного ринку до фахівців рівня Junior Front-End Developer.

Тренери-практики

Всі тренери академії – успішні практики рівня Middle або Senior, які мають багатий і цікавий досвід. Кожен з них обов`язково проходить навчання і сертифікацію Main Academy.

IT-English

Студенти курсу мають можливість поліпшити свою технічну англійську і відвідувати курси англійської та Speaking Club протягом усього періоду навчання.

Кар'єрний сервіс

Після закінчення курсу всі студенти проходять кар’єрний тренінг: вчаться проходити співбесіду, презентувати себе, свої soft і hard скіли, складати конкурентне резюме.

Ви навчитеся

  • Робити верстку сайту і форматувати його за допомогою: HTML / HTML5, CSS / CSS3
  • Проводити базову SEO-оптимізацію сайтів
  • Застосовувати фреймворки: Bootstrap 4, jQuery, Angular, React, Ember.js і не тільки
  • Взаємодіяти з серверами за допомогою JavaScript
  • Застосовувати препроцесори SASS / LESS / PostCSS
  • Створювати адаптивні сайти будь-якої складності
Технології, які ви опануєте
Зроби перший крок
Хочете більше дізнатися про Front-End Developer у провідних IT-спеціалістів? Реєструйтеся на найближчий безкоштовний семінар "Квиток в IT"!


Програма курсу

Введення в 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

Просунута верстка веб-сторінки. Використання предпроцесорів та фреймворків

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

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

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

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

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

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

Основи 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

JAVASCRIPT. Взаємодія з сервером

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 год.)
  • Захист власного навчального проекту
  • Захист відбувається в аудиторії, перед незалежним експертом-практиком з наших компаній партнерів
  • Захист буде нагадувати вашу першу технічну співбесіду, що дозволить показати вашу майстерність
  • Ви отримаєте розгорнутий фідбек про свою роботу, а також дізнаєтеся в якому напрямку вам ще потрібно прокачати скіли

Junior Front-End Developer - 8 кроків до мети

  • 1
    Записатися на курс
  • 3
    Виконати практичні, лабораторні, домашні
  • 5
    Відпрацювати заняття по HR
  • 7
    Захистити проект і скласти тести
  • 2
    Вивчити теорію
  • 4
    Підготувати фінальний проект
  • 6
    Відвідувати ІТ-English і Speaking Club
  • 8
    Junior Front-End Developer!

Форми навчання

Offline навчання
  • Заняття в аудиторіях
  • Індивідуальна і командна робота над рішенням задач
  • Доступ до навчальних матеріалів, завдань, лабораторних і тестів 24/7 протягом усього періоду навчання
  • Індивідуальний кар’єрний тренінг з HR фахівцем
  • Курс IT-English та Speaking Club
Online навчання
  • Навчання в будь-якій точці світу
  • Живе спілкування з тренером і обробки завдань на кожному уроці
  • Запис кожного уроку
  • Доступ до навчальних матеріалів, завдань, лабораторних і тестів 24/7 протягом усього періоду навчання
  • Кар’єрний тренінг з HR фахівцем
Front-End Developer
Форма реєстрації на курс

Форма реєстрації на курс
Назва курсу

Курс: Розробка Front-End

Заняття з інструктором

Ціна 4 платежі
4750 грн.

З нуля до рівня IT-спеціаліста і улюбленої роботи

Заняття в аудиторіях або онлайн з кращими інструкторами

5,5 міс, 45 занять, 112 годин теорії та практики з IT-експертами

Лабораторні роботи, індивідуальні та групові проекти

Англійська в подарунок для працевлаштування та роботи

Фінальний іспит, захист проекту і Ви – сертифікований IT-фахівець!

Команда курсу «Front-End Developer»

Кар'єрний сервіс

Максимум знань і умінь для працевлаштування
Даємо професійне ІТ-навчання

Після закінчення курсу, з отриманими знаннями і навичками, ви зможете претендувати на позицію Junior Front-End Developer

Кар'єрний тренінг

Вчимо грамотному позиціонуванню на ринку праці. Правильно писати резюме та супровідні листи. Успішно проходити інтерв’ю

Рекомендуємо на роботу

Ми постійно отримуємо від наших партнерів запити на роботу в ІТ-компаніях. Кращих студентів рекомендуємо нашим партнерам на роботу і стажування.

Відгуки про навчання в Main Academy

Отримайте Ваш квиток в IT
Форма реєстрації на пробний урок або семінар

Пробний урок
Front-End Developer

Ще не готові приступити до навчання або залишилися сумніви?

Заберіть свій квиток в IT і приходьте на безкоштовні лекції від Main Academy!

  • Ви познайомитеся з IT-експертами, технологіями, специфікою роботи в IT
  • Ви дізнаєтеся як почати IT-кар’єру з найменшими витратами і яку спеціальність вибрати
  • Ви познайомитеся з інструкторами і дізнаєтеся всі деталі курсу і спеціальності
  • Ви дізнаєтеся як ефективно шукати роботу від рекрутерів і гуру IT-ринку

Заняття проходять:

Телефон: