Web Development

Заняття 1. Введення в HTML

• Мова розмітки гіпертексту, що це таке та їх поняття.
• Завдання зі Шреком.
• Ознайомлення з тегами. Теги верхнього рівня.
• Додавання структури сайту (Header, Navbar, body, Footer).
• Головні поняття верстки.
• Сайт Stark Industries - додаткове завдання (верстка).

Заняття 2. Мультимедіа та вбудовування

• Робота із зображеннями, теги зображення.
•  Пошук в інтернеті - розуміння як працюють сайти в пошуку так як працюють теги медіа.
• Відео та аудіо контент.
• Перенесення та списки.
• Сторінка оркестру (практика верстки).

Заняття 3. Фрейми і розмітка сторінки 

• Тег iframe.
• Власний фрейм.
• Свято ліхтарів (верстка).
• Секційні елементи HTML. 
• Супер Маріо (верстка).

Заняття 4. Знайомство з CSS

• Що таке CSS.
• Кольори в CSS.
• Командна робота (розуміння штату програмістів, хто за що відповідає).
• Налаштування шрифту .
• Підключення сторонніх шрифтів .
• Проектна робота (Підсумок 4 уроків).

Заняття 5. Селектори CSS

• Селектори класу та ідентифікатора.
• Застосування селекторів.
• Спадкування (Наслідування) в CSS.
• Застосування успадкування.
• Способи підключення стилів.
• Застосування способів підключення.
• Найсвіжіші новини (практика верстка сайту новин).

Заняття 6. Блокова модель CSS

• Блокові та рядкові елементи.
• Похід у магазин.
• Блоковий модель.
• Ширина та висота.
• Межа елемента.
• Відступи-близнюки.
• Перша секція сайту.

Заняття 7. Посилання та властивості фону

• Гіперпосилання.
• Елементи-пустушки.
• Властивості фону.
• Створення сайту.

Заняття 8. Позиціонування

• Потік документа, статичне позиціонування.
• Відносне позиціонування.
• Абсолютне позиціонування.
• Фіксоване позиціонування .
• Проєктна робота.

Заняття 9. Вступ до дизайну

• Вступ до дизайну.
• Два кити дизайну.
• UI дизайн - у чому  схожі.
• UI дизайн - у чому  різні .
• Назва - секрет.
• UX дизайн.
• Велике дослідження.

Заняття 10. Аналіз пошукових запитів

• Ідея для проєкту .
• Глобальні тренди.
• Аналіз пошукових запитів.
• Визначення цільової аудиторії.
• Принцип роботи пошуку.
• Мета теги.

Заняття 12. Макет підсумкового проєкту

• Вступ до Figma.
• Реєстрація в figma.
• Тренування.
• Макет підсумкового проєкту.

Заняття 13. Flexbox

• Навіщо потрібен Flexbox.
• Принцип роботи Flexbox.
• Justify-content. 
• Align-items.
• Flex-direction. 
• Flex-wrap та align-content.
• Flex 1.
• Жаби - додаткове заняття (квіз).

Заняття 14. Верстка сайту за макетом

• Робота з VS Code.
• Встановлення розширень.
• Підготовка робочого простору.
• Emmet абревіатури.
• Завантаження картинки сайту з Figma.
• Верстка проєкту.

Заняття 15. Нові фішки та доопрацювання проєктів

• Невеликий фінал.
• Кросбраузерність.
• БЕМ методологія.
• Доопрацювання проекту.

Заняття 16. Завершення проекту

• Аналіз верстки.
• Закінчення верстки по макету.

Заняття 17. Публікація проекту

• Механіка інтернету.
• Ласкаво просимо в GitHub.
• Публікація проєкту.
• Додаємо сайт у пошук.
• Підключаємо метрику.

 Заняття 18.Псевдокласи та псевдоелементи

• Псевдокласи.
• TO DO LIST.
• Псевдоелементи.
• Комікс (верстка).

 Заняття 19. Трансформації в CSS

• Новий скін Бена (практика верстка).
• Зламані візори (практика верстка).
• Трубопровід (практика верстка).
• Трубопровід lvl2 (практика верстка).

 Заняття 20. Анімації в CSS

• На що здатні анімації.
• Ключові кадри.
• Основні властивості анімації.
• Налаштування анімації.
• Творче завдання.

Заняття 21.  Блокова модель: PRO

• Основні одиниці виміру в CSS.
• Розміри блоку.
• Функція calc() .
• Липке позиціонування.
• Просунуті властивості блоків.
• Рефлексія.

Заняття 22. Сітчастий макет Grid-layout

• Знайомство з grid-сіткою.
• Дисплей: grid;.
• Своя одиниця виміру fr.
• grid-template-areas.
• Так гріди чи флекси? Що краще?
• Шаблон із сіток.

Заняття 23. Змінні в CSS

• Навіщо потрібні змінні.
• Змінні та псевдоклас :root.
• Коментарі.
• Перемикач теми.
• Гарний перемикач теми.

Заняття 24. Адаптивна та чуйна верстка

• Адаптивна і чуйна верстка
• Брейкпоінти.
• Адаптивна верстка та медіа запити.
• Планшети.
• Мобільні телефони.
• Адаптивний логотип.

Заняття 25.Взаємодія з інформацією користувача

• Що таке input?
• Початок нашої форми.
• Checkbox і radio.
• Select і Textarea.
• Атрибути та label.
• Закінчуємо форму (форма input).

Заняття 26. Локальний сервер і знайомство з PHP

• Сервер і домен.
• Знайомство з PHP.
• Встановлення PHP.
• php server.
• Підключаємо нашу форму до власного php.
• Можливості php.

Заняття 27. Поглиблення в PHP. Цикли, масиви

• Підготовка файлів.
• Змінні та типи даних.
• Цикли.
• Масиви.
• Динамічна верстка.

Заняття 28. Wordpress

• Підготовка матеріалу.
• Що це?.
• Встановлення рушія.
• База даних.
• Налаштування сайту .
• Панель адміністратора.
• Створюємо свій сайт з нуля.

Заняття 29. Натягування проєкта на движок

• Вихід на фінішну пряму.
• Встановлення порожньої теми.
• Вивантаження шапки проєкту.
• Вивантажуємо підвал.
• Вивантажуємо основний контент.
• Робота зі стилями.
• Додавання сторінок.

Заняття 30. Знайомство з JS

• Що таке JavaScript і навіщо він потрібен?
• Робота з консоллю та змінними.
• querySelector.
• Прослуховування подій.
• Доопрацювання проєкту.

Заняття 31. Бургер-меню

• Що це?
• Створення HTML.
• Створення CSS.
• Пишемо JS.
• Плавність.
• Підсумок.

Заняття 32. Карусель

• Підготовка файлів.
• Підготовка HTML.
• Робота над стилями.
• Підключаємо карусель.
• Робота над стилями.
• Доопрацювання проєкту.

Представлення проєктів

• Фінальний проект