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

Курс Front End

Старт навчання
Старт курсу запитуйте в адміністрації
90 год. по 2-3 рази на тиждень

Опис курсу

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

 

JavaScript — головна мова frontend-розробників у web, якою вони програмують інтерфейси користувача. Їм часто доводиться займатися версткою сайтів: написанням HTML-коду та CSS-стилів для надання потрібної інформації. Саме тому для якісного фронтенду важливим є добре знання мов програмування, чистота коду та творчий підхід до завдань.

 

Протягом курсу ви опануєте структуру сторінки та наявні стилі, навчитеся працювати з HTML та CSS, дізнаєтеся, як надати сторінці того чи іншого вигляду. Після цього ви будете готові до вивчення більш складних речей, як-от мови JavaScript, її синтаксису та можливостей, фреймворків та інших додаткових інструментів, способів виконання різних завдань. А після завершення навчання можете сміливо претендувати на посаду Junior frontend developer.

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

  • Надавати продуктам ефектного зовнішнього вигляду, застосовуючи 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
  • Урок пошуку роботи

Мінімальні вимоги:

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

Лектори:


Курси Front End розробка у Дніпрі

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

spinner-it

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