План занять курсу

Junior Frontend developer

Заняття 01 / 32

Що таке HTML і CSS
Як відбувається завантаження всього в браузер
Що таке теги та атрибути
Загальний синтаксис HTML
Підключення CSS і JS до HTML
Мета теги
Основні HTML теги для роботи з текстом
DIV/SPAN
Принципи блокової верстки

Заняття 02 / 32

Синтаксис CSS
CSS-селектори
CSS основні властивості та значення
Градієнти
Колірні моделі
Властивості width, height, font-size, color, background, background-color
Одиниці вимірювання: px, %, em, rem, deg, vw, vh
Специфічність селекторів
Підключення шрифтів, swap

Заняття 03 / 32

Позиціонування
display відображення
Обтикання
Приклад попапів
Приклади меню, що випадає
Приклади кнопок
Робота зі скролом
Центрування за шириною та за висотою
Приклад списків

Заняття 04 / 32

Flex
Grid
Плавні переходи
Анімації
BEM методологія
Робота з figma для верстальника
Що таке pixelPerfect і коли застосовується
Методологія верстки за макетом
Основи верстки по макету

Заняття 05 / 32

Поняття адаптива та респонсиву
Repaint & reflow
Viewport
Принципи та правила верстки
Приклад верстки макета
Приклади респонсивної верстки

Заняття 06 / 32

Верстка сторінки за макетом
Верстка адаптива за макетом

Заняття 07 / 32

Завантаження JS в браузер, загальні механізми
Поняття змінної та типи даних
Арифметичні оператори +,-,*,/,%
Оператор конактинації з рядком
Оператор інкременту та декременту
Оператори порозрядних логічних операцій &, |, ~, >>, <<, >>>
Приклади роботи з порозрядними операторами
Структура типів даних int, double, bool, string/char
Незмінність рядків

Заняття 08 / 32

Поняття об'єкта в JS
Поняття масиву в JS
Цикл for of, for in просте використання
Масив об'єктів, обробка його
Поняття функції
Параметри, значення, що повертається
Приклади функції
Функції вищого порядку
Стрілкові функції

Заняття 09 / 32

Symbol
Ітератори та генератори
Поглиблений принцип роботи for...of
Композиція генераторів
Приклади написання ітераторів та генераторів
Перетворення за умовчанням всіх типів
Перетворення toString, valueOf
Свої правила перетворення наPrimitive
Об'єкт window глибше

Заняття 10 / 32

Приклади роботи з функціями конструкторами
Класи та синтаксичний цукор
Підміна this - call, apply, bind
new Function і повноцінне розуміння функцій
Рекурсивні функції, приклади
Об'єкти, копіювання об'єктів
Глибоке копіювання об'єктів
Посилальні типи даних
Складальник сміття

Заняття 11 / 32

Обробка виняткових ситуацій
Створення власних класів винятків
Асинхронність, асинхронне підключення файлів
Event loop, мікро завдання, макро завдання
Ключове слово async
SetInterval, SetTimeout
Promise, проміси один в одному
Ланцюжок викликів
Ассинхронні ітератори

Заняття 12 / 32

Що таке DOM
Події на DOM елементи, спливання
Зміна атрибутів через JS
Зміна будь-яких CSS стилів через JS
Генерація HTML тегів через JS
Події користувача
DOMContentLoaded, load, beforeunload, unload
Завантаження ресурсів: onload і onerror
Делегування подій

Заняття 13 / 32

Requests
XMLHttpRequest
Fetch
Поняття Cors
Приклади обробки запитів
Написання невеликого додатку
Видалення/додавання/зміна сутності

Заняття 14 / 32

Структури даних
Що таке бінарне дерево
Реалізація простого бінарного дерева
Що таке стек
LIFO/FIFO

Заняття 15 / 32

Просунута робота з linux
Установка parcel
Установка gulp
Установка webpack
Установка yarn
Установка npm
Налаштування parcel, npm, yarn
Запуск parcel локального сервера
Приклад роботи з HTML/CSS/JS разом з parcel

Заняття 16 / 32

