Розробники та рецензенти
Заклад вищої освіти:
Компанія-рецензент 1:
Компанія-рецензент 2:
Валідація:
Розробник навчальної програми:
Качурівський Володимир – канд. пед. наук, доцент кафедри “Інформаційних технологій та вищої математики”
Базова інформація
Шифр та назва спеціальності:
122 - Комп'ютерні наукиНазва освітньо-наукової програми
Комп’ютерні наукиНазва дисципліни
Фреймворк BootStrapВид дисципліни
ВибірковаБлок дисципліни
Web-програмуванняКількість студентів
20Курс/Семестр
5Загальна інформація про дисципліну
Анотація
Bootstrap є популярним HTML, CSS, та JS фреймворком для створення адаптивних та інтерактивних веб‑сторінок. Bootstrap допомагає швидше та простіше розробляти графічний інтерфейс користувача. Bootstrap легко та ефективно масштабується на сайті на основі єдиного базового коду від телефонів і планшетів до настільних комп'ютерів – все завдяки CSS медіа-запитам.Анотація
Формування умінь та навичок розробки адаптивних та інтерактивних web-сторінок. Вивчення патернів для швидкого інтегрування у web-сторінку модальних вікон, підказок, навігації, форми для створення інтерактивних додатків.Анотація
Лекції, лабораторні роботи, самостійна робота, індивідуальний проєкт. Підсумковий контроль – залік.Розподіл часу
Загальний обсяг (кредитів): 4; Лекції (занять): 30; Лабораторні (занять): 30; Практичні (занять): 15; Самостійна робота (годин): 75
Попередні дисципліни
Верстка та стилізація web-сторінок (HTML5, CSS3), Організація баз даних (MySQL), Кросплатформне програмування (PHP)Матеріально-технічне та програмне забезпечення дисципліни
Комп'ютери з ОС Windows (або інше), Visual Studio (або інше), доступ до Internet, Chrome, Firefox, Opera, https://jsfiddle.net/, https://codepen.io/ , GitHub, Open Server 5.0 та вище, Bootstrap 5.3. Git.Структура дисципліни
| Теоретична складова Назва, перелік питань або анотація лекції | Годин | Практична складова Опис та приклад завдання, а також посилання на методичні матеріали | Годин | Інструменти, засоби та технології | ||||||||||||||
| Тема 1 – Засоби розробки web-сторінок | ||||||||||||||||||
Лекція 1. Фреймворк Bootstrap
|
2 | Практична робота №1. Початкові налаштування
|
2 | Visual Studio або інший текстовий редактор Open Server | ||||||||||||||
Лекція 2. Онлайн-редактори для фронтенду
|
2 | Практична робота №2. Онлайн редактори
|
2 | CodePen.io JSFiddle.net | ||||||||||||||
Лекція 3. Система керування версіями файлів та спільної роботи Git та GitHub
|
2 | Практична робота №3. Контроль версій
|
4 | GitHub Git Git Bash Visual Studio | ||||||||||||||
| Тема 2 – Макет верстки сторінки | ||||||||||||||||||
Лекція 4. Grid сітка та керування макетом
|
2 | Лабораторна робота №1. Моделювання шаблону адаптивного відображення вебсторінки
|
4 | Chrome, Firefox, Opera, https://jsfiddle.net/, https://codepen.io/ Visual Studio | ||||||||||||||
| Тема 3 – Вміст сторінки | ||||||||||||||||||
Лекція 5. Формування вмісту сторінки
|
2 | Лабораторна робота №2. Робота із зображеннями
|
2 2 | Chrome, Firefox, Opera, https://jsfiddle.net/, https://codepen.io/ Visual Studio Chrome, Firefox, Opera, https://jsfiddle.net/, https://codepen.io/ Visual Studio | ||||||||||||||
| Тема 4 – Форми введення інформації | ||||||||||||||||||
Лекція 6. Конструювання форм засобами Bootstrap (частина 1)
|
2 2 | Лабораторна робота №4. Введення даних
|
2 2 2 2 | Chrome, Firefox, Opera, https://jsfiddle.net/, https://codepen.io/ Visual Studio Chrome, Firefox, Opera, https://jsfiddle.net/, https://codepen.io/ Visual Studio Chrome, Firefox, Opera, https://jsfiddle.net/, https://codepen.io/ Visual Studio Chrome, Firefox, Opera, https://jsfiddle.net/, https://codepen.io/ Visual Studio | ||||||||||||||
| Тема 5 - Компоненти Bootstrap | ||||||||||||||||||
Лекція 8. Патерни Bootstrap у графічному інтерфейсі
|
2 | Лабораторна робота №8. Використання карток для презентації товарів | 2 | Chrome, Firefox, Opera, https://jsfiddle.net/, https://codepen.io/ Visual Studio | ||||||||||||||
Лекція 9. Модальне вікно
|
2 | Лабораторна робота №9. Використання модальних вікон | 2 | Chrome, Firefox, Opera, https://jsfiddle.net/, https://codepen.io/ Visual Studio | ||||||||||||||
Лекція 10. Навігація
|
2 | Лабораторна робота №10. Використання динамічних вкладок | 2 | Chrome, Firefox, Opera, https://jsfiddle.net/, https://codepen.io/ Visual Studio | ||||||||||||||
Лекція 11. Інтерактивність сторінки
|
2 | Лабораторна робота №11. Створення системи підказок | 2 | Chrome, Firefox, Opera, https://jsfiddle.net/, https://codepen.io/ Visual Studio | ||||||||||||||
Лекція 12. Бічна панель Offcanvas
|
2 | Лабораторна робота №12. Створення бічної панелі навігації | 2 | Chrome, Firefox, Opera, https://jsfiddle.net/, https://codepen.io/ Visual Studio | ||||||||||||||
| Тема 6 - Налаштування елементів | ||||||||||||||||||
Лекція 13. Основи Sass
|
2 | Лабораторна робота №13. Основи стилізації з Sass | 2 | Chrome, Firefox, Opera Open Server Visual Studio | ||||||||||||||
Лекція 14. Налаштування стилів змісту та компонентів Bootstrap
|
2 | Лабораторна робота №14. Зміна стилів оформлення таблиці | 2 | Chrome, Firefox, Opera Open Server Visual Studio | ||||||||||||||
| Тема 7 - Альтернатива Bootstrap | ||||||||||||||||||
Лекція 15. Актуальні CSS-фреймворки для Front-end розробника
|
2 | |||||||||||||||||
| Аудиторна робота над індивідуальним проєктом. | ||||||||||||||||||
| Консультування при роботі з індивідуальним проєктом | Практична робота № 4. Розробка web-сайту Виконання завдань, згідно з вибраним варіантом | 7 | Комп'ютери з ОС Windows (або інше), Visual Studio (або інше), доступ до Internet, Chrome, Firefox, Opera, https://jsfiddle.net/, https://codepen.io/ , GitHub, Open Server 5.0 та вище, Bootstrap 5.3. Git. | |||||||||||||||
Теми та завдання для самостійної роботи
| Назва та опис завдання | Методи контролю та критерії оцінювання | Годин | |||||||||||||||
| СР 1. Анімовані мітки у формі вводу даних СР 1. Типографіка Bootstrap: заголовки, основний текст, списки | Перевірка роботи документа в браузері. Максимально оцінка 3 бали. Для кожної роботи СР 1. - СР 5. : Критерій оцінювання: 1 бал — завдання виконано частково (50% від визначеного обсягу) 2 бали — завдання в основному виконано (часткові помилки) 3 бали — дотримані всі технічні вимоги та пункти завдання. Документ на GitHub За недотримання термінів виконання сам. роботи зниження балу на 1 пункт. | 5 | |||||||||||||||
| СР 2. Акордеон | 5 | ||||||||||||||||
| СР 3. Створення вікна повідомлення (Тости). Бейджі | 5 | ||||||||||||||||
| СР 4. Створення слайд-шоу циклічного перегляду фото | 5 | ||||||||||||||||
| СР 5. Навігаційна панель. Випадаючі списки | 5 | ||||||||||||||||
| Тест №1. Контейнери. Сітка | Автоматична перевірка тесту. Кожен тест мінімум з 10 питань. Максимальна оцінка за тест 5 балів. | 2 | |||||||||||||||
| Тест №2. Форма введення інформації | 2 | ||||||||||||||||
| Тест №3. Компоненти | 2 | ||||||||||||||||
| Тест №4. Основи Sass | 2 | ||||||||||||||||
| Робота над індивідуальним проєктом | Студентська конференція. Прилюдна презентація проєкту. Організаційний комітет складається з лектора дисципліни та викладачів, які здійснюють проведення практичних/лабораторних робіт, також можуть бути запрошені викладачі інших кафедр інституту та стейкхолдери. | 41 | |||||||||||||||
Проєкт
Немає
Рекомендовані джерела інформації та навчальні матеріали
| Основні | ||||||||||||||||||
| № | Назва | До теми (вказати номер) | ||||||||||||||||
| 1 | Bootstrap 5 Tutorial. URL: https://www.w3schools.com/bootstrap5/index.php | Усі теми | ||||||||||||||||
| 2 | Basic concepts of flexbox. URL: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS Flexible_Box_Layout/Basic_Concepts_of_Flexbox | Тема 2 | ||||||||||||||||
| 3 | Get started with Bootstrap. URL: https://getbootstrap.com/docs/5.3/getting-started/introduction/ | Усі теми | ||||||||||||||||
| 4 | Mastering Bootstrap: A Beginner's Guide. Edited by Sufyan bin Uzayr. Taylor & Francis. 2023. 570 p. | Усі теми | ||||||||||||||||
| 5 | Sass Documentation. URL: https://sass-lang.com/documentation/ | Тема 6 | ||||||||||||||||
| Додаткові | ||||||||||||||||||
| № | Назва | До теми (вказати номер) | ||||||||||||||||
| 1 | GitHub Docs. URL: https://docs.github.com/en | Тема 1 | ||||||||||||||||
| 2 | Керівництво по SASS. Як верстати сайти вдвічі швидше? URL: https://tokar.ua/read/6672/rukovodstvo-po-sass-kak-verstat-sayt-v-d/ | Тема 6 | ||||||||||||||||
| 3 | HTML: HyperText Markup Language. URL: https://developer.mozilla.org/en-US/docs/Web/HTML | Усі теми | ||||||||||||||||
| 4 | CSS: Cascading Style Sheets. URL: https://developer.mozilla.org/en-US/docs/Web/CSS | Усі теми | ||||||||||||||||
| 5 | BEM and SASS: A Perfect Match. URL:https://andrew-barnes.medium.com/bem-and-sass-a-perfect-match-5e48d9bc3894 | Тема 6 | ||||||||||||||||
| 6 | Can I use. URL:https://caniuse.com/ | Тема 6. Аудиторна робота над індивідуальним проєктом. | ||||||||||||||||
| 7 | 10 популярних CSS-фреймворків. URL: https://robotdreams.cc/uk/blog/423-10-populyarnih-css-freymvorkiv | Тема 7 | ||||||||||||||||
Контрольні заходи
| № | Назва та опис | Методи контролю та критерії оцінювання | |||||||||||||||||
| 1 | Виконання завдань лабораторної роботи (№1-№14) | Перевірка роботи документа в браузері. Максимально оцінка за лабораторну роботу - 3 бали. Для кожної роботи ЛР 1. - ЛР 14. : Критерій оцінювання: 1 бал — завдання виконано частково (50% від визначеного обсягу) 2 бали — завдання в основному виконано (часткові помилки) 3 бали — дотримані всі технічні вимоги та пункти завдання. Документ на GitHub За недотримання термінів виконання сам. роботи зниження балу на 1 пункт. Мах - 42 бали | |||||||||||||||||
| 2 | Виконання завдань самостійної роботи (СР.1 - СР.5) | Перевірка роботи документа в браузері. Максимально оцінка одиницю самостійної роботи - 3 бали. Для кожної роботи СР 1. - СР 5. : Критерій оцінювання: 1 бал — завдання виконано частково (50% від визначеного обсягу) 2 бали — завдання в основному виконано (часткові помилки) 3 бали — дотримані всі технічні вимоги та пункти завдання. Документ на GitHub За недотримання термінів виконання сам. роботи зниження балу на 1 пункт. Max - 15 балів | |||||||||||||||||
| 3 | Тести контролю засвоєння теоретичних знань (Т1 - Т4) | Автоматична перевірка тесту. Тест з 10 питань. Max - 20 балів | |||||||||||||||||
| 4 | Індивідуальне самостійне завдання (проєкт) | Публічна демонстрація проєкту. Проєкти трьох рівнів складності: Easy - ⭐⭐⭐ Intermediate - ⭐⭐⭐⭐ Advanced - ⭐⭐⭐⭐⭐ Студент обирає рівень складності самостійно. Мах Easy - 10 балів Мах Intermediate - 18 балів Мах Advanced - 23 бали | |||||||||||||||||
| Рейтинг з дисципліни 100 балів. ∑ (Кз1+Кз2+Кз3+Кз4)=100 | |||||||||||||||||||
Результати навчання
Програмований результат. Застосовувати фреймворк для створення багатофункціонального вебінтерфейсу, володіти інструментальними засобами підтримки front-end розробки. Розробляти графічні інтерфейси, вивчаючи та враховуючи досвід користувача (UX), верстати адаптивні та інтерактивні вебсторінки та сайти. Набуті знання: Знати підходи до проєктування сучасних багатофункціональних вебінтерфейсів Усвідомлювати переваги та недоліки використання фреймворків Розуміти Grig сітку для адаптації вебсторінки до мобільних пристроїв Проєктувати сучасний вебінтерфейс користувача Проєктувати систему інтерактивного спілкування з користувачем Знати переваги використання препроцесора SASS для індивідуалізації вебсайту Набуті навички: Вміти адаптовувати вебсторінки на основі Grig сітки Застосовувати контейнери для розміщення вмісту для побудови користувацького інтерфейсу Використовувати стилі керування формами, параметрами макета та налаштуванням компонентів для створення різноманітних форм Проєктувати інтерактивну взаємодію з користувачем на основі модальних вікон, підказок, тостів та бічної панелі Створювати навігаційні панелі, блоки, вкладки Створювати унікальний дизайн через зміну налаштувань за допомогою SASS Управляти вирівнюванням і розміром стовпців сітки, навігацією, компонентами тощо за допомогою повного набору адаптивних утиліт flexbox
Зв'язок з ринком праці
Спеціальність/професія, підготовці до діяльності в якій читається курс:
Розробник інтерфейсуПосилання на вакансії (понад 3),
- WordPress Developer https://jobs.dou.ua/companies/limestone-digital/vacancies/268612/
- Front-end Engineer https://jobs.dou.ua/companies/elitex/vacancies/268597/
- Junior Angular Developer https://jobs.dou.ua/companies/codebridge-technology/vacancies/185419/
Перелік компетентностей із вказаних як вимоги до вакансії, які набувають студенти, в процесі проходження дисципліни.
WordPress Developer- Strong understanding of HTML, CSS, JavaScript, and PHP;
- Experience with responsive design and front-end frameworks (e.g., Bootstrap);
- Familiarity with version control systems (e.g., Git);
- Develop high-quality, reusable code based on jQuery, Bootstrap 5, HTML, CSS, and JavaScript.
- Deep knowledge of HTML5/CSS3, SASS
- Knowledge of CSS frameworks for responsive web design — Bootstrap 3/4
Інструменти оцінювання результатів навчання за дисципліною
| Об'єкт оцінювання (знання методів та принципів, практичні навички, командна робота тощо) | Методи контролю (тести, виконання поточних практичних завдань та їх форма: написання коду, створення діаграми Гантта, створення прототипу тощо) | Інструмент оцінювання (доступ до результатів тесту, гостьова лекція, посилання на виконані завдання, посилання на проєкт, присутність на захисті проєктів, доступ до запису захисту тощо) |
| Лабораторні роботи №1 - №14 | Виконання завдання лабораторної роботи (Код документа) | Файли до завдань лабораторних робіт в репозиторії GitHub ТУТ Буде посилання |
| Самостійні роботи СР1. - СР5 | Виконання завдання самостійної роботи (Код документа) | Файли до завдань самостійних робіт в репозиторії GitHub ТУТ Буде посилання |
| Тести за темами дисципліни | Тести | Доступ до платформи MOODLE Тут буде посилання |
| Індивідуальне самостійне завдання (проєкт) | Файли проєкту | Доступ до репозиторію з проєктами ТУТ буде посилання |