Розробники та рецензенти
Заклад вищої освіти:
Компанія-рецензент 1:
Компанія-рецензент 2:
Валідація:
Розробник навчальної програми:
Місюра Сергій — кандидат технічних наук, старший дослідник, доцент кафедри математичного моделювання та інтелектуальних обчислень в інженерії (ММІ) Національного технічного університету «Харківський політехнічний інститут».
Базова інформація
Шифр та назва спеціальності:
122 - Комп'ютерні наукиНазва освітньо-наукової програми
Комп’ютерні науки. Моделювання, проектування та комп’ютерна графіка.Назва дисципліни
Frontend-розробкаВид дисципліни
ОсновнаБлок дисципліни
Web-програмуванняКількість студентів
15Курс/Семестр
4Загальна інформація про дисципліну
Анотація
Курс «Frontend-розробки» розвиває знання і теоретичні та практичні навички, необхідні для ефективної frontend-розробки сайтів з дотриманням стандартизованих вимог, використовуючи мову HTML, каскадні таблиці стилів CSS, мову JavaScript, Bootstrap.Анотація
Дисципліна спрямована на засвоєння необхідних знань з WEB-технологій, а також формування практичних навичок щодо розробки якісних вебсайтів. Набуття компетенцій, знань, умінь та навичок із застосування Web-технологій та розробки Web-базованих систем, відповідно до кваліфікації фахівця з інформаційних технологій.Анотація
Лекції, лабораторні роботи, індивідуальне завдання, самостійна робота, консультації. Підсумковий контроль – залік.Розподіл часу
Загальний обсяг (кредитів): 3; Лекції (занять): 8; Лабораторні (занять): 16; Практичні (занять): 0; Самостійна робота (годин): 72
Попередні дисципліни
«Архітектура обчислювальних систем», «Об’єктно-орієнтоване програмування та проектування»Матеріально-технічне та програмне забезпечення дисципліни
На лабораторних заняттях використовуються різні типи integrated development environment, прискорювач розробки Emmet. Для виконання лабораторних робіт рекомендовано використовувати обмежено безкоштовне програмне забезпечення Visual Studio Code.Структура дисципліни
Тема 1 – Концепція та основні принципи побудови ресурсів WEB–простору
- Теоретична складова: Вступ до WEB
- Практична складова: Інструменти роботи. Редактори. Прискорювачі роботи с кодом.
- Теоретична складова: Мова HTML. Структура HTML-документа. Синтаксис HTML. Семантичні елементи, Форми.
- Практична складова: Основні елементи мови HTML. Загальна структура HTML-документа. Теги HTML.
- Практична складова: Створення списків і гіперпосилань. Додавання зображень, мультимедіа. організація і формування таблиць. Семантичні елементи, Форми.
- Теоретична складова: Основні принципи дизайну. Технологія роботи з графічними об’єктами
- Практична складова: Графічні редактори. . Нарізка макета. Технологія роботи з макетом сторінки. Основні принципи дизайну (просторове зображення, колір та світ, стиль, шрифт).
- Теоретична складова: Основні визначення та синтаксис селекторів мови CSS. Стилі CSS та правила їх оформлення. Управління розміщенням, стильовим оформленням елементів документа з використанням стилів CSS.
- Практична складова:Управління розміщенням, стильовим оформленням елементів документа з використанням стилів CSS.
- Теоретична складова: Засіб компонування елементів. CSS flexbox (Flexible Box Layout Module) та Grid Layout
- Практична складова: CSS flexbox – модуль макета гнучкого контейнера. Засіб компонування елементів Grid Layout
- Теоретична складова: Набір інструментів для створення сайтів та WEB-додатків
- Практична складова:Bootstrap (Twitter Bootstrap) – набір інструментів для створення сайтів та WEB-додатків. Сітка – 12 колонок.
- Теоретична складова: Типи даних. Змінні. Ряди. Логічний тип даних. Об'єкти. Вирази та оператори. Цикли.
- Практична складова: JavaScript. Типи даних. Змінні. Рядки
- Практична складова: JavaScript. Логічний тип даних. Об'єкти.
- Практична складова: JavaScript. Вирази та оператори
- Практична складова: JavaScript. Цикли
- Теоретична складова: DOM & BOM. DOM collections. AJAX
- Практична складова: DOM & BOM. DOM collections. AJAX
- Теоретична складова: Реєстрація доменів. FTP доступи. Делегування прав доступу до ресурсу
- Практична складова:Реєстрація хостингу. Реєстрація домену. Робота з FTP. Завантаження сайтів на хостинг
Теми та завдання для самостійної роботи
Проєкт
Завдання: HTML, CSS, JS:
- Створити вебсторінку з використанням семантичних елементів «Моя особиста сторінка» на мові HTML, яка повинна включати такі елементи: ім'я; адресу електронної пошти; таблицю зі списком предметів, які ви вивчали у попередньому семестрі, прізвищами викладачів та оцінкою; список із назв 5 улюблених фільмів або ТВ-шоу (+посилання); 3 слова, якими можна вас описати; 3 картинки, які показують вас у 3-х різних настроях (щасливе, сумне та зараз); одна з ваших улюблених цитат із зазначенням автора чи джерела; якась цікава інформація про те місце, де ви живете або народилися і google карту.
- Створити два різні стилі оформлення вашої вебсторінки (світлий і темний) таким чином, щоб змінювалися колір або картинка фону, тип і колір шрифтів різних текстових елементів (абзаци, заголовки) та оформлення таблиць.
- Створити розділ зі слайд-шоу з фотографій на певну тему (наприклад, ваше рідне місто) з можливістю перегортання по колу, реалізованого за допомогою функцій JavaScript
- Вбудувати у вашу вебсторінку перемикач стилю сторінки за допомогою активних елементів (кнопок, вибору тощо), які запускають функції JavaScript, які звертаються до структури DOM вебсторінки та змінюють значення певних атрибутів, що керують стилями.
- Створити сторінку, присвячену вашому улюбленому проєкту, що містить 3D-модель або посилання на неї.
- Сайт повинен бути адаптивний під телефон, планшет та десктоп
Метод контролю та захисту
Для здачі завдання необхідно викласти вихідний код на github (і зробити сторінку на github), а сам проєкт розмістити на безкоштовному хостингу Перевірка працездатності буде проводитись саме на хостингу, а не на локальному комп'ютері. Оцінюватиметься не лише формальне виконання вимог, а й творчий підхід до вирішення завданняРекомендовані джерела інформації та навчальні матеріали
- Бородкіна І. Л. Web-технології та web-дизайн: застосування мови HTML для створення електронних ресурсів : навч. посіб. / І. Л. Бородкіна, Г. О. Бородкін. – Київ : Ліра-К, 2020. – 210 с.
- Marjin Haverbeke. Eloquent JavaScript: A Modern Introduction to Programming. 3rd Edition. – December 2018. – 480 p
- HTML Підручник. [Електронний ресурс] – Режим доступу: https://w3schoolsua.github.io/html/index.html
- CSS Підручник. [Електронний ресурс] – Режим доступу: https://w3schoolsua.github.io/css/index.html#gsc.tab=0
- JavaScript Підручник. Основи вебпрограмування. [Електронний ресурс] – Режим доступу: https://w3schoolsua.github.io/js/index.html#gsc.tab=0
- Ресурси для розробників, від розробників. [Електронний ресурс] – Режим доступу: https://developer.mozilla.org/
- Вступ до HTML [Електронний ресурс] – Режим доступу: https://developer.mozilla.org/enUS/docs/Learn/HTML/Introduction_to_HTML
- Основи CSS [Електронний ресурс] – Режим доступу: https://developer.mozilla.org/uk/docs/Learn/Getting_started_with_the_web/CSS_basics
- W3School [Електронний ресурс] – Режим доступу: http://w3schools.com/
- Ресурси для розробників, від розробників. [Електронний ресурс] – Режим доступу: WWW Consortium (W3C) Official Page. (http://www.w3c.org/)
- Ресурси для розробників, від розробників. [Електронний ресурс] – Режим доступу: Hyper Text Markup Language (HTML) Standard. (http://www.w3c.org/MarkUp/)
- Ресурси для розробників, від розробників. [Електронний ресурс] – Режим доступу: Cascade Style Sheets (CSS) Standard. (http://www.w3c.org/Style/CSS/)
- The Modern JavaScript Tutorial [Електронний ресурс] – Режим доступу: https://javascript.info/
Контрольні заходи
- Лабораторні роботи: 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/ru/company13998848/vacancy9955780
- https://robota.ua/ru/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
Методи контролю: тести за темою (аналогічно технічному інтерв'ю)
Інструмент оцінювання: доступ до результатів тесту