Конфігурація gulp, gulpfile.js
Обробка less/saas/scss/ts/html/js
Обфускації стилів та скриптів
Написання скрипта для роботи з gulp
Запуск локального сервера gulp
Використання yarn разом з gulp

Заняття 17 / 32

Конфігурація webpack, lock.js, webpack.js
Обробка less/saas/scss/ts/html/js
Обфускації стилів та скриптів
Написання конфігу для роботи з webpack
Запуск локального webpack сервера
Використання yarn разом з webpack

Заняття 18 / 32

Синтаксис SCSS
Синтаксис LESS

Заняття 19 / 32

Синтаксис SAAS

Заняття 20 / 32

Запуск серверів gulp, webpack, parcel за допомогою docker
Розгортання react об'єкта
Запуск react проекту в docker-контейнері
Робота як з docker командами так і з docker-compose
Запуск Docker

Заняття 21 / 32

Основи SEO-оптимізації
Розгляд google insights
Механізми які призводять до зеленого результату google insights
SEO-оптимізації для frontend частини сайту

Заняття 22 / 32

Загальний синтаксис Typescript
Відміності між JS і TS
Типи даних
Строгість
Массиви данних
Типи об'єднань
Псивдоніми типів
Літерали
Ключове слово type

Заняття 23 / 32

Generic функції
Не обов'язкові параметри функцій
Перевантаження функцій
Rest параметри функції
Приклади роботи з функціями
Оператор типа: keyof, typeof
Сопоставлені типи
Типи: unknown, never, void, any
Типи літералів шаблонів

Заняття 24 / 32

Вступ до ООП
Класси і об'єкти
Абстрактні класси
Інтерфейси
Модифікатори картирування
Класси Generic
Модулі у TS

Заняття 25 / 32

Поняття классу
Поняття об'єкту
Успадкування классів
Інкапсуляція
Поліморфізм
Приклади з ООП

Заняття 26 / 32

Generic
Абстрактні класси
Інтерфейси
Абстракція
Приклади з ООП

Заняття 27 / 32

Заняття 28 / 32

Заняття 29 / 32

Заняття 30 / 32

Що таке паттерни дизайну
Які бувають паттерни
Singleton, приклад
Модулі у Ecma script
Приклади декілька інших паттернів

Заняття 31 / 32

Що таке СУБД і БД
Що таке реляційна модель і порівняня з іншими моделями
Основні поняття баз даних
Загальні правила проектування баз даних
Зв'язки один до одного, дагато до одного, один до багатьох, багато до багатьох
Залежності: Функціональна, транзетивна
Що таке ключ, потенційний ключ
Що таке нормалізація
Перша нормальна форма

Заняття 32 / 32

Відповіді на усі цікавлячі питання
Розгляд Вашого резюме за бажанням
Принципи проходження співбесід
Розгляд найпоширеніших питань від рекрутерів
Розгляд найпоширеніших питань на технічній співбесіді
Рекомендації до виконання тестового завдання
Як пройти співбесіду без знань Англійської мови

Ми не жадібні

Бонусні відео

Відео 01 / 12

Тема:Лінукс

Тривалість:0 год 2 хв

Що таке віртуальна ОС
VirtualBox
Встановлення Linux ubuntu server
Встановлення ssh серверу
Віддалене підключення до серверу за допомогою shh
Налаштування мережового моста virtualBox
Режим роботи у фоновому процессі

Відео 02 / 12

Тема:Лінукс команди

Тривалість:0 год 5 хв

