Розробники та рецензенти
Заклад вищої освіти:
Компанія-рецензент 1:
Компанія-рецензент 2:
Валідація:
Розробник навчальної програми:
Місюра Сергій - канд. техн. наук., доцент кафедри "математичного моделювання та інтелектуальних обчислень в інженерії"
Базова інформація
Шифр та назва спеціальності:
122 - Комп'ютерні наукиНазва освітньо-наукової програми
Комп’ютерні науки. Моделювання, проектування та комп’ютерна графікаНазва дисципліни
Frontend-розробкаВид дисципліни
ОсновнаБлок дисципліни
Web-програмуванняКількість студентів
15Курс/Семестр
4Загальна інформація про дисципліну
Анотація
Курс «Frontend-розробки» розвиває знання і теоретичні та практичні навички, необхідні для ефективної frontend-розробки сайтів з дотриманням стандартизованих вимог, використовуючи мову HTML, каскадні таблиці стилів CSS, мову JavaScript, BootstrapАнотація
Дисципліна спрямована на засвоєння необхідних знань з WEB-технологій, а також формування практичних навичок щодо розробки якісних вебсайтів. Набуття компетенцій, знань, умінь та навичок із застосування Web-технологій та розробки Web-базованих систем, відповідно до кваліфікації фахівця з інформаційних технологійАнотація
Лекції, лабораторні роботи, індивідуальне завдання, самостійна робота, консультації. Підсумковий контроль – залікРозподіл часу
Загальний обсяг (кредитів): 4; Лекції (занять): 8; Лабораторні (занять): 16; Практичні (занять): ; Самостійна робота (годин): 72
Попередні дисципліни
«Архітектура обчислювальних систем», «Об’єктно-орієнтоване програмування та проектування»Матеріально-технічне та програмне забезпечення дисципліни
На лабораторних заняттях використовуються різні типи integrated development environment, прискорювач розробки Emmet. Для виконання лабораторних робіт рекомендовано використовувати обмежено безкоштовне програмне забезпечення Visual Studio Code.Структура дисципліни
| Теоретична складова Назва, перелік питань або анотація лекції | Годин | Практична складова Опис та приклад завдання, а також посилання на методичні матеріали | Годин | Інструменти, засоби та технології | ||||||||||||||
| Тема 1 – Концепція та основні принципи побудови ресурсів WEB–простору | ||||||||||||||||||
| Вступ до WEB | 1 | Інструменти роботи. Редактори. Прискорювачі роботи с кодом. | 2 | Visual Studio Code, браузери | ||||||||||||||
| Тема 2 – Мова розмітки Web-сторінок | ||||||||||||||||||
| Мова HTML. Структура HTML-документа. Синтаксис HTML. Семантичні елементи, Форми. | 3 | Основні елементи мови HTML. Загальна структура HTML-документа. Теги HTML. Створення списків і гіперпосилань. Додавання зображень, мультимедіа. організація і формування таблиць. Семантичні елементи, Форми. | 6 | HTML | ||||||||||||||
| Тема 3 – Основи WEB-дизайну. Технологія роботи з макетом сторінки | ||||||||||||||||||
| Основні принципи дизайну. Технологія роботи з графічними об’єктами | 1 | Графічні редактори. . Нарізка макета. Технологія роботи з макетом сторінки. Основні принципи дизайну (просторове зображення, колір та світ, стиль, шрифт). | 2 | Photoshop, Figma | ||||||||||||||
| Тема 4 – Мова каскадних стилів CSS | ||||||||||||||||||
| Основні визначення та синтаксис селекторів мови CSS. Стилі CSS та правила їх оформлення. Управління розміщенням, стильовим оформленням елементів документа з використанням стилів CSS. | 2 | Управління розміщенням, стильовим оформленням елементів документа з використанням стилів CSS | 4 | CSS | ||||||||||||||
| Тема 5 – Принцип гнучкого/адаптивного дизайну CSS flexbox (Flexible Box Layout Module) та Grid Layout | ||||||||||||||||||
| Засіб компонування елементів. CSS flexbox (Flexible Box Layout Module) та Grid Layout | 2 | CSS flexbox – модуль макета гнучкого контейнера. Засіб компонування елементів Grid Layout | 4 | CSS flexbox | ||||||||||||||
| Тема 6 – Bootstrap (Twitter Bootstrap) | ||||||||||||||||||
| Набір інструментів для створення сайтів та WEB-додатків | 2 | Bootstrap (Twitter Bootstrap) – набір інструментів для створення сайтів та WEB-додатків. Сітка – 12 колонок. | 2 | Bootstrap | ||||||||||||||
| Тема 7 – JavaScript | ||||||||||||||||||
| Типи даних. Змінні. Ряди. Логічний тип даних. Об'єкти. Вирази та оператори. Цикли. | 2 | JavaScript. Типи даних. Змінні. Рядки | 1 | JavaScript | ||||||||||||||
| JavaScript. Логічний тип даних. Об'єкти. | 1 | JavaScript | ||||||||||||||||
| JavaScript. Вирази та оператори | 2 | JavaScript | ||||||||||||||||
| JavaScript. Цикли | 2 | JavaScript | ||||||||||||||||
| 2. DOM & BOM. DOM collections. AJAX | 2 | DOM & BOM. DOM collections. AJAX | 4 | JavaScript | ||||||||||||||
| Тема 8 – Розгортання сайту на хостингу | ||||||||||||||||||
| Реєстрація доменів. FTP доступи. Делегування прав доступу до ресурсу | 1 | Реєстрація хостингу. Реєстрація домену. Робота з FTP. Завантаження сайтів на хостинг | 2 | |||||||||||||||
Теми та завдання для самостійної роботи
-
Проєкт
| Назва та опис завдання | Метод контролю та захисту | Строки виконання | |||||||||||||||
Завдання: HTML, CSS, JS:
1) Створити вебсторінку з використанням семантичних елементів «Моя особиста сторінка» на мові HTML, яка повинна включати такі елементи:
|
Для здачі завдання необхідно викласти вихідний код на github (і зробити сторінку на github), а сам проєкт розмістити на безкоштовному хостингу Перевірка працездатності буде проводитись саме на хостингу, а не на локальному комп'ютері. Оцінюватиметься не лише формальне виконання вимог, а й творчий підхід до вирішення завдання | 8 тижнів | |||||||||||||||
Рекомендовані джерела інформації та навчальні матеріали
| Основні | ||||||||||||||||||
| № | Назва | До теми (вказати номер) | ||||||||||||||||
| 1 | Бородкіна І. Л. Web-технології та web-дизайн: застосування мови HTML для створення електронних ресурсів : навч. посіб. / І. Л. Бородкіна, Г. О. Бородкін. – Київ : Ліра-К, 2020. – 210 с. | 1,3,4,7,9 | ||||||||||||||||
| 2 | Marjin Haverbeke. Eloquent JavaScript: A Modern Introduction to Programming. 3rd Edition. – December 2018. – 480 p | 1 | ||||||||||||||||
| 3 | HTML Підручник. [Електронний ресурс] – Режим доступу: https://w3schoolsua.github.io/html/index.html | 2 | ||||||||||||||||
| 4 | CSS Підручник. [Електронний ресурс] – Режим доступу: https://w3schoolsua.github.io/css/index.html#gsc.tab=0 | 5,6 | ||||||||||||||||
| 5 | JavaScript Підручник. Основи вебпрограмування. [Електронний ресурс] – Режим доступу: https://w3schoolsua.github.io/js/index.html#gsc.tab=0 | 8 | ||||||||||||||||
| 6 | Ресурси для розробників, від розробників. [Електронний ресурс] – Режим доступу: https://developer.mozilla.org/ | 1 | ||||||||||||||||
| 7 | Вступ до HTML [Електронний ресурс] – Режим доступу: https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML | 2 | ||||||||||||||||
| 8 | Основи CSS [Електронний ресурс] – Режим доступу: https://developer.mozilla.org/uk/docs/Learn/Getting_started_with_the_web/CSS_basics | 5,6 | ||||||||||||||||
| 9 | W3School [Електронний ресурс] – Режим доступу: http://w3schools.com/ | 1 | ||||||||||||||||
| Додаткові | ||||||||||||||||||
| № | Назва | До теми (вказати номер) | ||||||||||||||||
| 1 | Ресурси для розробників, від розробників. [Електронний ресурс] – Режим доступу: WWW Consortium (W3C) Official Page. (http://www.w3c.org/) | 1 | ||||||||||||||||
| 2 | Ресурси для розробників, від розробників. [Електронний ресурс] – Режим доступу: Hyper Text Markup Language (HTML) Standard. (http://www.w3c.org/MarkUp/) | 2 | ||||||||||||||||
| 3 | Ресурси для розробників, від розробників. [Електронний ресурс] – Режим доступу: Cascade Style Sheets (CSS) Standard. (http://www.w3c.org/Style/CSS/) | 5,6 | ||||||||||||||||
| 4 | The Modern JavaScript Tutorial [Електронний ресурс] – Режим доступу: https://javascript.info/ | 8 | ||||||||||||||||
Контрольні заходи
| Назва та опис | Методи контролю та критерії оцінювання | |||||||||||||||||
| Лабораторні роботи | 40 % від загальної оцінки | |||||||||||||||||
| Оцінювання теоретичних знань — тест | 40 % від загальної оцінки | |||||||||||||||||
| Проєкт (індивідуальне завдання) | 20 % від загальної оцінки | |||||||||||||||||
Результати навчання
ПР 1. Застосовувати знання основних форм і законів абстрактно-логічного мислення, основ методології наукового пізнання, форм і методів вилучення, аналізу, обробки та синтезу інформації в предметній області комп'ютерних наук ПР 10. Використовувати інструментальні засоби розробки клієнт-серверних застосувань, проєктувати концептуальні, логічні та фізичні моделі баз даних, розробляти та оптимізувати запити до них, створювати розподілені бази даних, сховища та вітрини даних, бази знань, у тому числі на хмарних сервісах, із застосуванням мов WEB-програмування
Зв'язок з ринком праці
Спеціальність/професія, підготовці до діяльності в якій читається курс:
Розробник інтерфейсуПосилання на вакансії (понад 3),
- https://ua.linkedin.com/jobs/view/front-end-developer-at-svitla-systems-inc-3934721730?position=1&pageNum=0&refId=%2BKUK%2FTf6mmbyhQMQNwbQMA%3D%3D&trackingId=WjinhGlKtBN2Rx3vakem5A%3D%3D&trk=public_jobs_jserp-result_search-card
- https://jobs.dou.ua/companies/megogonet-/vacancies/264473/
- https://robota.ua/ru/company119636/vacancy9806223
- https://robota.ua/ua/company13998848/vacancy9955780
- https://robota.ua/.ua/company14330974/vacancy10015811
- https://robota.ua/ru/company14279314/vacancy9904422
Перелік компетентностей із вказаних як вимоги до вакансії, які набувають студенти, в процесі проходження дисципліни.
- Strong experience with HTML, CSS, and JavaScript.
- Має відмінні знання HTML, дотримується стандартів W3C;
- Впевнено володіє CSS;
- Basic knowledge of HTML/CSS/JS.
- Розробка користувацьких інтерфейсів згідно з технічними завданнями.
- Розбиратися в CSS, JS на базовому рівні;
- Розробка та підтримка вебсторінок за допомогою HTML, CSS та JavaScript;
Інструменти оцінювання результатів навчання за дисципліною
| Об'єкт оцінювання (знання методів та принципів, практичні навички, командна робота тощо) | Методи контролю (тести, виконання поточних практичних завдань та їх форма: написання коду, створення діаграми Гантта, створення прототипу тощо) | Інструмент оцінювання (доступ до результатів тесту, гостьова лекція, посилання на виконані завдання, посилання на проєкт, присутність на захисті проєктів, доступ до запису захисту тощо) |
| Теоретичні знання HTML, CSS та JavaScript | тести за темою (аналогічно технічному інтерв'ю); | доступ до результатів тесту, |