
Frontend-розробник – одна з топових IT-професій на сьогоднішній день за даними HeadHunter. У той же час це можливість почати IT кар’єру, адже для освоєння спеціальності, вам буде досить ваших шкільних знань. Наприклад, англійська мова – це основна світова міжнародна мова, а JavaScript – це основна мова сучасного сайту, на ньому написано більшість інтернет ресурсів, які ми щодня використовуємо. Frontend розробник повинен бути завжди в тренді. Адже технології у фронтенді змінюються практично кожні півроку Ще 5 років тому можна було вільно працювати джуном, знаючи тільки HTML і CSS. А вже сьогодні потрібно знати не тільки JS, але і фреймворки. Не чекай, коли вимоги виростуть ще більше! Вчися вже сьогодні.
Курс «Frontend Розробник» від «Main Academy» кращий варіант для старту вашої IT-кар’єри. На курсі Фронт Енд ви познайомтеся з такими мовами програмування як CSS, HTML5, CSS3, JavaScript, jQuery на практиці. Програма складена за принципом збільшення складності. Кожен урок містить велику практичну складову, яка допоможе тобі швидко і ефективно освоїти нову професію.

Програма курсу Frontend розроблена викладачем на основі багаторічної практики і відповідає вимогам провідних IT-компаній і відповідає вимогам сучасного ринку до фахівців рівня Junior Frontend Developer.

Тренера курсу – успішні практики рівня Middle або Senior, які мають безліч реалізованих успішних проектів і поділяться своїм досвідом з вами.

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

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

Програма курсу
Введення в 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
-
8Junior Front-End Developer!
Форми навчання

- Заняття в аудиторіях
- Індивідуальна і командна робота над рішенням задач
- Доступ до навчальних матеріалів, завдань, лабораторних і тестів 24/7 протягом усього періоду навчання
- Індивідуальний кар’єрний тренінг з HR фахівцем
- Курс IT-English та Speaking Club

- Навчання в будь-якій точці світу
- Живе спілкування з тренером і перевірка завдань на кожному уроці
- Запис кожного уроку
- Доступ до навчальних матеріалів, завдань, лабораторних і тестів 24/7 протягом усього періоду навчання
- Кар’єрний тренінг з HR фахівцем
Форма реєстрації на курс
Назва курсу
Курс: Курс "Front-End"
Заняття з інструктором
Ціна | |
---|---|

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

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

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

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

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

Фінальний іспит, захист проекту і Ви – сертифікований IT-фахівець!
Команда курсу «Front-End Developer»

Дмитро Прасолов
Front-End Developer
Професійно володіє: HTML 4 | 5, CSS3, SCSS, Tailwind, Bootstrap 4, JS (ES6)/p>
Інші інструменти та технології: Jquery, React (Basic), Webpack, Git, Photoshop, Wget/p>
Досвід роботи в компаніях: Scrit Group, Atom Cream./p>
Освіта: Національний технічний університет "Харківський політехнічний інститут", розробка робототехнічних систем і комплексів./p>

Андрій Колос
Андрій Колос - Front end developer в Uklon
Скіли:
- HTML, SVG
CSS3 (Sass, PostCSS, BEM)
- JavaScript (ES2015, TS)
- Angular
NodeJs
- MongoDB
Задачі в Uklon:
Технологіії - JS(TypeScript), Angular 8+
Проекти - CRM for dispatchers, accountants, cartographers, administrators
Досвід роботи Front end розробником у компаніях Intelliarts, WebCreek та UpQode.

Павло Романченко
Senior Software Development Engineer
-
Професійно володіє C# ,LINQ, ASP.NET
-
MVC, PL/SQL, Oracle, iQuery
Закінчив ДонНТУ за спеціальністю “Комп’ютерні науки”. Займав керівну посаду відділу інформаційних систем в ОщадБанку. Досвід у широкому спектрі галузей, включаючи банківську діяльність, фінансовий менеджмент, управління даними. Зараз працює у Ciklum та VivaSoft.

Максим Хамровський
Full-Stack Developer
5 років у розробці
-
Професійний рівень володіння C#, HTML, CSS
Ступінь бакалавра зі спеціальності “Інженер електронних приладів” у КПІ, також навчався веб-дизайну. Співзасновник “IT KPI”, одної з найкращих студентських ІТ-спільнот в Україні. Засновник Microsoft group у КПІ, набув студентський статус партнера у Microsoft (gained Microsoft student partner status).
Досягнення: перше місце у всеукраїнському змаганні науково-дослідних робіт серед студентів-членів MAcS; друге місце на Intel ISEF (International Science and Engineering Fair) у секції з інженерії та електроніки; третє місце на European BEST Engineering Competition. Працює 3 роки у Materialise Full-Stack розробником.

Марина Басієва
Senior Front-End Developer
7 років у розробці
- Володіє на високому рівні мовами JavaScript, PHP, HTML
- Фреймворки: Angular, Laravel
- CSS, СSS3, jQuery, gulp, Jira
- CMS (Wordpress, Joomla, Magento), SEO
Особисто розробила більше 200 проектів. Серед них інтернет-магазини, лендинги, сайти-візитки. Один з найцікавіших проектів - сайт Професійної футбольної ліги. Досвід викладання більше 3 років. Директор компанії Infocus, має досвід керівництва і налагодження процесу командної роботи.

Василь Старухін

Рєпін Артур
Senior Frontend Developer
6 років у розробці Frontend
-
Професійний рівень володіння JavaScript, React.js, iQuery
-
Інші інструменти і технології: HTML, Bootstrap, AJAX, CSS, Git, WordPress, PHP, JSON, SCSS, Photoshop
Працював у ExpoPlatform, Macphun, Innovecs. Ступінь магістра з права у КНУТЕ. Ступінь бакалавра з військової психології у НУОУ.
Кар'єрний сервіс

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

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

Ми постійно отримуємо від наших партнерів запити на роботу в ІТ-компаніях. Кращих студентів рекомендуємо нашим партнерам на роботу і стажування.
Відгуки про навчання в Main Academy
Пробний урок
Front-End Developer
Ще не готові розпочати навчання або лишилися сумніви?
Перший тиждень навчання безкоштовно!
- Ви познайомитеся з інструктором курсу, технологіями та специфікою роботи в IT
- Дізнаєтеся, як проходить навчання на курсі Frontend: програма, розклад, створення першого портфоліо і умови сертифікації
- Визначте для себе, чи підходить вам цей напрям