Основи front-end технологій - Робоча програма навчальної дисципліни (Силабус)

Реквізити навчальної дисципліни

Програма навчальної дисципліни

1. Опис навчальної дисципліни, її мета, предмет вивчання та результати навчання

Дисципліна «Основи front-end технологій» орієнтована на вивчення основ проєктування та розробки front-end (клієнтської) частини веб-застосунків з використанням сучасних технологій, зокрема мов HTML, CSS, JavaScript, а також додаткових бібліотек, фреймворків та інструментальних засобів. Під час навчання студенти ознайомляться з основними поняттями, методами та засобами створення front-end частини веб-застосунків, реалізації веб-сайтів, створення зручного та ефективного веб-інтерфейсу користувача. На лабораторних роботах студенти навчаться описувати структуру веб-документів з використанням мови HTML, задавати зовнішній вигляд веб-сторінок з використанням мови CSS, додавати інтерактивність та взаємодіяти з зовнішніми сервісами з використанням мови JavaScript, а також використовувати сучасні фреймворки, зокрема React, Bootstrap, Tailwind. Передбачено контроль якості отриманих знань у вигляді модульної контрольної роботи.

Мета навчальної дисципліни

Метою навчальної дисципліни є формування у студентів теоретичних знань і практичних здатностей застосовувати загальні методи і засоби проєктування та розробки front-end (клієнтської) частини веб-застосунків.

Предмет навчальної дисципліни

Предмет - методи та засоби проєктування та розробки front-end частини веб-застосунків, інструментальні засоби розробки front-end застосунків.

Програмні результати навчання, на формування та покращення яких спрямована дисципліна:

Проєктувати компоненти front-end (клієнтської) частини веб-застосунків та їх взаємодію. Реалізовувати компоненти front-end (клієнтської) частини веб-застосунків з використанням сучасних технологій, зокрема мов HTML, CSS, JavaScript. Обирати інструментальні засоби, бібліотеки та фреймворки для front-end розробки залежно від вимог проєкту, специфіки предметної галузі, досвіду команди. Створювати веб-застосунки, які використовують принципи адаптивного дизайну для підтримки різноманітних платформ, зокрема мобільних платформ.

Пререквізити та постреквізити дисципліни

Пререквізити

Для успішного засвоєння дисципліни студент повинен володіти освітніми компонентами "Програмування-1. Основи програмування", "Програмування-2. Структури даних та алгоритми", "Бази даних", "Інтернет-технології та проєктування WEB-застосувань".

Постреквізити

Компетенції, знання та уміння, одержані в процесі вивчення освітнього компонента є необхідними для подальших освітніх компонентів в галузі веб-розробки, зокрема поглибленого вивчення front-end технологій, а також можуть бути корисними для передипломної практики, дипломного проєктування.

Зміст навчальної дисципліни

Розділ 1. Створення веб-сторінок з використанням HTML та CSS

Тема 1.1. Сучасний стан веб-розробки, зокрема front-end технологій

Тема 1.2. Опис структури веб-документів з використанням мови розмітки HTML

Тема 1.3. Опис зовнішнього вигляду веб-сторінок з використанням мови стилів CSS

Тема 1.4. Розташування елементів на сторінках засобами CSS.

Тема 1.5. Трансформації та анімації в CSS. Адаптивний дизайн.

Розділ 2. Інтерактивність веб-сторінок з використанням JavaScript

Тема 2.1. Основні можливості мови програмування JavaScript.

Тема 2.2. Робота зі структурою веб-документів в JavaScript, засоби DOM.

Тема 2.3. Валідація даних засобами JavaScript. Регулярні вирази.

Тема 2.4. Асинхронне програмування в JavaScript, засоби promises API.

Тема 2.5. Взаємодія з back-end засобами JavaScript, формат даних JSON, засоби fetch API.

Тема 2.6. Збереження даних на front-end засобами JavaScript. Засоби web storage API.

Тема 2.7. Огляд сучасних JavaScript API, доступних в браузері.

Розділ 3. Використання інструментальних засобів, бібліотек та фреймворків в front-end розробці

Тема 3.1. Поняття front-end toolchain. Встановлення та використання інструментальних засобів, менеджер пакетів npm.

