Курс FrontEnd, створення сайтів, рівень Advanced

 

HARD SKILLS SOFT SKILLS
Week Units Unit Description Тема Опис
1
HTML5 / CSS3
 – огляд сучасного стану frontend,
– приклади використання,
– таблиці
– використання таблиць в email
– приклад Table layout		 1 Знайомство Який я? Що можу дізнатися про себе? Внутрішній світ та методи його дослідження — самодіагностика в об’єктивних і проєктивних варіантах.
2 – CSS Grid
– порівняння з flex
– термінологія		 2 Ми – команда Командоутворення. Як працює комунікація у команді? Чим команда відрізняється від групи людей? Взаємодія та об’єднання на практиці: розвиток умінь командної гри.
3 – кросбраузерна верстка
– історія (битва браузерів)
– браузерні двигуни (html/css, js)
– вендорні префікси
– тестування верстки		 3 Командна взаємодія Продовження теми командоутворення. Полі в команді та взаємодія серед учасників. Симуляційна гра — створення власного проєкту від А до Я.
4 – CSS Препроцесори
– типи (css next, sass, less)
– варіанти встановлення
– швидкість розробки		 4 Інтелект — наше все Погляд на інтелект як на базовий життєвий ресурс людини, на необхідність та можливості її розвитку. Саме на інтелект, а не знання та навички. Дослідження засобів розвитку власних інтелектуальних можливостей у неконкурентному ігровому форматі квесту.
5 – CSS селектори
– комбінація селекторів
– вага селекторів (специфічність)
– перекриття стилів, !important
– способи підключення стилів (internal, external, inline)
– псевдокласи,
– псевдоелементи		 5 Проєктне мислення Як розвинути проєктне мислення та звичку перетворювати проблеми на завдання та проєкт, вирішуючи їх.
Формати постановки цілей по системах SMART та створення списку персональних цілей по розвитку своїх soft skills під час курсу
6 – input (text, radio, password)
– label
– атрибути
– text area
– button
– select
– HTML5 inputs		 6 Мій портрет Самопрезентація. Зовнішнє як проєкція внутрішнього. Яким мене бачать інші та яким хочу, щоб бачили? Управління враженням. Як Фідбек впливає на мене?
7 – стилізація: form, fieldset, legend, label,
– input (text, password, email), checkbox, radio, button
– проблема стилізації та походження елементів форм
– вигляд форм на різних браузерах, платформах та ОС		 7 Самопізнання Найстійкіші наші риси в період їхньої активної «ломки» — цінності, цілі, смисли. Стереотипи та вплив проти ідентичності.
Я дорослішаю і розвиваюсь — у яких напрямках, де провисання, а де перебір. У чому відчуваю успіх, а що хочу прокачати?
8 – зв’язок між фронтендом і бекендом
– Basic http (GET, POST)
– Network tab in Inspector
– приклад сторінки “sign in/up” із запитом на сервер		 8 Особистий простір Межі свого простору їх усвідомлення. Як визначити комфортну відстань для спілкування. Як не дозволяти вдиратися у свій простір та не порушувати межі інших. Зони спілкування та його відмінності для представників різних націй, різних соціальних груп.
9 – alt,
– image as link,
– picture (RWD)
– object-fit
– фільтри
– video		 9 Мої сфери впливу Діяльність, до якої ми включаємось. Наші ролі та гра в них. Результат та успіх. Амбіції та домагання. Обставини, якими я оточую себе, і які оточують мене. Сфера впливу.
10 – Atomic CSS,
– SMACSS,
– BEM		 10 Творчість у рамках Креативність та творчість. Характеристики та основні показники креативності. Методика системного новаторського мислення та використання 5 технік для інновацій. Практика розвитку креативного мислення.
11
Git
 – Git CLI
– Git Flow
– робота в команді
– Merge/pull request
– FIx conflicts
-.gitignore
– README		 11 Ресурсний менеджмент Як навчитися самому підтримувати високий рівень енергії, проявляти ініціативність, наполегливість, внутрішній локус.
12 Git продовження:
– git ammend git revert git reset
– GUI Desktop Git Clients
– Readme + Markdown		 12 Стресостійкість Види стресу та його вплив. Фактори стресу. Як впоратися зі стресом
13
JS Core
 – повторення.
