Курси Front end Дніпро, навчання Фронтенд розробки з нуля | ITEA DNIPRO

Курс Front End

Старт навчання
06.07.2022
90 год. по 2-3 рази на тиждень

Після курсу Ви зможете:

  • Надавати продуктам ефектного зовнішнього вигляду, застосовуючи HTML & CSS та JavaScript
  • Розбиратися в основних інструментах та особливостях JavaScript
  • Працювати з консоллю розробника та перевіряти код на предмет помилок
  • Створювати анімації, інші інтерактивні елементи та додавати їх до продукту
  • Впливати на процес оптимізації завантаження сторінки та робити код більш читабельним
  • Вигідно презентувати себе роботодавцеві

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

1. Вступ у веб-технології

  • Призначення технологій
  • Стек розробки для сайту
  • Принцип роботи клієнт-сервер
  • Консоль розробника
  • Текстовий редактор і IDE
  • Що таке HTML & CSS & JS і їх взаємодія

2. HTML

  • Базові принципи верстки
  • Знайомство з поняттям тегу і атрибуту
  • Обов’язкова структура будь-якої веб-сторінки
  • Поняття малих і блокових елементів веб сторінки
  • Поняття парних і непарних тегів
  • Семантичні теги
  • Спецсимволи
  • Робота з тегами і атрибутами
  • Робота з посиланнями і якорями
  • Робота з текстом і коментарями
  • Робота з різними системами кольорів в HTML
  • Робота з зображеннями
  • Нумеровані і марковані списки
  • Робота з блоками (div)
  • Таблиці
  • Форми
  • Елементи форм (інпут)
  • Айфрейми
  • Підключення різних модулів до документу HTML
  • Форматування елементів HTML

3. CSS

  • Що таке CSS?
  • Базові принципи написання стилів
  • 3 способи додавання CSS в HTML сторінку
  • Зовнішні таблиці стилів
  • Відносні і статичні одиниці вимірювання
  • Робота зі шрифтами (сімейства, стилі, розміри, насиченість)
  • Робота з межами елементів (бордер радіус, тіні)
  • Робота з відступами і розмірами елементів
  • Градієнти
  • Робота з властивостями float і clear
  • Flex box
  • Робота з фоном (зображення і колір, розміри, прозорість)
  • Селектори
  • Селектори поглибленого рівня
  • Пріоритети стилів
  • Перезапис стилів
  • Псевдокласи, псевдоелементи
  • Робота з анімацією елементів
  • Валідація
  • Медіазапити

4. Робота з браузером

  • Встановлення корисних розширень для верстки
  • Відладник коду

5. Хостингові і доменні панелі

  • Робота з Git і хостинг на Git

6. Різні види верстки

  • Адаптивна верстка
  • Гумова верстка
  • Pixel perfect верстка
  • Статична верстка
  • Кросбраузерна верстка
  • Змішана верстка

7. Figma для розробника

  • Поняття растрової та векторної графіки
  • Переваги й особливості Figma
  • Огляд панелей та інструментів
  • Сітки
  • Шари і компоненти
  • Експорт параметрів і графіки
  • Редагування елементів

8. Grid layout

  • Побудова мережі
  • Робота з горизонтальним і вертикальним вирівнюванням
  • Об’єднання елементів
  • Методи роботи з комірками

9. Правила іменування класів по BEM


10. Бібліотека Bootstrap


11. SASS

  • Підключення
  • Правила і директиви
  • Керуючі директиви і вирази
  • Використання міксинів
  • Застосування на практиці

12. Вступ до мови програмування JavaScript

  • Загальна інформація про мову та її особливості
  • Довідники, специфікації і посилання на них
  • Консоль розробника
  • Зовнішні скрипти і порядок їх підключення
  • Змінні та правила їх іменування
  • Типи даних та приведення типів

13. Основні оператори

  • Оператори порівняння і логічні значення
  • Умовні оператори
  • Логічні оператори
  • Конструкція switch

14. Цикли і функції

  • Цикли ‘for’, ‘while’, ‘do … while’
  • Рекурсія і поняття стека
  • Поняття і синтаксис функції
  • Функціональні вирази
  • Області видимості
  • Псевдомасив ‘arguments’
  • Функції зворотного виклику (callback)

15. Масиви

  • Перебираючі методи
  • Внутрішнє представлення масивів

16. Об'єкти

  • Передача за посиланням
  • Перебір властивостей
  • Стандартні вбудовані об’єкти

17. Робота з Git

  • Робота з Git Bash
  • Workflow від створення сховища до його відправки на віддалений сервер
  • Робота з гілками
  • Робота з конфігураційними файлами

18. Прототипне наслідування

  • Прототип об’єкта
  • Властивість prototype
  • Вбудовані класи
  • Функція - конструктор
  • Успадкування класів
  • Внутрішня структура методу 'extend' і поліфіл 'Object.create'
  • Функціональне успадкування

19. ООП (об'єктно-орієнтоване програмування)

  • Загальна інформація про ОВП
  • Інкапсуляція
  • Поліморфізм
  • Успадкування
  • Абстракція даних
  • Поняття 'клас'

20. Контекст виклику та замикання

  • Робота з 'this' (4 способи використання)
  • ES6 стандарт (стрілочні функції)
  • ES6 let / const + var + hoisting
  • Використання 'call', 'apply'
  • Дескриптори, гетери та сетери властивостей
  • Шаблон проектування 'Singletone' через замикання
  • Збиральник сміття

21. Робота із системою контролю версій


22. Глобальний об'єкт Window та робота з DOM

  • Загальна інформація про 'window', 'navigator', 'document', 'location', 'history'
  • Навігація по DOM елементам
  • Властивості вузлів
  • Додавання та видалення вузлів
  • Робота зі стилями
  • Робота з координатами

23. Події

  • Вступ у браузерні події
  • Порядок обробки подій (Event Loop)
  • Асинхронні події
  • Робота з SetTimeout / SetInterval
  • Спливання і перехоплення
  • Делегування подій
  • Події з використанням миші, клавіатури та прокручування
  • Завантаження документа

24. Формування сторінки у браузері

  • Формування DOM покроково
  • Формування Render Tree
  • Порядок формування CSSOM
  • Оптимізація, мініфікація, робота з HTTP Cache

25. HTTP

  • Вступ у протокол HTTP
  • Переваги та недоліки протоколу
  • Робота з AJAX
  • Загальна інформація про RESTful API
  • JSON
  • CORS
  • Promise + async await

26. Способи зберігання даних у браузері

  • Cookies
  • LocalStorage, sessionStorage
  • IndexedDB (import / require)
  • Manifest
  • ServiceWorker
  • Progressive Web Application

27. Як скласти резюме і пройти співбесіду

  • Структура резюме
  • FAQ
  • Як вести себе на співбесіді
  • Основні помилки на співбесіді
  • Урок англійської мови №1
  • Урок англійської мови №2
  • Урок пошуку роботи

* Примітка: зазначені знижки не сумуються з іншими діючими акціями та спеціальними пропозиціями. Знижка застосовується тільки до нових заявок та при умові повної оплати курсу. Якщо у Вас виникли питання, звертайтеся за консультацією до наших менеджерів!

spinner-it

Курс на IT — повний вперед! Дізнатись актуальний розклад