Курс Front-End (Angular)

HTML5 + CSS3 + JS = NaN?

Безкоштовна консультація

Допоможемо, підкажемо і знайдемо Ваш напрямок у сфері IT.

Ім'я

Номер телефону

Інструктор

Микола Дігтяр

Senior Software Engineer

5+ років в IT.

Працює в Trade Republic.

Обожнює настільний теніс і пити каву ночами.

Про що курс

Front-End розробка - це один із найзатребуваніших напрямів у сучасній IT індустрії! Кожному сайту, веб-додатку і мобільному додатку потрібне "обличчя", яке буде правильно працювати на всіх можливих пристроях: починаючи від вашого домашнього комп'ютера і закінчуючи смартфоном. Саме Front-End розробники перетворюють макет дизайну на "живий" сайт. Усе те, що ви бачите на сайті або в мобільному застосунку, називається інтерфейсом користувача. Front-End розробник за допомогою програмного коду та мов розмітки втілює в життя креативні ідеї веб-дизайнерів!

У своїй роботі Front-End розробники використовують: мову розмітки HTML, каскадні таблиці стилів CSS, мову програмування JavaScript і фреймворки, які з ним пов'язані.

Тому під час онлайн-навчання ми детально зупиняємося на вивченні кожного з цих блоків.

Однією з найбільш популярних та затребуванмх бібліотек для Front-End розробки зараз є Angular. За допомогою цієї бібліотеки можна створювати не тільки швидкі та багатофункціональні сайти, а й мобільні додатки. Детальніше ми познайомимося з особливостями цієї бібліотеки на курсі!

Опис курсу на сайті Agentur für Arbeit

Курс ідеально підійде для

Тих, хто хоче навчитися створювати сайти face-1

Веб-дизайнерів face-2

Графічних дизайнерів face-3

Контент-менеджерів face-4

Програма курсу Front-End (Angular)

Модуль 1: Верстка

Знайомство з HTML.

Роль Front-End у світі IT. Взаємодія "фронту" з "беком" і дизайнером.
Етапи життя проєкту.
Інструменти для розробки (редактор коду, Photoshop, devTools).
Рендеринг сторінки.
Базові принципи верстки. Кросбраузерність і валідність - що це і чому це важливо.
Браузери.
Структура HTML-документа.
Взаємовідносини блоків: вкладений, дочірній, сусідній, батьківський.

Знайомство з CSS.

Що таке CSS.
Способи завдання стилів.
Селектори CSS.
Каскад ("вага" селекторів).
Комбінування та групування селекторів. Ієрархія селекторів. Успадкування.
Вбудовані стилі браузерів. CSS reset.
Блокова модель.
Властивість border.
Властивість display.
Властивість float.
Властивість overflow.
Властивість transition.
Властивість transform.
Анімація за допомогою CSS3.
Позиціонування.
CSS3 Flexbox.

Responsive дизайн.

Різниця між Adaptive дизайн і Responsive дизайн.
Види "девайсів".
CSS-інструменти та налаштування для Responsive дизайн.
Медіа-запити CSS.
CSS Breakpoints (контрольні точки).
Навігація на сайті.
Pixel Perfect дизайн.

Практична верстка.

Social networks за допомогою SVG-іконок.
Шрифти та їхнє підключення.
Практична верстка.

Git.

Системи контролю версій.
Команда init.
Статуси файлів, команди status, add, commit, config, log.
Робота з віддаленим репозиторієм (GitHub), SSH ключі.
Основні команди.

Linux.

Що таке операційна система.
Автоматизація, скрптиніг, мережеві інструменти (ssh, rsync, ftp, telnet).
Мережі.
Docker.
Docker-Compose.

Bootstrap.

Framework. Що? Навіщо? Чому?
Встановлення та налаштування Bootstrap.
Компоненти Bootstrap.
Утиліти (Utilities).

Модуль 2: JavaScript

Що таке JavaScript?

ECMAScript.
Модель документа (DOM).
Автоматичне керування пам'яттю.
Відсутність суворої типізації даних.
Відсутність засобів для введення і виведення інформації.
Відсутність доступу до функцій операційної системи.
Оброблення дій користувача та подій браузера.

Початок роботи. Основи JavaScript.

Приведення типів.
Функції.
Методи.
Інтегрування JavaScript у вебсторінки.

Типи даних.