– історія
– ECMASCript
– огляд типів даних
– методи (boxing coercion)
– Strings (Operators)
– Numbers
– arithmetic
– comparison		 13 Методи розвитку софт-скілів Працюємо по софтових павутинках. Методи розвитку різних напрямків софт скілів. Способи пропрацювання усі особистісних навичок
14 – Array (Stacks and Queues):
– що таке масив, навіщо потрібен, як створити, як отримати доступ до елементу
– стек та черга
– перебір елементів масиву, методи для роботи з масивом		 14 Основи комунікації Актуалізація важливості спілкування. Навіщо і як спілкуємось? Які завдання вирішуємо за допомогою спілкування? Які можливості дає нам спілкування? Можливість №1 – знайомство, контакт з іншими. Як ми можемо спілкуватися без слів?
15 – Object,
– JSON (тип даних — словник)		 15 Інформаційний потік Зміст спілкування — передача та прийняття інформації. Канали та потоки. Бар’єри та підводні камені у спілкуванні. Спільне та взаємне розуміння
16 – Type Conversion
– Logical Operators
– Assignment		 16 Невербальні комунікації Спілкування без слів. Невербальні засоби спілкування. Мистецтво довільного використання та «зчитування» невербальних сигналів у різних життєвих ситуацій
17 – Coditionals and Loops,
– Switch		 17 Емоційний інтелект Емоції, їх виникнення та прояв, переживання та почуття. Емоційні вибухи, що зашкалюють, — афект. Вплив емоцій на життя. Вираз емоцій. Управління емоціями. Розпізнавання емоцій. Емоційний інтелект.
18 – scope,
– this,
– замикання		 18 Емоційна синергія Формування та тренування емпатійних умінь. Вчимося співпереживати, спів налаштовуватися, налагоджувати контакт, бачити почуття інших та «будувати мости».
19 – prototype,
– classes		 19 Типи особистості й формати комунікації Як розпізнати тип людини для того, щоб зрозуміти як краще з нею спілкуватися та домовлятися.
20 – Date,
– Math,
– RegExp		 20 Керування конфліктами Конфлікт — як норма у спілкуванні та взаємодії. Енергія конфлікту. Стратегії поведінки у конфлікті. Практики конструктивного спілкування у конфліктній ситуації
21 – hoisting,
– let/const,
– arrow function		 21 Неконфліктна комунікація Спілкування без слів. Невербальні засоби спілкування. Мистецтво правильного
використання та «зчитування» невербальних сигналів у різних життєвих ситуаціях
Огляд складних, напружених ситуацій у спілкуванні.
22
WEB API
 – DOM (window object),
– Bubbling and capturing		 22 Маніпуляції в комунікаціях Деструктивне спілкування та маніпуляції
23 – AJAX (Fetch API, XMLHttpRequest),
– try..catch,
– async/await,
– REST API,
– WebSockets		 23 Аргументація Метою цього заняття є розвиток та тренування навичок говорити впевнено та переконливо, аргументувати свою думку.
24 Storages (Local, Session, cookie) 24 Нетворкінг Як усвідомлено підходити до формування свого кола спілкування для того, щоб він тебе розвивав і допомагав досягати твоїх цілей і як це коло безпосередньо формувати
25
JS Framework
(React.js)
 – вступ
