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/.