Journal of Practical Engineering Education (실천공학교육논문지)

Korean Institute for Pratical Engineering Education (한국실천공학교육학회)
권호 표지
DOI QR코드

DOI QR Code

Analysis and Application of Front-End Code Playground Tools for Web Programming Education

  • Aaron Daniel Snowberger (Department of Computer Education, Jeonju National University of Education) ;
  • Semin Kim (Department of Computer Education, Jeonju National University of Education) ;
  • SungHee Woo (Department of Computer Engineering, Korea National University of Transportation)
  • Received : 2023.11.30
  • Accepted : 2023.12.28
  • Published : 2024.02.29
Download PDF
⟨ Previous Next ⟩

Abstract

Web programming courses are often included in university Computer Science programs as introductory and foundational computer programming courses. However, amateur programmers often have difficulty learning how to integrate HTML, CSS, JavaScript, and various preprocessors or libraries to create websites. Additionally, many web programming mistakes do not produce visible output in the browser. Therefore, in recent years, Front-End Code Playground (FECP) tools that incorporate HTML, CSS, and JavaScript into a single, online web-based application have become popular. These tools allow web coding to happen directly in the browser and provide immediate visual feedback to users. Such immediate visual feedback can be particularly beneficial for amateur coders to learn and practice with. Therefore, this study gathers data on various FECP tools, compares their differences, and provides an analysis of how such tools benefit students. This study concludes with an outline of the application of FECP to web programming courses to enhance the learning experience.

Keywords

References

  1. S. Xinogalos and T. Kaskalis, "The challenges of teaching web programming: literature review and proposed guidelines," In 8th International Conference on Web Information Systems and Technologies (WEBIST 2012), Porto, Portugal, pp. 207-212. DOI: 10.5220/0003960902070212. 
  2. X. Wang and J. C. McKim, "The opportunities and challenges to teach web programming in computer science Curriculum CS2013," Journal of Computing Sciences in Colleges, vol. 29, no. 2, pp. 67-78, December 2013. https://dl.acm.org/doi/10.5555/2535418.2535428. 
  3. X. Wang, "Design, develop and teach the second web programming course in computer science curriculum," Journal of Computing Sciences in Colleges, vol. 29, no. 4, pp. 52-59, April, 2014. 
  4. M. Magier and B. Panczyk, "Comparative analysis of front-end code playground tools," Journal of Computer Sciences Institute, vol. 9, pp. 328-333, December 2018. DOI: 10.35784/jcsi.705. 
  5. Similarweb - Traffic Rank & Website Analysis, (Google Chrome Extension), https://chromewebstore.google.com/detail/similarweb-traffic-rank-w/hoklmmgfnpapgjgcpechhaamimifchmp. 
  6. Wikipedia, "Comparison of online source code playgrounds," [Online]. Available: https://en.wikipedia.org/wiki/Comparison_of_online_source_code_playgrounds#Online_web_client-side_source_code_playgrounds 
  7. CodePen - Online Code Editor and Front-End Web Developer, [Online]. Available: https://codepen.io/. 
  8. JS Fiddle - Code Playground, [Online]. Available: https://jsfiddle.net/. 
  9. JS Bin - Collaborative JavaScript Debugging, [Online]. Available: https://jsbin.com/. 
  10. Coder - Your Self-Hosted Remote Development Platform, [Online]. Available: https://coder.com/. 
  11. Plunker - Helping you build the web, [Online]. Available: https://plnkr.co/. 
  12. CSSDeck - Online HTML, CSS, and JS Code Editor (Sandbox), [Online]. Available: http://cssdeck.com/. 
  13. Liveweave - HTML, CSS, and JavaScript demo, [Online]. Available: https://liveweave.com/. 
  14. JSFeed - Online Code Editor, [Online]. Available: https://jsfeed.io/.