Курс Frontend Developer

Курс Frontend Developer враховує сучасні потреби ринку та скіли, які підвищують шанс на отримання оферу - від верстання інтерфейсів завдяки HTML/CSS до написання коду на JavaScript та підвищення продуктивності за допомогою ReactJS та Next.js

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

Frontend/HTML/CSS/JS/GIT

• Розумітимете роль та функції Frontend-розробника
• Розглянете технології та мови - HTML / CSS / JavaScript
• Ознайомитеся з інструментами розробки - IDE, DevTools
• Дізнаєтеся, що таке система контролю версій Git

Вступ. Основи Web-розробки

• Дізнаєтесь основні принципи роботи веббраузерів
• Зрозумієте значення кросбраузерності та основні відмінності в інтерпретації ними
• Розрізнятимете завдання веброзробника, пов'язані з роботою в клієнтській частині вебзастосунків
• Зрозумієте принцип роботи з системою контролю версій Git
• Матимете актуальний акаунт на GitHub та створений репозиторій для роботи з курсом

Мова розмітки HTML

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

Основи розробки на JavaScript

• Вивчите основи JS, навчитеся працювати із function, callbacks, prototype, а також із глобальними об'єктами document, window, navigator
• Дізнаєтеся, що таке HTML5 API та доступні його різновиди
• Застосовуватимете кожен із запропонованих API

Робота з CSS

• Знатимете різні типи відтворення, методів позиціювання
• Працюватимете з текстом, кольором, фоном та технологією Flexbox

Анатомія вебзастосунків. Основи принципів UI/UX

• Створюватимете макети зі статичною або адаптивною сіткою (layout anatomy)
• Орієнтуватиметеся в принципах UI/UX-дизайну
• Проєктуватимете зручну для сприйняття розмітку вебзастосунку (сайту)

Робота з SASS (SCSS) препроцесором

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

Вступ до розробки на JavaScript

• Використовуватимете структуру коду, змінні, типи даних
• Здійснюватимете логічні порівняння та ухвалюватимете рішення на основі результатів цих порівнянь
• Виконуватимете операції або обробку даних на основі визначених умов
• Матимете знання щодо створення функції, а також функцій, які можна призупинити й відновити під час виконання
• Знатимете, як використовувати обробники подій (event handlers)

Поглиблення в розробку на JavaScript: структури даних

• Працюватимете з різними типами структур даних, як-от масиви (Array), об'єкти (Object)
• Створюватимете багаторівневі структури даних, наприклад, масиви об'єктів або об'єкти, що містять інші об'єкти
• Використовуватимете об'єкти Set, Map та Object для збереження та обробки даних
• Зможете маніпулювати з масивами, використовуючи методи, як-от push, pop, shift, unshift, splice
• Використовуватимете об'єкт Reflect для виконання різних операцій: створення нових об'єктів, виклик методів, отримання та встановлення властивостей тощо

Поглиблення в розробку на JavaScript: робота з мережею

• Розроблятимете базове RESTful API, використовуючи різні HTTP-методи, як-от GET, POST, PUT, DELETE
• Орієнтуватиметесь, які URL-шаблони використовують для маршрутизації запитів
• Використовуватимете Fetch API для відправлення HTTP-запитів з клієнтської сторони вебзастосунку
• Працюватимете з Promise для управління асинхронним кодом
• Використовуватимете async-await для зручного написання асинхронного коду
• Налагоджуватимете мережеві запити за допомогою DevTools

ООП-програмування

• Зрозумієте основні концепції ООП - класи, об'єкти, спадкування, поліморфізм, інкапсуляція
• Навчитеся використовувати кожну концепцію на практиці

Патерни проєктування

• Знатимете основні патерни проєктування, які допомагають розробляти ефективний і підтримуваний код
• Зрозумієте значення патернів у проєктуванні вебзастосунків

Принципи програмування

• Ознайомитеся з принципами програмування
• Матимете достатньо знань, щоб писати чистий та зрозуміли код
• Знатимете, як не допустити повторень у своєму коді, аби зекономити час та ресурси на розробку

Методи генерації вебсторінок

• Вивчите типи вебрендерингу та навчитеся їх розрізняти
• Навчитеся вибирати тип рендерингу залежно від ситуації

Розробка на ReactJS

• Ознайомитеся зі структурою React-застосунку та його основними компонентами
• Працюватимете з JSX (розширення синтаксису JavaScript) для опису інтерфейсу користувача

Поглиблення в розробку на ReactJS

• Розумітимете роботу із хуками, чітко розрізнятимете їхні типи за призначенням
• Набуде навичок у створенні Custom Hooks
• Вмітимете працювати з React Router

Розробка на ReactJS. Знайомство з бібліотекою Redux

• Розберетеся в глобальному та локальному контексті в ReactJS
• Розглянете бібліотеку Redux для керування станом додатка

UI/UX frameworks

Отримаєте знання з Bootstrap та Tailwind CSS, щоб використовувати їх у розробці вебінтерфейсів.

Розробка на JavaScript: створення вебзастосунку

• Матимете практичні навички та рекомендації щодо розробки SPA-застосунку на рівні реального вебзастосунку з використанням ReactJS
• Застосовуватимете SCSS та фреймворк Tailwind (або Bootstrap)
• Використовуватимете CSR (Client-Side Rendering)
• Розробите повноцінний single-page application із керуванням стану та використанням CSS Framework

JavaScript Server-Side. Знайомство з фреймворком Next.js

• Розумітимете принципи серверного рендерингу та можливостей Next.js для побудови універсальних вебзастосунків
• Відрізнятимете особливості Data Fetching: getServerSideProps, getStaticProps, getStaticPaths. Знатимете, для чого і коли використовувати кожен з них
• Знатимете роутинг Next.js
• Описуватимете внутрішнє API для повернення JSON-даних із сервера
• Матимете навички в оптимізованому використанні картинок на рівні SSR із Next.js
• Працюватимете із Lazy Loading, кешуванням

JavaScript Server-Side. Практика Next.js

• Працюватимете з розробкою server-side application з використанням Next.js
• Підключатимете фреймворки для стилізації типу Tailwind, а також проводитимете налаштування кастомних тем
• Розберетесь із роботою маршрутизатора на практиці та роботою кешування на рівні фреймворку
• Матимете практичні навички використання SSR, CSR

Vercel. Публікація готового проєкту

• Створюватимете git-репозиторію з підключенням до системи деплойменту
• Налаштовуватимете деплоймент репозиторію із вебзастосунком на рівні Vercel
• Матимете навички застосування змін через Pull Request у GitHub

Підбивання підсумків. Поширені запитання на технічній співбесіді

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

• Топовий інструментарій розробки
• Оформлення та розширення портфоліо
• HR-консультація

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

Андрій Римарук - Senior JavaScript Frontend Developer at Welltech