Number (число).
String (рядок).
Boolean (логічний тип так/ні).
Null (порожній об'єкт).
Undefined (невизначений тип).
Object (об'єкт).
Array (масив).

Рядки (String).

Створення рядка.
Перенесення рядка.
Використання змінних.
Екранування символів.
Складання та конкатенація.
Масив.
Методи.

Числа (Number).

NaN та Infinity.
Методи.
Бібліотека Math.

Об'єкти (Object).

Створення об'єктів.
Використання об'єктів.
Копіювання об'єктів.
Дескриптори властивостей об'єктів.
Структура дескриптора.
Клас Object.
Прототипи об'єктів.
Прототипне успадкування.

Масиви (Array).

Створення масиву.
Доступ до елементів масиву.
Зміна масиву.
Методи масивів.

Змінні.

Оголошення змінних.
Іменування змінних.

Оператори умов.

Оператор умови if.
Оператор умови switch.
Тернарний оператор умови.

Цикли.

Цикл while.
Цикл do...while.
Цикл for.
Цикл for...of.
Цикл for...in.
Використання continue і break.

Функції.

Оголошення та виклик функції.
Аргументи функції.
Ключове слово return.
Стрілочні функції.
Контекст функції.
Область видимості функції.

Дата та час.

ISO стандрат для дати та часу.
Методи Date.

ООП.

Що таке ООП?
Класи в ООП.
Асоціації.
Успадкування.
Перевантаження.
Недоречне застосування.
Абстрактні класи.
Поліморфізм.
Інкапсуляція.
Аксесори (геттери та сеттери).
Абстракція.
Рівень абстракції.

Замикання. Таймери.

setTimeout().
setInterval().
setImmediate().

DOM.

Отримання елементів DOM.
Зміна елементів DOM.
Видалення елементів із DOM.

Local Storage і Session Storage.

Promise - async /await.
Exceptions.
Fetch API.
Об'єкт window.

Модуль 3: Angular

Вступ в Angular

Знайомство з фреймворком
Основні переваги
Знайомство та робота з TypeScript

Перший Angular-додаток

Структура фреймворка
Опис і функціонал основних модулів
Робота з CLI
Як підключати змінні та функції

Основи роботи з DOM в Angular

Компоненти
Директиви
Pipes
Шаблонізації
Основи створення Angular Web Components — Angular Elements

Основи роботи з даними в Angular

Декоратори
Сервіси
Прив'язка даних
Зберігання даних
Взаємодія між компонентами
Робота з HttpClient

Робота з формами в Angular

Форми в Angular
Валідація, налаштування форм
Взяття данних з різних типів форм
Реактивні форми

Основні життєві цикли додатків

ngOnChanges, ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked, ngOnDestroy
constructor

Основи роботи з HTTP

Розбір модуля HttpClient API
Інтерфейси для роботи з усіма методами HTTP запитів
Створення запитів до сервера з використанням Promises
Короткий вступ в Observables

Модуль 4: Дипломна робота

Опис.

Дипломна робота включає в себе створення сайту. Сайт має містити: реєстрацію та логін, індивідуальний кабінет (залежить від конкретного проєкту), роутинг, захищений роутинг за наявності ролей на беку, завантаження файлів, структурне розташування коду на диску, один із фреймворків або своя верстка: Bootstrap, Ant Design. Структурна верстка, розбивка на компоненти по суті. Сховище, Redux + кілька редьюсерів, серверна взаємодія і тривалі сценарії: actionCreator + Thunk або Saga, робота з беком.

Захист дипломної роботи.

Необхідно скласти практику, яка передбачає демонстрацію робочого проєкту, відповіді на будь-які запитання, пов'язані з проєктом, демонстрацію коду на вимогу. І окремо здається теорія за всією програмою курсу і за всіма темами. Теорія складається у форматі співбесіди на Junior Developer позицію, сторонньому, незалежному експерту. За обидва блоки можна отримати від 0 до 100 балів.

Ваше резюме після проходження курсу

Junior Front-End Developer

Зарплата від

45 000 євро на рік

Професійні навички:

HTML & CSS
Adaptive + Responsive designs
Git
JavaScript (DOM API, ES6+)
REST API
Angular
KISS, DRY, SOLID
SCSS, SASS
TypeScript
AJAX & HTTP
ООП

Так виглядатиме твій електронний сертифікат

Ти зможеш додати цей сертифікат собі в CV

Інструменти, які ти опануєш

HTML

CSS

Bootstrap

JavaScript

Git

GitHub

Linux

Angular

CodePen

HTML

Мова гіпертекстової розмітки сторінок, яку застосовують для розмітки документів для перегляду веб-сторінок у браузері. Її використовують для того, щоб дати браузеру зрозуміти, як потрібно відображати завантажений сайт або сторінку.

CSS

CSS (Cascading Style Sheets) або каскадні таблиці стилів - мова опису зовнішнього вигляду документа, написаного за допомогою мови розмітки. Зазвичай використовується для опису оформлення веб-сторінок, написаних мовою розмітки HTML.

Bootstrap

Bootstrap - вільний набір інструментів для створення сайтів і веб-додатків. Містить HTML і CSS шаблони оформлення для типографіки, веб форм, кнопок, міток, блоків навігації та інших компонентів веб-інтерфейсу, включно з JavaScript-розширеннями.

JavaScript

JavaScript - мультипарадигменна мова програмування. Підтримує об'єктно-орієнтований, імперативний та функціональний стилі. Є реалізацією специфікації ECMAScript. JavaScript зазвичай використовується як вбудована мова для програмного доступу до об'єктів додатків.

Git

Git - це розподілена система контролю версій, яка дає змогу відстежувати історію розроблення ПЗ і спільно працювати над складними проектами з будь-якої точки світу.

GitHub

GitHub (гітхаб) це онлайн-сервіс зберігання і синхронізації коду для програмістів і розробників додатків. Головною метою цього сервісу є підтримка спільного розроблення проєктів і контролю версій.

Linux

Linux - це сімейство операційних систем (ОС), що працюють на основі однойменного ядра. Немає жодної операційної системи Linux, як, наприклад, Windows або MacOS. Є безліч дистрибутивів (набір файлів, необхідних для встановлення ПЗ), що виконують конкретні завдання.

Angular

Angular - це відкритий фронтенд фреймворк для веб-додатків, розроблений Google, який призначений для ефективної розробки динамічних та масштабованих односторінкових застосунків. З функціями, такими як декларативний інтерфейс користувача, двостороннє зв'язування даних та модульна архітектура, Angular спрощує розробку, сприяє організації коду та поліпшує його збереженість. Його потужні інструменти, такі як система внедрення залежностей та вбудований маршрутизатор, роблять його популярним вибором для створення надійних та функціональних клієнтських застосунків.

CodePen

CodePen - інтернет-спільнота, створена для тестування і показу сніпетів на основі HTML, CSS і JavaScript. Спільнота була створена 2012 року розробниками Алексом Вазкуезом, Тімом Сабатом і веб-дизайнером Крісом Койєром.

Зарплатні очікування

Можливість кар'єрного зростання зі збільшенням заробітної плати як магніт притягує нових фахівців у сферу IT.

Щоб досягти заробітку від 85 000 євро (брутто) на рік і вище, потрібно пройти шлях від Junior до Senior. І цей шлях може бути досить стрімким - усе залежить тільки від тебе!

Junior
4000 євро / місяць

Middle
5500 євро / місяць

Senior
7000 євро / місяць

На позиції Junior тільки одна місячна зарплата в 4000 євро (брутто) дасть тобі змогу повністю покрити шестимісячне навчання на нашому курсі. Тож гроші повернуться до тебе дуже швидко!

Досвід: початок роботи

Коли ви доростете до Middle фахівця, ваш заробіток становитиме вже від 5500 євро (брутто) на місяць і вище! Домогтися такого результату можна лише за 2 роки старанної праці та постійного саморозвитку.

Досвід: 2-3 роки

Senior - це фахівець, який заробляє від 7000 євро (брутто) на місяць і вище - залежить від типу компанії, досвіду роботи та ваших цілей. Верхню межу заробітку та кар'єрних сходів визначають лише ваші амбіції - тож не зупиняйтеся на досягнутому!

Досвід: 4-5 років

Курс Front-End (Angular)

HTML5 + CSS3 + JS = NaN?

Безкоштовна консультація

Інструктор

Про що курс

Курс ідеально підійде для

Програма курсу Front-End (Angular)

Модуль 1: Верстка

Знайомство з HTML.

Знайомство з CSS.

Responsive дизайн.

Практична верстка.

Git.

Linux.

Bootstrap.

Модуль 2: JavaScript

Що таке JavaScript?

Початок роботи. Основи JavaScript.

Типи даних.

Рядки (String).

Числа (Number).

Об'єкти (Object).

Масиви (Array).

Змінні.

Оператори умов.

Цикли.

Функції.

Дата та час.

ООП.

Замикання. Таймери.

DOM.

Local Storage і Session Storage.

Модуль 3: Angular

Вступ в Angular

Перший Angular-додаток

Основи роботи з DOM в Angular

Основи роботи з даними в Angular

Робота з формами в Angular

Основні життєві цикли додатків

Основи роботи з HTTP

Модуль 4: Дипломна робота

Опис.

Захист дипломної роботи.

Ваше резюме після проходження курсу

Так виглядатиме твій електронний сертифікат

Інструменти, які ти опануєш

Зарплатні очікування

Безкоштовна консультація

Готово!

Ох, ні!