Задати питання
Success request
Дякуємо за Вашу заявку

Залишився лише один крок

Оберіть зручний для вас мессенджер

Зареєструватись на курс
Swift iOS
Задати питання

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

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

 

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

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

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

 

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

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

 

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

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

 

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

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

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

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

 

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

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

 

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

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

 

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

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

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

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

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

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

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

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

Заняття 13. Flexbox

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

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

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

 

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

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

 

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

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

 

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

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

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

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

 

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

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

 

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

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

 

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

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

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

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

 

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

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

 

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

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

 

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

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

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

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

 

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

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

 

Заняття 28. Wordpress

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

 

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

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

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

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

 

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

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

 

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

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

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

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

Записатись на пробний урок
Викладач-практик
Віталій
Віталій
Python Developer(Django) 4+досвіду роботи, досвід викладання програмуванню 2+

Чому IT Академія від Stfalcon?

Приєднуйтеся до нашої школи, де навчання - це захоплююча подорож у світ знань і можливостей

1
Індивідуалізований підхід
Ми розуміємо, що кожна особа унікальна, тому наші програми надають можливість розвивати ваші навички відповідно до вашого темпу і інтересів
2
Висококваліфіковані викладачі
Наші викладачі - це команда досвідчених і талановитих фахівців у своїх галузях. Вони готові не лише навчити вас програмуванню та англійській, але й поділитися своїм досвідом
3
Сучасні технології навчання
Ми використовуємо передові технології для забезпечення ефективного та захопливого навчання. Ваші уроки будуть насичені інтерактивними матеріалами та проєктами
4
Мовне оточення для вивчення англійської
Ми створюємо зручні умови для занурення в мовне середовище, щоб ви могли швидко і легко вивчати англійську
Записатись на пробний урок