Курс “Front-End+React”

• Знайомство з git control version
• Встановлення Git
• Початкове налаштування Git
• Створення Git-репозиторію
• Робота з віддаленими репозиторіями
• Основи розгалуження та злиття
• Управління гілками
• Робота з гілками
• Віддалені гілки

● Знайомство з Photoshop
● Формати графічних файлів
● Робота з інструментами
● Зміна розміру зображень
● Фільтри
● Нарізка та експорт макету веб-сайту + HTML
● Знайомство з Figma
● Реєстрація в Figma
● Експорт зображення
● Розбір отримання стилів у Figma
● Шари у Figma
● Клон макету

● Знайомство з HTML
● Структура HTML-документа
● Заголовки, блокові та малі теги
● Робота зі списками
● Зображення, iframe, посилання
● Таблиці, Форми
● Відео, аудіо
● Нові теги в HTML5

● Сторінні та внутрішньосторінкові завдання
● Мета теги
● Контент використання
● Ключові слова
● Якірний текст
● Теги заголовків
● Атрибут зображення alt & title
● 301 Redirect, canonical, 404
● Robots.txt
● Meta “robots”
● sitemap.xml

● Знайомство з CSS
● Синтаксис
● Підключення css файлу
● Селектори CSS element, id, class
● Селектори угруповання
● CSS background, background position
● CSS Комбінатор
● text properties, fonts
● Псевдо-елементи, псевдо-класи
● Lists properties
● padding, margin, border
● position, display, float, z-index
● CSS3 box-sizing property
● Градієнт,
● CSS3 2D та 3D
● CSS3 Animation
● @keyframes
● CSS3 Flexbox

• BootStrap 4.0
• Plugins Owlcarousel
• Plugins Fancybox

• Огляд мови JavaScript
• Огляд інструментарію засобів налагодження коду
• Команди Console
• Знайомство Змінні
• Літерали шаблону
• Примітивні типи
• Типи даних. Оператори
• Метод для String()
• Об’єкт Math
• Призначення деструктуризації
• Вікна діалогів
• Використання innerHTML
• Використання If/Else
• Операція вибору першого певного операнда (??)
• Умовний доступ до властивостей
• Switch
• For (in & of, await)
• Оператор in
• Оператори While та Do/While
• ToLocaleString() метод
• Масиви даних
• Операція розповсюдження масиву
• Array.of(), Array.form(), Array length, forEach()
• Методи ітератора для масивів
• Згладжування масивів за допомогою flat() та flatMap()
• Об’єднання масивів за допомогою concat()
• Організація стопок і черг за допомогою push(), pop(), shift() та unshift()
• Робота з підмасивами за допомогою slice(), splice(), fill() та copyWithin()
• Асоціативні масиви
• Стандартний клас Object, методи роботи
• Поняття функції
• Поняття стрілочних функцій
• Анонімні функції
• Callback функції
• Конструктор функції
• Рекурсія функції
• Аргумент функції
• Поняття та використання замикання
• Регулярний вираз
• Робота з рядками, датами
• Конструкція try…catch

• Огляд об’єктної моделі W3C DOM
• Об’єкт Window
• Властивості Window
• Методи Window
• Location, Location методи
• History
• Navigator
• Screen
• Огляд подій елементів у моделі DOM
• Посилання на об’єкти за ідентифікатором або ім’ям
• innerHTML
• Events
• setTimeout() & setlnterval()
• форма Валідації
• Події миші та клавіатури для елементів керування
• jQuery

• Взаємодія із сервером
• HTTP методи
• XMLHttpRequest: властивості, методи
• Опис модуля за допомогою define та виконання за допомогою require
• Формати передачі даних від сервера JSON
• URL API
• Promise Об’єкти
• Promise властивості & методи
• Symbol об’єкт
• Promise властивості & методи
• Cookies. Доступ до cookies.
• Технологія Ajax та робота з HTTP протоколами
• localStorage & sessionStorage
• IndexedDB

• Знайомство React
• React
• NodeJS
• SPA: single page application
• Структура проекту
• Файл структури проекту
• Запуск проекту на React
• React.Component
• React className
• React.Component tags
• React JS (import\export)
• React JS (css-modules)
• React JS (Styled Components)
• Styled Component Props
• Render props

Робота збиранням проекту Gulp