Курс Front-End (Angular)

HTML5 + CSS3 + JS = NaN?

Зараз по знижці!

Інструктор

Микола Дігтяр
Микола Дігтяр
Senior Software Engineer
5+ років в IT.
Працює в Trade Republic.
Обожнює настільний теніс і пити каву ночами.

Про що курс

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

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

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

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

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

Тих, хто хоче навчитися створювати сайти 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
Certificate Front-End (Angular)

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

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 років

Зв'яжись із нами

Допоможемо, підкажемо і знайдемо твій напрямок у сфері IT.
Залишай заявку для безкоштовної консультації або запису на курс.

Адміністратор

Нікіта

Телефон

+49 152 5263 7381

Ел. пошта

hello@codillas.academy

Готово!

Вітаємо! Ви успішно записалися на нашу безкоштовну консультацію. Наша команда незабаром зв'яжеться з Вами для уточнення деталей. Приготуйтеся розширити свої ІТ-знання та навички разом з нами в Codillas Academy!

Ох, ні!

Приносимо вибачення за незручності. Виникла помилка при відправці вашої контактної форми для безкоштовної консультації. Будь ласка, перевірте інформацію та спробуйте ще раз. За допомогою, будь ласка, зверніться до нашої служби підтримки за адресою info@codillas.com. Ми цінуємо ваше розуміння і з нетерпінням чекаємо можливості допомогти Вам у вивченні ІТ.

Записатись на IT-курси

Допоможемо, підкажемо і знайдемо твій напрямок у сфері IT.
Залишай заявку для безкоштовної консультації або запису на курс.

Адміністратор

Нікіта

Телефон

+49 152 5263 7381

Ел. пошта

hello@codillas.academy

Готово!

Вітаємо! Ви успішно зареєструвалися на наш ІТ-курс. Наша команда незабаром зв'яжеться з Вами для уточнення деталей. Приготуйтеся розширити свої ІТ-знання та навички разом з нами в Codillas Academy!

Ох, ні!

Перепрошуємо за незручності. Сталася помилка при відправці вашої контактної форми на ІТ-курс. Будь ласка, перевірте інформацію та спробуйте ще раз. За допомогою, будь ласка, зверніться до нашої служби підтримки за адресою info@codillas.com. Ми цінуємо ваше розуміння і з нетерпінням чекаємо можливості допомогти Вам у навчанні ІТ.