Розробка інтерактивного онлайн-тренажера для вивчення властивостей CSS

Литвиненко, Віталій Андрійович

URI: http://elibrary.kdpu.edu.ua/xmlui/handle/123456789/11815

Date: 2025-06-03

Abstract:

У кваліфікаційній роботі було розроблено інтерактивний онлайн-тренажер для вивчення властивостей CSS з використанням мов програмування HTML та JavaScript. На основі аналізу наукових джерел та сучасних підходів до проєктування онлайн-тренажерів було визначено основні вимоги до інтерфейсу та функціональності цифрових рішень для учнів школи. У результаті порівняльного аналізу інструментів розробки було обрано Visual Studio Code як оптимальне середовище для створення інтерактивного онлайн-тренажера. Реалізовано ключові модулі онлайн-тренажера: головна сторінка, сторінки з вправами, інтерактивні вправи, довідник термінів. Розроблений онлайн-тренажер може бути впроваджений у навчальний процес різних закладів середньої освіти як цифровий освітній ресурс при вивченні вебтехнологій.

Description:

1. Основи CSS. URL: https://w3schoolsua.github.io/css/index.html#gsc.tab=0. 2. Етапи створення вебсайтів URL: https://webcase.com.ua/uk/blog/iz-chego-sostoit-razrabotka-sajta/. 3. Інформатика. Підручник для 8 кл. закладів загальної середньої освіти. Н. В. Морзе, О. В. Барна. Київ: УОВЦ «Оріон», 2021. 192 - 217 с. URL: https://pidruchnyk.com.ua/839-informatyka-8-klas-morze-2016.html. 4. Інформатика. Підручник для 8-го класу закладів середньої освіти. О. В. Коршунова, І. О. Завадський. Київ: Видавничий дім «Освіта» 2021. 170- 195 с. URL: https://pidruchnyk.com.ua/1627-informatiya-8-klas-korshunova.html. 5. Mayer, R. E. (2009). Multimedia learning. Cambridge University Press, 2009. 305 с. URL: https://www.cambridge.org/core/books/multimedia-learning/7A62F072A71289E1E262980CB026A3F9. 6. Roblyer, M. D., & Doering, A. H. (2013). Integrating educational technology into teaching. Pearson Education, 2013. 492 с. URL: https://anyflip.com/ixqwb/ozrv/basic/. 7. Clark, R. C., & Mayer, R. E. (2016). E-learning and the science of instruction: Proven guidelines for consumers and designers of multimedia learning. John Wiley & Sons, 2016. 492 с. URL: https://onlinelibrary.wiley.com/doi/book/10.1002/9781119239086. 8. Best code editors for web development. 2024. URL: https://happyaddons.com/best-code-editors-for-web-development/. 9. Free code editors for web development. 2024. URL: https://daily.dev/blog/10-best-free-code-editors-for-web-development-2024. 10. The best place to build, test, and discover front-end code. [Електронний ресурс] URL: https://codepen.io. 11. Learn to code, build projects, earn certifications. URL: https://www.freecodecamp.org. 12. CSS Diner. [Електронний ресурс] URL: https://flukeout.github.io. 13. Flexbox Froggy. URL: https://flexboxfroggy.com/#uk. 14. Grid Garden. URL: https://cssgridgarden.com. 15. CSSBattle. URL: https://cssbattle.dev. 16. Googleapis. URL: https://developers.google.com/apis-explorer. 17. GitHub. URL: https://github.com. 18. Colors.co.URL:https://coolors.co/000505-3b3355-5d5d81-6c7d47-96a13a. 19. Литвиненко В. А. CssLearner. [Електронний ресурс]. URL: https://vitaliyi-21.github.io/.

Show full item record