Тема 3.2. Бібліотека/фреймворк React. Основні принципи функціонування, розробка компонентів, взаємодія компонентів.

Тема 3.3. Додаткові можливості React. Бібліотеки та фреймворки на основі React.

Тема 3.4. Робота з даними в React застосунках. Засоби Redux, MobX.

Тема 3.5. Огляд альтернативних бібліотек/фреймворків для веб-розробки. Засоби Angular, Vue, Svelte.

Тема 3.6. Бібліотеки та фреймворки для CSS. Засоби Bootstrap, Tailwind, Sass.

Навчальні матеріали та ресурси

Базова література

1. MDN web docs. https://developer.mozilla.org

2. WebDoky. Ресурси та документація. https://webdoky.org/

3. CSS Tricks. https://css-tricks.com/

4. Eric Meyer, Estelle Weyl. CSS: The Definitive Guide: Web Layout and Presentation. — 5th Edition. — O'Reilly Media, 2023 — 1126 p.

5. Marijn Haverbeke. Eloquent JavaScript, 3rd Edition: A Modern Introduction to Programming — No Starch Press, 2018. — 472 p. Also available online https://eloquentjavascript.net/

6. David Flanagan. JavaScript: The Definitive Guide: Master the World's Most-Used Programming Language. — 7th Edition — O'Reilly Media, 2020. —706 p.

7. Alex Banks, Eve Porcello. Learning React: Modern Patterns for Developing React Apps. — 2nd Edition O'Reilly Media, 2020. — 310 p.

Допоміжна література

1. Український веб-довідник https://css.in.ua/

2. HTML конструювання. http://htmlbook.in.ua/

3. W3SchoolsUA українською. https://w3schoolsua.github.io/

4. Boris Cherny. Programming TypeScript: Making Your JavaScript Applications Scale. — O'Reilly Media, 2019. — 324 p.

5. Aristeidis Bampakos, Pablo Deeleman. Learning Angular: A no-nonsense beginner's guide to building web applications with Angular 10 and TypeScript. — 3rd Edition — Packt Publishing, 2020. — 430 p.

6. Heitor Ramon Ribeiro. Vue.js 3 Cookbook: Discover actionable solutions for building modern web apps with the latest Vue features and TypeScript. — Packt Publishing , 2020. — 562 p.

7. Cristian Salcescu. Functional Architecture with React and Redux (Functional React) - Independently published, 2020 — 150 p.

Методика опанування навчальної дисципліни (освітнього компонента)

Лекційні заняття

Лабораторні роботи

Самостійна робота студента

Контрольні роботи

Двогодинна модульна контрольна робота (МКР) поділяється на дві одногодинні (45 хв.), що проводяться під час лабораторних занять.

МКР-1 виконується після вивчення тем 1.1 – 2.7. МКР-2 виконується після вивчення тем

3.1 – 3.6. Модульні контрольні роботи виконуються в середовищі Google Classroom у вигляді тестування.

Політика та контроль

Політика навчальної дисципліни (освітнього компонента)

Система вимог, які ставляться перед студентом:

правила відвідування занять: заборонено оцінювати присутність або відсутність здобувача на аудиторному занятті, в тому числі нараховувати заохочувальні або штрафні бали. Відповідно до РСО даної дисципліни бали нараховують за відповідні види навчальної активності на лекційних та практичних заняттях;

модульні контрольні роботи виконуються самостійно та без застосування допоміжної інформації з Інтернет, матеріалів курсу, конспекту;

заохочувальні бали виставляються за навчальну активність на лекційних заняттях. Кількість заохочуваних балів не більше 10;

штрафні бали виставляються за невчасну здачу лабораторних робіт. Кількість штрафних балів не більше 10;

політика щодо академічної доброчесності: Кодекс честі Національного технічного університету України «Київський політехнічний інститут імені Ігоря Сікорського» https://kpi.ua/files/honorcode.pdf встановлює загальні моральні принципи, правила етичної поведінки осіб та передбачає політику академічної доброчесності для осіб, що працюють і навчаються в університеті, якими вони мають керуватись у своїй діяльності, в тому числі при вивченні та складанні контрольних заходів з дисципліни «Основи front-end технологій».

Види контролю та рейтингова система оцінювання результатів навчання (РСО)