– SPA
– вибір фреймворку (React)
– перспективи
– nodejs, npm
– bash		 25 Мій час Вивчення власної часової перспективи. Минулим, сьогоденням чи майбутнім я живу? Яка в мене орієнтація у часі?
26 Налаштування середовища розробки:
Webpack, Prettier, ESlint		 26 Прийняття рішень Проблема прийняття рішень у житті підлітка. Різні типи та обставини ситуацій вибору. Технології прийняття рішень – інтуїтивні та перевірені досвідом. Індивідуальні та групові рішення у першому наближенні.
27 Основи React (jsx, структура) 27 Управління часом Як ділити одне велике завдання на мікро? Як розставляти пріоритети? З чого почати? Таймінг у роботі над завданнями? Оптимізація дій у стислі/встановлені часові рамки.
28 components 1. statefull, classes, state 28 Оптимізація часу Розбираємося що є час, тренуємо навичку розставлення пріоритетів та планування справ, вибираємо зручний для себе підхід до управління справами.
29 components 2. stateless, propTypes 29 Планування та цілі Як ефективно планувати та вирішувати завдання, досягати поставлених цілей за допомогою спеціальних програм та технологій.
30 Lifecycle 30 Ораторська майстерність Пропрацювання основних страхів публічних виступів. Розбір структури та підготовки до виступу. Техніки самоналаштування та зменшення тривоги перед виступом.
31 Handling Events, Forms 31 Аналіз публічних виступів Перегляд відомих публічних виступів та їх аналіз по структурі та фішки в публічних виступах. Формування свого списку успішного виступу.
32 Conditional Rendering, Lists and Keys 32 Самопрезентація Як краще себе подавати, свої сильні якості, як подавати себе на співбесіді.
33 Thinking in React, Lifting State Up 33 Помилки та досвід Як реагувати на помилки та перетворювати їх на досвід, як позитивно ставитися до чужих помилок
34 Routing 34 Робота над помилками Як не здаватися в моменти складнощів, а долати їх та йти далі. Віра в себе та самодисципліна.
35 Проєкт Частина 1 35 Активне слухання Тренуємо навички активного слухання, поваги до співрозмовника, вміння донести слова так, щоб інші їх почули
36 Проєкт Частина 2 36 Комунікації та емоції Афективна сторона спілкування. Можливості спілкування у вираженні емоцій, почуттів, бажань та потреб. Вплив інших. Вибудовування відносин та емоційних взаємодій
37 Проєкт Частина 3 37 Зони спілкування Дистанція у спілкуванні. З ким та як говорити? Регулюємо дистанцію. Розвиваємо навички контактування та наближення до іншого, а також проводимо межі у спілкуванні. Уміння давати та приймати відмову.
38 Проєкт Частина 4 38 Стратегії переконання Як виявляти потреби іншої людини та можливості для управління та впливу на думку іншої.
39 Проєкт Частина 5 39 Постановка цілей Формати постановки цілей по системах, BSQ, GROW. Цілі короткострокові та довгострокові. Методика цілепокладання 1-3-10 років. Візуалізація цілей за методом Сільва.
40 Фіналізація портфоліо 40 Фокус на результат Спілкування без слів. Невербальні засоби спілкування. Мистецтво довільного використання та «зчитування» невербальних сигналів у різних життєвих ситуацій
Модуль з працевлаштування
41
Старт роботи над проєктом для замовника
 Overview ІТ-ринка
Варіанти розвитку для FrontEndDev
Ревʼю програми навчання
Старт роботи над проєктом для замовника		 41 Працевлаштування
Короткий огляд модуля з працевлаштування.
Основи стратегії розвитку продукту.		 Заняття з гостьовим лектором (PM), який розповість про:
– Працевлаштування. Що для цього потрібно
– Вибір шляху:
ДЛЯ IT: аутсорс, фриланс, продукт чи підприємництво
ДЛЯ ДИЗАЙНУ: digital ТА рекламні агенції, фриланс, чи підприємництво
– Зростання в компанії
– Важливість англійської для працевлаштування
– Цінність неоплачуваних стажувань та досвіду роботи з реальними проєктами
– Що таке пітчинг/презентація проєктів, до чого потрібно готуватися
– Як має виглядати кінцева презентація готового продукту і на що потрібно звернути увагу
42 Silent Mode: верстка макета за 100 хвилин 42 Основи проджект менеджменту – Що таке роадмеп, для чого і як створювати?
– Agile, waterfall, kanban
– Інші основи проджект менеджменту
43 Аналіз макета, хто та що зробив
Робота над проєктом для замовника		 43 Робота з клієнтами Заняття з гостьовим лектором (PM),
– перша зустріч з клієнтом: як готуватися та які запитання ставити
– як правильно комунікувати з клієнтом продовж проєкт
– як правильно писати листи клієнту, давати фітбек, домовлятися про наступні зустрічі й т.д.
– коли після мітингу приходить фолов-ап з тим що обговорювати та що потрібно буде зробити до наступного мітингу
– робота з офіційними листами
– робота з брифами
44
Хард проєкт
 Хард проєкт (REACT) Частина 1 44 SCRUM Знайомство з технікою Scrum, як методом управління проєктами. Можливості та сильні сторони використання у своїй діяльності