Команда cd
Робота з директоріями ls, .., ~, mkdir, rm, rmdir, cd, /usr/bin/*, створення команди
Робота з файлами cat, tail, grep, touch, unlink
Рівні доступу до файлів і директорій, команди chmod, chown
Створення користувача нового, створення нової группи, видалення користувача і группу
Команди: ln, mv, nano, sudo, history, reboot, shutdown

Відео 03 / 12

Тема:GIT

Тривалість:0 год 6 хв

Встановлення git, налаштунки і конфіг
Створення локального репозиторію
Статуси файлів
Принцип роботи індексу: add, commit
Створення, видалення, переключення між гілками
marge, rebase між гілками, вирішення конфліктів
Інтерактивний rebase
Файл .gitignore
Створення віддаленого репозиторію, створення shh-ключів, додавання до репозиторію

Відео 04 / 12

Тема:Встановлення пакетів

Тривалість:1 год 15 хв

Installing git, ssh server, nodejs, parcel
Встановлення git, ssh server, nodejs, parcel
Встановлення npm, yarn, react, gulp, webpack

Відео 05 / 12

Тема:Docker

Тривалість:1 год 6 хв

Поняття образу, створення образів, видалення образів
Поняття контейнеру
Файл Dockerfile
Створення образів, створення контейнерів та їх запуск, призуменненя, продовження та видалення
Загальний принцим роботи з докером
Проброс файлів, директорій, копіювання файлів і директорій у контейнер
Проброс портів
Налаштування мережі

Відео 06 / 12

Тема:Docker-compose

Тривалість:0 год 40 хв

Що таке docker-compose
Файл docker-compose.yml
Команда docker-compose down && docker-compose up -d

Відео 07 / 12

Тема:Як працює WEB

Тривалість:0 год 53 хв

Як працює web
Що таке HTTP
Коди відповідей HTTP
Дієслова HTTP
Заголовки HTTP
Сессія і куки
Синтаксис формування запиту і відповіді
Приклад роботи HTTP через найпростіший вебсервер

Відео 08 / 12

Тема:REST API

Тривалість:2 год 3 хв

Що таке API
Що таке REST
Чотири рівня REST
Коди HTTP-відповідей відповідно до REST
HTTP-дієслова відповідно до REST
робота із HTTP-заголовками
Приклад проектування Rest API

Відео 09 / 12

Тема:Swagger/postman

Тривалість:0 год 53 хв

Можливості swagger та postman
Приклад написання документації у swagger
Приклад написання документації у postman

Відео 10 / 12

Тема:Правила написання коду

Тривалість:0 год 53 хв

Загальні правила написання коду
Правила іменування змінних, об'єктів, массивів, функцій, классів, констант
Правила відступів
Правила роботи з GIT
Правила використання умов, циклів та іншого

Відео 11 / 12

Тема:Мережеві технології

Тривалість:0 год 53 хв

Що таке IP з чого складається
TCP/UDP протоколи
Сімірівнева модель OSI
Що таке DNS як працює TTL і кешування
Що таке хост і як він ризолвиться
Файл хостів hosts
Що таке маска під-мережі чи мережі
Що таке 127.0.0.1 і яка маска
Що таке зворотня маска

Відео 12 / 12

Тема:IT-Рекрутинг

Тривалість:0 год 53 хв

Що таке резюме і чим відрізняється від CV
Які розділи повинні бути у резюме
Які контактні дані додавати
Соціальні мережі
Як заповнюється досвід роботи
Як заповнюється освіта
Блок hard-скілів і soft-скілів
Ціль резюме
Супроводний лист

Технології та модулі

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

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

01JS

02TS

03CSS

04GIT

05NPM

06HTML

07YARN

08GULP

09REACT

10LINUX

11DOCKER

12WEBPACK

Які знання та навички
ви отримаєте після проходження курсу

Ви зможете розробляти інтерактивні web-додатки використовуючі бібліотеку react01

Ви будете frontend розробником який розуміє як все працює під капотом і вміє працювати як з нативним02

Отримати посаду frontend-розробника зможете з великою ймовірністью. Ви повністью будете готові к про03

Працювати як фрілансер або javascript developer в будь якій IT-компанії або працювати над власним ст04

Будете обладати усіма найактуальнішими технологіям зі світу frontend і розуміти як це працює05

Зможете легко і швидко довчитися до PHP-розробника і стати full stack php developer06

Зможете легко себе само-презентувати на співбесіді, повністью бути підготовленим для спілкування не 07

Зможете розробляти інтерактивні web-інтерфейси не тільки за допомогою бібліотеки react, а також прин08

У вас буде натренероване алгоретмічне мислення. Ви зможете реалізовувати алгоритми будь якої складно09