Поточний контроль: МКР, виконання та захист лабораторних робіт. Календарний контроль: проводиться двічі на семестр як моніторинг поточного стану виконання вимог силабусу. Семестровий контроль: залік. Рейтинг студента з дисципліни складається із балів, отриманих протягом семестру. Бали рейтингу протягом семестру студент отримує за:

виконання та захист лабораторних робіт; виконання модульних контрольних робіт (МКР).

Система рейтингових балів та критерії оцінювання Лабораторні роботи

«відмінно», повна відповідь на питання під час захисту (не менш ніж 90% потрібної

інформації) та оформлений належним чином протокол до лабораторної роботи – 10 балів;

«добре», достатньо повна відповідь на питання під час захисту (не менш ніж 75% потрібної інформації) та оформлений належним чином протокол до лабораторної роботи –

8 балів; «задовільно», неповна відповідь на питання під час захисту (не менш ніж 60% потрібної інформації), незначні помилки та оформлений належним чином протокол до лабораторної роботи – 6 балів; «незадовільно», незадовільна відповідь та/або не оформлений належним чином протокол до лабораторної роботи – 0 балів.

За кожне запізнення з поданням лабораторної роботи до захисту від встановленого терміну оцінка знижується на 1 бал.

Модульні контрольні роботи

«відмінно», не менш ніж 90% правильних відповідей – 10 балів; «добре», не менш ніж 75% правильних відповідей – 8 балів; «задовільно», не менш ніж 60% правильних відповідей –

6 балів; «незадовільно», менш ніж 60% правильних відповідей – 0 балів.

Заохочувальні бали

за активну роботу на лекційному занятті 1 бал, але в сумі не більше 10.

Штрафні бали

Запізнення з поданням лабораторної роботи до захисту від встановленого терміну -1 бал, але в сумі не більше -10

Календарний контроль

На першій атестації (8-й тиждень) студент отримує «зараховано», якщо його поточний рейтинг не менший ніж 18 балів. На другій атестації (14-й тиждень) студент отримує

«зараховано», якщо його поточний рейтинг не менший ніж 36 балів.

Максимальна сума балів контрольних заходів протягом семестру складає: RD = 8*rлаб++2*rмкр=8*10+2*10=100,

де

rлаб – бал за лабораторну роботу (0…10); rмкр – бал за написання МКР (0…10)

Форма семестрового контролю – Залік

Необхідною умовою допуску до заліку є виконання одночасно усіх видів робіт:

1) виконати МКР-1 та МКР-2 не нижче ніж на оцінку «задовільно»; 3) захист достатньої кількості лабораторних робіт на оцінку не нижче ніж «задовільно» для отримання сумарного рейтингу (за лабораторні та МКР) не менше 40 балів;

Залік проводиться на останньому за розкладом занятті в семестрі. Якщо рейтинг протягом семестру становить 60 балів та вище, залікова оцінка, за згодою студента, переноситься в залікову відомість.

У випадку, коли семестровий рейтинг нижчий за 60 балів (усі види робіт виконані) або рейтинг вищий за 60 балів, але студент виявив бажання підвищити оцінку - призначається залікова контрольна робота. В цьому випадку бали семестрового рейтингу множаться на коефіцієнт 0.8. Залікова контрольна робота виконується в середовищі Google Classroom у вигляді тестування.

Система оцінювання залікової контрольної роботи

«відмінно», не менш ніж 90% правильних відповідей – 20 балів; «добре», не менш ніж 75% правильних відповідей – 16 балів; «задовільно», не менш ніж 60% правильних відповідей

– 12 балів; «незадовільно», менш ніж 60% правильних відповідей – 0 балів.

Сума балів семестрового рейтингу плюс бали за залікову контрольну роботу (за умови її проведення) переводиться до залікової оцінки згідно з таблицею:

Таблиця 1. Переведення рейтингових балів до оцінок за університетською шкалою

Робочу програму навчальної дисципліни (Силабус):

Складено: доцент кафедри інформаційних систем та технологій ФІОТ, к.ф.-м.н., Жереб Костянтин Анатолійович

Ухвалено кафедрою інформаційних систем та технологій ФІОТ (протокол № 21 від 29.06.2023 р.)

Погоджено Методичною комісією факультету (протокол № 11 від 29.06.2023 р.)