Курс Front-end з нуля

На Вас чекають живі онлайн-заняття, під час яких Ви вивчатимете основи Front-end розробки та одразу ж застосовуватиме знання на практиці. Разом із досвідченим Front-end Engineer Ви напишете свій код та проаналізуєте помилки.

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

Огляд курсу. Основи синтаксису HTML

• Інструменти
• Структура HTML-документа
• HTML-теги та їх атрибути
• Семантичні елементи HTML5

Основи синтаксису CSS

• Види селекторів у CSS
• Специфіка селекторів
• Одиниці розмірів у CSS
• Налаштування фону

Основи HTML форм, верстка простої форми реєстрації

• Поля введення різних типів даних
• Типи кнопок
• Ідентифікатори та значення

CSS бокс модель / Flex box

• Потік сторінки та управління ним
• Відступи
• Вирівнювання

Position

• Види позиціонування
• Верстка модального вікна

Grid layout

• Види сіток
• Верстка сітки товарів за допомогою grid
• Властивість gap, відступ між грід елементами

Адаптивна верстка

• Що таке адаптивна верстка?
• Запити за допомогою Media queries
• Приклад верстки адаптивного меню

Препроцессори / SCSS

• Основи SCSS
• Змінні та їх відмінність від CSS-змінних
• Синтаксис

Практика верстки реального шаблону

• Верстка шаблону
• Підсумок CSS
• Практика

Основи JavaScript

• Синтаксис
• Типи даних
• Оператори

Функції | Основи DOM | Події в JS

• Масиви
• Функції
• Додавання відкриття/закриття меню

Функції поглибленно | DOM в деталях

• Методи масивів push | pop | shift | unshift | slice | splice
• Селектори querySelector | querySelectorAll
• Події миші, клавіатури, елементів управління, CSS

Динамічне створення елементів HTML за допомогою JS

• document.createElement()
• Перетворення массивів в елементи HTML
• Створення списку завдань за допомогою localStorage

Асинхронна поведінка, контекст виклику

• Залишкові параметри та оператор розширення
• this|call|apply|bind
• Рекурсія/стек

AJAX, взаємодія з сервером, promise

• Поняття клієнт | сервер
• Огляд інструментів для налагодження мережевих запитів
• Асинхронна поведінка

Практика створення асинхронного компонента сторінки: генератор випадкового рецепту

• Знайомство з API random food
• Створення функцій-компонентів
• Підключення до серверного API

Огляд бібліотеки React JS

• Способи підключення
• Ідея компонентів
• createrReactApp

Приклад створення додатка за допомогою React JS

• Огляд API themoviedb.org
• setup оточення для розробки використовуючи createReactApp
• Створення сторінки списку фільмів

Особливості курсу

• Zoom-лекції та практикуми
• Тренер та ментор в чаті групи
• Перевірка і код рев'ю Д/З ментором з коментарями
• Сертифікат по закінченню курсу (при успішному захисті фінального проекту і виконаних Д/З)
• Підтримка клієнтського сервісу
• Відеозаписи блоку "IT Career"
• Участь в Web Academy Club

Викладачі курсу

• Ілля Литвинов - Senior Front-end Developer
• Анастасія Бібік - React/React Native Developer