| Розділ | Номер тижня | Підрозділ |
| Перший сайт | 1. Вступне заняття | Знайомство з принципами роботи інтернету
Знайомство з курсом та основними термінами Завантаження та розгляд програми для написання коду – VS Code Створення першої вебсторінки з заголовком та зображеннями. |
| 2. Introduction to FrontEnd. Intro to Project | Вступ до 1-го проєкту — вебсайт міста мрії – Dream City. Починаємо проєкт з повторення моментів, які проходили на 1-му тижні: структура сайту, заголовки та картинки. Далі починаємо застосовувати на практиці нові теги, вчимося створювати списки, деталізуємо моменти по структурі сайту на прикладі вебсайту міста мрії – Dream City. Прописуємо усю частину коду головної сторінки без використання посилань, приділяючи увагу структурі. | |
| 3. Extending to Two Pages | Розглядаємо принципи роботи посилань на вебсайтах. Вчимося створювати багатосторінкові вебсайти. Додаємо другу сторінку на наш сайт та посилання (як в середині сторінки, так і між сторінками). Вчимося форматувати текст на сторінці. | |
| 4. Екстразаняття (закріплюємо попередні теми)/індивідуальне заняття | На цьому занятті ми повторюємо увесь пройдений матеріал. Крім того, надаються додаткові матеріали для вивчення особливостей використання вже знайомих тегів, а також додаткові завдання для закріплення матеріалу (у тому числі завдання підвищеної складності для тих, хто усе зрозумів і хоче спробувати свої сили) | |
| Основи Дизайну | 5. CSS: Styling more complex web page for your needs | Знайомство зі стилями CSS, які дозволяють прикрашати наші вебсторінки (задавати кольори, розміри елементів, позиціювання, анімацію та багато іншого). Крім того, ми створюємо наш новий проєкт — сайт візитку з використанням більш складних html-тегів та нових знань зі стилізації. |
| 6. Design Theory: Color and Typography | Знайомство з поняттями дизайну, вебдизайну, UI/UX. Вивчення основ теорії використання кольорів та шрифтів (типографіки). Огляд корисних інструментів для підбору найкращих шрифтів та кольорів для вебсторінок. Створення нового проєкту — вебсайту з таємним (прихованим) повідомленням-посиланням та таємним (прихованим) зображенням за допомогою анімації. На цьому занятті ми розміщуємо текст на сторінці та підбираємо для нього кольори та шрифти, зосереджуючи увагу на основних правилах вебдизайну. | |
| Основи CSS | 7. Intro to Positioning | Вивчаємо основи позиціювання (розміщення) елементів на сторінці, розглядаємо різні підходи до цього, а також особливості роботи кожного з них. Вивчаємо підходи, які дозволяють фіксувати елементи на сторінці при їх прокрутці. Особливу увагу приділяємо гнучкому (гумовому) позиціювання, завдяки якому елементи на сторінці займають оптимальне місце. Продовжуємо працювати над нашим проєктом з таємними елементами, використовуючи набуті знання з позиціювання. |
| 8. Basic Animations
Індивідуальне заняття з тренером (для індивідуального формату) |
Вивчаємо основи теорії анімації у CSS, розглядаємо особливості використання двох видів анімації за допомогою псевдокласів та за допомогою ключових кадрів. Розглядаємо багато інтерактивних прикладів анімації, у яких елементи на сторінці змінюють кольори або рухаються. Завершуємо наш проєкт з таємними елементами: створюємо нову сторінку з зображенням та додаємо на неї посилання, додаємо різні анімації: миготіння тексту, руху тексту, появи прихованих елементів на сторінці після певних дій користувача. | |
| 9. Таблиці. CSS Layout. Advanced designs | Вивчаємо процес створення та стилізації таблиць на вебсторінці та розглядаємо різні приклади, у тому числі для додавання анімації у таблиці. Знайомимося з концепцією CSS Layout та з її основними методами. Створюємо новий сайт — персональний сайт-візитку з елементами портфоліо, на якому ми використовуємо усі раніше отримані навички, а також анімацію. Крім цього, додаємо на нього списки зі зміненими маркерами у вигляді мінізображень та таблицю з кольоровими стилями.. | |
| 10. Adaptive | Розглядаємо актуальність питання адаптації наших вебсайтів під різні розміри екранів та під різні пристрої. Вивчаємо поняття Responsive та Adaptive Design. Розглядаємо їх відмінності та подібності. Розглядаємо різні приклади. Застосовуємо отримані навички для адаптації нашого попереднього проєкту — сайту-візитки — під різні розміри екрана. | |
| CSS Фреймворки | 11. Bootstrap Introduction | Розглядаємо, як спростити розробку стилів для вебсторінок та знайомимося з поняттям фреймворків. Вивчаємо основні принципи Bootstrap фреймворку, розглядаємо 2 способи підключення файлів фреймворку до наших вебпроєктів. Досліджуємо нові стилі, які йдуть разом з Bootstrap фреймворком: створення гнучкої сітки, додавання відступів, базова стилізація кнопок, блоків та тексту. Створюємо новий проєкт: сторінка для зоомагазину з використанням Bootstrap фреймворку. |
| 12. Bootstrap Components | Розглядаємо основні правила встановлення розмірів елементів залежно від розміру екранів у Bootstrap. Вивчаємо прості та просунуті компоненти Bootstrap фреймворку: кнопки, картки, каруселі, списки, навігаційне меню, а також різні підходи до стилізації елементів на сторінці. Розширюємо наш сайт зоомагазину: додаємо використання каруселі, карток та списку. | |
| 13.Екстразаняття (закріплюємо попередні теми)/індивідуальне заняття | Повторюємо увесь пройдений матеріал. Крім того, надаються додаткові матеріали для вивчення особливостей використання вже знайомих аспектів стилів та Bootstrap-фреймворку, а також додаткові завдання для закріплення матеріалу за різними напрямками. | |
| Основи Скриптингу | 14. Intro to Programming: What is JS and how to run it? Variables and types | Починаємо вивчати останню базову складову веброзробки — програмування з використанням JavaScript. Ми розглядаємо основні напрямки використання JavaScript та вивчаємо базові концепції програмування. Крім того, ми починаємо вивчення мови програмування, а саме: способів додавання скриптів на сторінку, обробку натискання кнопки, виведення інформації в інтерактивному вікні в браузері. Ми також вивчаємо поняття змінних і вчимося з ними працювати, вдосконалюючи останній створений проєкт. |
| 15. Functions and Conditions
Індивідуальне заняття з тренером (для індивідуального формату) |
Вивчаємо поняття функції у JavaScript, вчимося використовувати стандартні функції, а також створювати власні. Крім того, ми знайомимося з тим, як працювати з логічними типами, а також досліджуємо різні види умовних операторів, які дозволяють реалізувати складну логіку. Додатково ми вивчаємо основи роботи з колбек-функціями на прикладі відстеження події натискання кнопок на клавіатурі. Використовуючи отриманні знання та навички, ми починаємо створення нового власного проєкту — справжньої гри, яку поступово будемо розробляти декілька наступних занять. | |
| 16. Arrays and loops | Знайомимося зі способами організації великої кількості даних, а також з поняттям масивів. Ми також вчимося обробляти масиви за допомогою різних видів циклів, розглядаючи основні переваги кожного з них. Крім того, ми продовжуємо наш проєкт, який передбачає розробку гри, додаючи до неї нову логіку. | |
| 17. Animating through JS Building simple Games | Вчимося отримувати доступ до елементів на сторінці різними способами з JavaScript коди для їх зміни, а також додавання анімації, змінюючи будь-які параметри елементів сторінки. Ми також закінчуємо розробку нашої гри, додаючи рух елементів та поєднуючи усі елементи в єдиний проєкт. | |
| 18. Екстразаняття (закріплюємо попередні теми)/індивідуальне заняття | Повторюємо увесь пройдений матеріал. Крім того, надаються додаткові матеріали для вивчення особливостей використання вже знайомих аспектів програмування за допомогою мови JavaScript, а також додаткові завдання для закріплення матеріалу за різними напрямками (вивченими темами). | |
| Основи проєктної діяльності | 19. Debugging | Вивчаємо основні методи та засоби налагоджування вебпроєктів, тобто пошуку та усунення їх несправностей. Ми вчимося працювати з популярними інструментами, які дозволяють знаходити причину несправностей на вебсайтах, особливо у JavaScript коді. |
| 20. Deploy on GitHub + Problem Solving, Critical and Creative approaches | Розглядаємо основні принципи критичного мислення та розв’язання проблем з практичними навичками для розв’язання складних задач у сфері програмування та розробки вебпроєктів. Ми також вчимося працювати з таким інструментом як GitHub Pages, що дозволяє публікувати вебсайти у мережі Інтернет, для того, щоб з’явилася можливість поділитися ними. | |
| 21. Портфоліо | Пригадаємо усі отримані раніше навички у сфері веброзробки, структуруємо отримані знання та вчимося презентувати свої вміння з розробки вебсайтів та інтерактивних вебдодатків у вигляді портфоліо за допомогою GitHub. | |
| 22. Hosting and Domain names | Вивчаємо поняття хостингу та доменних імен, вивчаємо особливості їх вибору при розробці вебсайтів, а також розгадаємо основні кроки реєстрації та публікації своїх вебпроєктів. | |
| 23. Проєктний підхід | Вивчаємо основні поняття проєктного підходу, а також розгадаємо етапи планування та розробки реальних вебпроєктів. Крім цього, ми готуємося до створення власного фінального проєкту і досліджуємо основні кроки, які нам треба буде зробити. | |
| 24. Фінальний проєкт | Розробляємо власні фінальні проєкти, коли кожен самостійно обирає напрямок та тему свого вебсайту та створює його за раніше складеним планом. В процесі розробки ми ведемо активну дискусію та перевіряємо хід роботи, надаючи різні аспекти розглянутих тем. |