Introduction to Web Programming

Announcements:

Since web technologies were invented to share documents over the Internet, they have been evolved into a new application environment. In the web application environment, web documents are presented on a web browser in various forms and ways. The documents can be read more easily and effectively with various user interface means. Programming logic is also included in the web application environment to provide more sophisticated user interface and access to databases. Hence web documents have become rather web applications.

Here is an example web application, named TRU Board Games Playground. Students will develop this application and their board games through this course. (You can try the board games.)

Web applications usually consist of

• Page layout
• Document content - titles, paragraphs, tables, lists, images, buttons, ...
• User interface - menus, tabs, modal windows, ...
• User input - key board, mouse click, ...
• Database
• Programming logic

In this course, students are introduced to web programming and web applications environment that includes client-side applications running on web browsers, server-side applications running on web server, and databases.

• Students learn how to use major aspects of Hyper Text Markup Language (HTML) and Cascading Style Sheets (CSS), for document content. Hyper Text Markup Language is a standard language used for creating web applications and to describe the structure of web contents. Cascading Style Sheets is a language used for describing the presentation of web contents written in Hyper Text Markup Language.
• Students learn interactive web programming with Bootstrap, in which web applications support various types of user interface.
• Students are introduced to the script programming with JavaScript and Document Object Model (DOM) for further interactive web programming.

Students will learn web programming with the above major topics through the development of TRU Board Games Playground and your own board game.

Contents [Show]
(The schedule can be changed.)

1. Introduction to the course - Session 1
   1. Introduction
   2. Learning objectives
   3. Expectations
   4. Instructor
   5. How to study well - Is motivation good enough?
2. Web applications environment - Session 1
   1. Computer programming and web programming
   2. Overview
   3. Frontend web technologies
   4. Backend web technologies
3. Static web documents - How to display/structure HTML5 contents - Sessions 1 - 2
   1. What are web documents?
   2. What to display
   3. How to display
   4. Where to display
   5. How to support layouts
4. Static web documents - How to style HTML5 contents with CSS3 - Just for reference
   1. Box model
   2. Styling with attributes
   3. What is CSS3?
   4. What to style
   5. Hide and show
   6. Positioning and overlapping
5. Static web documents - Some advanced topics - CSS3 - Just for reference
   1. How to make rounded corners of a border
   2. How to make multiple columns
   3. How to customize numbers for nested ordered lists
6. Interactive web programming with CSS3 - Just for reference
   1. How to react to mouse movement
   2. How to make tabs
   3. How to make drop-down menus
   4. How to make navigation bars/tabs
7. User interface components with Bootstrap - Session 4
   1. Introduction to Bootstrap
   2. Dropdown menu
   3. Tab
   4. Modal window
8. Introduction to Interactive web programming with JavaScript and DOM - Sessions 5 - 6
9. What else? - Just for reference
10. Seminars and labs - during Sections
11. Projects - Sections 7 - 9