Курс Front-end

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

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

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

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

HTML

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

CSS

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

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

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

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

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

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

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

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

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

Grid Layout

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

Правила іменування класів за методологією BEM

Бібліотека Bootstrap

Sass

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

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

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

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

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

Цикли й функції

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

Масиви

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

Об'єкти

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

Робота з Git

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

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

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

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

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

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

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

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

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

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

Події

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

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

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

HTTP

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

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

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

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

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

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

• Заняття 3 рази на тиждень (Вт, Чт, Пт з 19:00-22:00)
• Робота над реальними проєктами у групах
• Новітні механіки роботи
• Доступ до матеріалів протягом року
• Мінікурс з soft skills
• Два заняття з англійської
• Підготовка до пошуку роботи

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

• Сергій Скубіда - Front End Developer
• Єгор Маркевич - JavaScript Developer
• Владислав Сидорчук - C# / .NET Developer
• Сергій Волошин - Front End Developer у компанії Element agency