(Note: Please use Google Chrome web browser. Other browsers may not support the clicking/expanding/folding feature of this website. If you are using FireFox, you can enable 'Custom HTML Elements'. Open 'about:config' and enable the 'dom.webcomponents.enabled' flag.)

Introduction to Web Technologies and Programming

Announcements:

Since web technologies were invented to share documents over the Internet, they have been evolved into a new programming environment. In the web programming 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 programming environment to provide more sophisticated user interface and access to databases. Hence web documents have become rather web applications.

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 will learn web programming with the above major topics through many exercises and lab works.


Contents
(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, 3
    1. What are web documents?
    2. What to display, Lab 1
    3. How to display, Lab 2
    4. Where to display
    5. How to support layouts
  4. Static web documents - How to style HTML5 contents with CSS3 - Sessions 4, 5
    1. Box model
    2. Styling with attributes
    3. What is CSS3? Lab 3
    4. What to style
    5. Hide and show
    6. Positioning and overlapping, Lab 4
  5. Static web documents - Some advanced topics - CSS3 - Session 6
    1. How to make rounded corners of a border
    2. How to make multiple columns
    3. How to customize numbers for nested ordered lists, Lab 5
  6. Interactive web programming with CSS3 - Sessions 6, 7, 8
    1. How to react to mouse movement
    2. How to make tabs, Lab 6
    3. How to make drop-down menus, Lab 7
    4. How to make navigation bars/tabs
  7. Introduction to Interactive web programming with JavaScript and DOM, Lab 8 - Session 8
  8. What else? - Session 8

  9. Seminars and labs