45 Хард проєкт (REACT) Частина 2 45 Робота з клієнтами. Частина 2 – Відповідальність в роботі з клієнтами та працедавцями.
– Робота з дедлайнами
– Пріоритетність завдань
– Презентація демо продукту клієнту
– Робота з фідбеком від клієнта
– Робота над помилками
46 SCRUM SCRUM: як використовується ця методологія в компаніях
– рольова гра в групі
– розбір кейсів різних компаній
– книжки та статті: аналіз
– Trello
– проєкт в командах на 3-4 тижні		 46 Клієнтоорієнтованість У чому цінність клієнтоорієнтованого підходу, як це може допомогти у: подальшій роботі, у бізнесі, у житті. Аналіз потреби клієнтів, основні стратегії поведінки щодо клієнта. Як втримувати вже наявних клієнтів.
47 Робота над проєктом для замовника Робота над проєктом для замовника 47 Вигорання Як не перенавантажити себе?
Що робити, коли на тобі велика кількість проєктів?
Як працювати, коли є складності в команді, з клієнтами тощо.
Як все зробити вчасно і не вигоріти?
48 Backend Backend: нащо він потрібен для FrontEndDev.
Де використовується?
Завдання: прикрутити форму макета лендінгу з можливістю збереження інформації при її заповненні		 48 Формування резюме Складаємо повноцінне CV з гостьовим лектором (HR).
49 Дизайн Дизайн: нащо потрібен та коли використовується в роботі FrontEndDev
Завдання: внести спеціальні правки (для кожного свої, які відрізняються від інших) по дизайну в макеті лендінгу, який зверстаний на 3-4 тижнях навчання), демонстрація Figma.		 49 Оформлення профайлу – Робота з мотиваційними листами
– Оформлення Linkedin
– Фіналізація CV
50
Робота над проєктом для замовника
 Аналіз зробленого по проєкту. 50 Формування особистого бренду ІТ/дизайн-ринок. Ситуація на ринку
Пошук роботи. Платформи для пошуку роботи.
Оформлення особистого бренду. Як поводитися в соц.мережах?
51 Робота над проєктом для замовника 51 Проходження інтерв’ю — письмове та усне. Теорія На що потрібно звернути увагу при проходженні співбесіди.
Як готуватися? Розглядаємо усі аспекти, на яких потрібно зосередитися при підготовці до співбесіди
52 Проходження технічного інтерв’ю. Особливості та підготовка до технічного інтерв’ю. Практика проходження. 52 Проходження інтерв’ю. Практика Симуляція співбесіди з гостьовим лектором (HR).
53 Гостьова лекція Гостьова лекція про запуск своєї IT-компанії 53 Пошук клієнтів та компаній Ресурси для пошуку компаній або клієнтів. Загальні підходи в процесі пошуку.
54
Фіналізація проєкту для замовника
 Хард проєкт. Частина 1 54 Трудові відносини Про трудові відносини з компаніями.
Про укладання договорів.
Про роботу через ФОПа.
Про авторське право.
55 Хард проєкт. Частина 2 55 Препітч Робимо презентацію. Тренуємося бути класними спікерами. Дивимося та даємо фідбек на інші презентації.
56. Презентація проєкт експертам (Пітч)
Рефлексія та зворотний зв’язок