Курс Веб-програмування

Курс дає вміння основи створення сайту, стилізації та логіки сайту. Створення статичного вигляду сторінок. Основ веб-дизайну. User Interface та User Experience. Дає вміння створювати шаблони сайтів та як по шаблонам створювати різні сайти, як під комп’ютери так і під телефони. Ми навчаємо повністю веб - статичного програмування. Вміння анімації сторінок. Вміння публікацій на хостингах. Та базові поняття серверів. На курсі буде охоплено декілька мов програмування: PHP, JavaScript та мови розмітки HTML/CSS.

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

Частина 1

Введення в HTML

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

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

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

Фрейми і розмітка сторінки

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

Знайомство з CSS

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

Частина 2

Селектори CSS

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

Блокова модель CSS

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

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

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

Позиціонування

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

Частина 3

Вступ до дизайну

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

Аналіз пошукових запитів

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

Макет підсумкового проєкту

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

Flexbox

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

Частина 4

Верстка сайту за макетом

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

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

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

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

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

Публікація проєкту

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

Частина 5

Псевдокласи та псевдоелементи

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

Трансформації в CSS

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

Анімації в CSS

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

Блокова модель: PRO

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

Частина 6

Сітчастий макет Grid-layout

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

Змінні в CSS

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

Адаптивна та чуйна верстка

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

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

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

Частина 7

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

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

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

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

Wordpress

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

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

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

Частина 8

Знайомство з JS

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

Бургер-меню

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

Карусель

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

Підсумковий урок

Фінальний проєкт.

По закінченню курсу ви:

• Будете володіти основами UX/UI дизайну
• Навчитесь створювати веб - сайти по макету за допомогою мови розміти html/css
• Створите власний проект та опублікуєте його на github
• Навчитесь створювати анімації
• Оволодієте основам програмування JavaScript та PHP
• Познайомитесь з серверною частиною веб-сайту

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

• Індивідуальний підхід
• Висококваліфіковані викладачі
• Сучасні технології навчання
• Мовне оточення для вивчення англійської
• Проєкт в портфоліо
• Сертифікат про проходження курсу

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

Віталій - Python Developer(Django)