https://prometheus.org.ua/prometheus-plus/front-end-ciklum/

Frontend. Базовий курс від Ciklum
Пройдіть шляхом frontend розробника разом із Ciklum – від верстки до готових сайтів і вебдодатків лише за 16 тижнів. Опануйте програмування на JavaScript та навчіться створювати інтерактивні інтерфейси в React на власному курсовому проєкті.

Що ви вивчите?
Курс дозволить отримати практичні навички, достатні для роботи на позиції Trainee Frontend Developer, а саме:

• сформувати глибоке розуміння головних технологій для frontend розробника: HTML, CSS, JavaScript;

• заглибитись у нюанси доступності, адаптивної верстки для будь-яких пристроїв;

• навчитися застосовувати JavaScript для динамічності та інтерактивності вебсторінок;

• навчитися виконувати тестування React-застосунків;

• навчитися створювати інтерактивні інтерфейси в React;

• пройти шлях створення повноцінного вебсайту — від макета до завантаження на хостинг.

Формат курсу

• Відеолекції

• Презентації

• Тестування

• Практичні завдання

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

• Блоки «Розвиваємо алгоритмічне мислення»

• Курсова робота

• Матеріали для самостійного опрацювання

• Чат-підтримка в Slack

• Менторська підтримка

• Підтримка куратора

• Живі зустрічі з менторами курсу

• Сертифікат



Тривалість

• 16 тижнів

• 58 лекцій

• 5 воркшопів

• 2 вебінари

• 4 QA-сесії

• 40+ практичних завдань

• 18 блоків тестових питань

• 1 курсовий проєкт

• Рекомендоване навантаження – 8-12 годин на тиждень


Програма курсу
1
Тиждень 1
1. Intro to front-end

Що таке front-end? Основне призначення.

2. IDE



Середовище розробки. Visual Code та альтернативи.
и.
3. HTML

3.1. HTML-документ. Структура. Теги.
3.2. HTML Блочні теги.
3.3. HTML Рядкові теги. Медіаелементи.


Тиждень 2
4. Forms. HTML Advanced

4.1. Форми.
4.2. Семантична верстка.
4.3. Доступність та додаткові атрибут


Тиждень 3
5. CSS

5.1. Вступ в CSS, Способи підключення до HTML-документу.
5.2. Селектори, специфікація, наслідування.
5.3. Каскад CSS. Cпецифічніcть CSS селекторів, наслідування селекторів.

5.3.1. СSS властивості. Color, Background, Text, Font-family.


Тиждень 4
5.3.2. СSS ефекти. Text-shadow, Box-shadow, Transition, Transform.

5.4. Позиціонування.
5.5. Flexbox-модель.
Воркшоп «HTML+CSS?».

Тиждень 5
6. CSS Advanced

6.1. Верстка для мобільних пристроїв.
6.2. Препроцесори.
6.3. CSS-фреймворки.

Тиждень 6
7. Browser

7.1. Принцип роботи сучасних веббраузерів.
7.2. Перехід від HTML до DOM. Інструменти розробки.
7.3. Мережеві запити.

8. Основи алгоритмізації і програмування

8.1. Алгоритм і його властивості
8.2. Величини. Ідентифікатор величини
8.3. Типи даних
8.4. Вказівка присвоювання
8.5. Лінійні алгоритми
8.6. Лінійні алгоритми (задачі)
8.7. Основні логічні операції
8.8. Розгалуження (скорочена форма)
8.9. Розгалуження (повна форма)
8.10. Розгалуження (задача)
8.11. Цикл з параметром
8.12. Цикл «поки» з післяумовою
8.13. Цикл «поки» з передумовою
8.14. Метод покрокової деталізації
8.15. Допоміжні алгоритми
8.16. Одновимірні масиви


Тиждень 7
9. JS Basics

9.1. Вступ до JavaScript. Підключення до веб-сторінки. Тег <script>.
9.2. Структури даних. Змінні.
9.3. Оператори.
Розвиваємо алгоритмічне мислення. Лінійні алгоритми.
9.4. Оператори розгалуження.
Розвиваємо алгоритмічне мислення. Алгоритми з розгалуженням.
9.5. Цикли.
Розвиваємо алгоритмічне мислення. Циклічні алгоритми.

Тиждень 8
9.6. Функції.
Розвиваємо алгоритмічне мислення. Допоміжні алгоритми.
9.7. Контекст. Стрілкова функція.

9.7.1. Методи масивів.
Розвиваємо алгоритмічне мислення. Алгоритми опрацювання масивів.
9.7.2. Робота з об’єктами.

9.8. Робота з DOM (маніпуляції, події).
9.9. Класи. Наслідування класів.
Воркшоп «Робота з масивами та об’єктами?».

Тиждень 9
10. JS Advanced

10.1. Event Loop.
10.2. Асинхронність 1.
10.3. Асинхронність 2.
10.4. Асинхронність 3.
10.5. Зв’язок клієнт-сервер. HTTP-запити, AJAX.


Тиждень 10
Практикум «Розробка вебдодатків засобами HTML, CSS, JS»

1. Воркшоп «Розробка вебдодатку засобами HTML, CSS, JS».
2. Завдання курсового проєкту (Модуль 8. JS Basics).
3. Завдання курсового проєкту (Модуль 9. JS Advanced).

Тиждень 11
11. Typescript

Огляд TypeScript.
Performance and Security. «Продуктивність роботи інтерфейсів та безпека у веброзробці».

12. Build

12.1. Середовище збірки. Пакетні менеджери.
12.2. Інструменти збірки. Налаштування Webpack.


Тиждень 12
13. React Basics

13.1. Вступ до React, Virtual DOM, JSX.
13.2. Компоненти. Типи та життєвий цикл.
13. 3. Інструменти розробки React.

14. React Advanced

14.1. Router.

Тиждень 13
14.2. Хуки. useState, useEffect.
14.3. Хуки. useMemo, useCallback, useRef.
14.4. Обробка помилок.
Практикум «Створення вебдодатків засобами React».
14.5. Портали.

Тиждень 14
15. State management

15.1. Збереження даних в React: Context API.
15.2. Керування станом. Redux.

Воркшоп «Створення React застосунку (запит даних, обробка помилок)»

1. Завдання курсового проєкту (Модуль 14. Context API).
2. Завдання курсового проєкту (Модуль 12. React Basics).
3. Завдання курсового проєкту (Модуль 13. React Advanced).
4. Завдання курсового проєкту (Модуль 14. Context API).

Тиждень 15
16. Testing

16.1. Вступ до тестування. Типи тестів.
16.2. Unit-тестування.
16.3. Тестування React застосунку.

Тиждень 16
17. Deployment

17.1. Розгортання коду.
17.2. Налаштування автоматизованого розгортання.

18. Quality

18.1. Якість коду. DRY, KISS, YAGNI.
18.2. Базові алгоритми.

19. Recommendations.
Рекомендації до підготовки резюме