Skip to main content

Spring 2023

Web Programming (웹프로그래밍)

Instructor: Dr. Muhammad Syafrudin

Course information

Have you heard of ChatGPT, a disruptive OpenAI service? Do you want to learn how to develop a web application (WebApp) using several existing technologies? Do you want to learn how to implement a machine learning model in a WebApp? Or do you want to learn how to develop WebApp using OpenAI's API? Then this course is for you! In this course, you will:

  • Learn web programming technologies such as HTML, CSS, and front-end (MDB) and back-end (Python, Flask, etc.) frameworks.
  • Experience hands-on with WebApp projects
  • Have the opportunity to form a group project (maximum of three students per group) to propose an idea or case study and develop a WebApp to solve it.


Tue, Thu at 10:30‐12:00 am KST at 광910

Office hours

Appointment by email (Office at AI Center 502호)


Having Python or any programming experience will be advantageous but not required.


Course material can be downloaded in blackboard and please be aware, 
that we will not publicly release the homework assignments this year.

Please note that:
-All lectures are in English.
-Weekly lecture topics may be adjusted or changed without prior notice depending
on the understanding level during the class.
-All lectures will be conducted offline or online depending on the university regulations.
-We will notify you via blackboard/email if there is an update from the university regarding the class.

Please contact me or stop by my office if you have any issues with the course.


주차(Week)강의내용(Class Topic & Contents)강의활동유형(Class Type)
1Course overview and intro to web programming강의 (Lecture)
2Introduction to HyperText Markup Language (HTML)강의+실습 (Lecture + Practice)
3Introduction to Cascading Style Sheets (CSS)강의+실습 (Lecture + Practice)
4Introduction to Material Design for Bootstrap (MDB), an open source front-end web user interface (UI) framework.강의+실습 (Lecture + Practice)
5Introduction to Python강의+실습 (Lecture + Practice)
6Introduction to Flask, an open-source backend framework based on the Python programming강의+실습 (Lecture + Practice)
7Web programming with Flask I강의+실습 (Lecture + Practice)
8Mid exam시험 (Exam)
9Web programming with Flask II강의+실습 (Lecture + Practice)
10Web programming with Flask III강의+실습 (Lecture + Practice)
11Integration with Database강의+실습 (Lecture + Practice)
12Project example I (WebApp for prediction or classification)강의+실습 (Lecture + Practice)
13Project example II (WebApp using OpenAI's Application Programming Interface)강의+실습 (Lecture + Practice)
14Group project discussion and development강의+실습 (Lecture + Practice)
15Group project discussion and development강의+실습 (Lecture + Practice)
16Final group project presentation (ppt, codes, and project report final submission)Evaluation


The final grade will be calculated using the following weights:

#Final Grade Weight
Assignment(quiz/homework/weekly assignment)15%
Mid exam30%
Final group project40%


There might be 3-5 assignments, which will be released at the end of each lecture.

Submitting an assignment

Instructions for turning in assignments will be posted when the semester starts (in blackboard).

Getting help

For questions about homework, course content, installation, and after you have tried to troubleshoot yourselves, the process to get help is: Post the question in blackboard/group chat and hopefully your peers will answer. Note that in blackboard questions are visible to everyone. For private matters send an email to helpline: udin [at] sju [dot] ac [dot] kr.

Course Policies

Collaboration policy

We encourage you to talk and discuss the assignments with your fellow students (and on blackboard), but you are not allowed to look at any other students assignment or code outside of your pair. Discussion is encouraged, copying is not allowed.

Late day policy

Homework is due before each class. Late submission are not allowed.

Communication to students

Class announcements will be through blackboard. All homework and quizzes will be posted in blackboard. Also all feedback forms. Important note: make sure you have your settings set so you can receive emails from blackboard.

Academic honesty

We give a strong emphasis to Academic Honesty. As a student your best guidelines are to be reasonable and fair. We encourage teamwork for problem sets, but you should not split the homework and you should work on all the problems together.

Formed Group Projects

  1. teaMatch: 임--동
  2. Soobak: 이--혁 (TL), 김--원
  3. DAP: 이--아 (TL), 홍--오, 조--희
  4. S Plate: 김--겸 (TL), 최--빈, 김--선
  5. Webflix: 한--현 (TL), 이--우, 박--은
  6. Counting Stars: 전--현 (TL), 김--구, 조--영, 송--선
  7. MOA: 류--빈 (TL), 안--찬, 허--정
  8. AIDoctor: 유--식 (TL), 구--모, 하--호
  9. AAA Batteries: 박--연 (TL) 권--영, 김--우
  10. TravelLens: 윤--라 (TL), 박--선
  11. Look At Me!: 강--들 (TL), 이--빈
  12. MSE: 이--현 (TL), 박--진, 김--정
  13. analysts: 강--수 (TL), 안--한
  14. PTSD: 노--호 (TL), 전--성
  15. hello world!: 박--준
  16. Play: 구--혁
  17. 황--희
  18. 이--서

Note: TL -> Team Leader.