CIS 195, Web Authoring 1: HTML and CSS

Table of Contents

[TOC]

General Course Information

Useful Links (See the syllabus for Zoom links)
Course Materials on GitHub
Demo Code on GitHub

Summer Eight-Week Term

The summer term course is condensed into eight weeks of class with no final exam week.
Syllabus

Ten-Week Term

This is a “normal” term with ten weeks of class plus a final exam week (week 11)
Getting Started
Hyflex Syllabus (Fall 2023)
Online Syllabus (Fall 2026)

Course Outline for a Ten-Week Term

1. Intro to HTML

Overview
Reading
Read these sections of The HTML Handbook by Flavio Copes
1. Preface
2. HTML Basics
3. Skip this chapter
4. The document body, but skip section 4.1
5. Tags that interact with text, but skip sections 5.7 and 5.8
6. Links, but skip the part on relative links
12. Images, just 12, not 12.1, 12.2, etc.
Lecture Notes
Examples
Lab Assignment
- Lab 1 Instructions
- Lab 1 Rubric

2. More on Creating Web Pages with HTML

Overview
Reading
- History of HTML
- More selected sections in The HTML Handbook
4.1 Block elements vs inline elements

5.6.1 Quotes

5.7 Horizontal Line

6. Links

12. Images
- Selected sections on W3 Schools:
Lecture Notes
Examples
- South India Web Site — Source code
Lab Assignment
- Lab 2 Instructions
- Lab 2 Rubric

3. Developing a Web Site

Overview
Reading
- Uploading your website to the CIT Web Server
Lecture Notes
Examples
- Planets Web Page
- South India Web Site
Lab Assignment
- Lab 3 Instructions
- Lab 3 Rubric

4. Designing a Page with CSS

Overview
Reading

Selected Sections of the CSS Handbook

1. Preface
2. Introduction to CSS
4. Adding CSS to an HTML page

5. Selectors

6. Cascade

7. Specificity (precedence) (Just read 7.0, not the sub-sections) 11. Pseudo-classes
13. Colors
20. Fonts
21. Typography
Lecture Notes
- Styling with CSS
- Text Formatting, Pseudo-Classes
Example
- South India Web Site
Lab Assignment
- Lab 4 Instructions
- Lab 4 Rubric

5. Midterm, Term Project Proposal

Overview
Lecture Notes
- Midterm Review
Midterm Quiz See the syllabus for details about the time and place of the midterm quiz.
Term Project Assignment
- Term Project Instructions
- Term Project Proposal Instructions

6. Page Layout with CSS

Overview
Reading

Selected Sections of the CSS Handbook by Flavio Copes

22. Box Model
23. Border
24. Padding
25. Margin
29. Floating and Clearing
Lecture Notes
Example
- Guide to South India
- Float Demo
Exercise
- CSS float and clear Properties
Lab Assignment
- Lab 5 Instructions
- Lab 5 Rubric

7. CSS Flexbox and Grid

Overview
Reading

Selected Sections of the CSS Handbook by Flavio Copes

31. CSS Grid
32. Flexbox
Lecture Notes
- CSS Flex Box
- CSS Grid
Lab Assignment
- Lab 6 Instructions
- Lab 6 Rubric

8. HTML Forms for User Input

Overview
Lecture Notes
- Forms - Part 1
- Forms - Part 2
Lab Assignment
- Lab 7 Instructions
- Lab 7 Rubric

9. Multimedia for the Web

Overview
Lecture Notes
- Multimedia for Web Sites
Lab Assignment
- Lab 8 Instructions
- Lab 8 Rubric
Term Project
- Term Project Code Review Form (peer review)

10.1 HTML Tables and Term Project

Overview
Lecture Notes
Example
- Table Practice
Lab Assignment
- Lab 9 Instructions
- Lab 9 Rubric
Term Project Assignment
- Term Project Instructions
- Term Project Code Review Form

10.2 (Optional) Advanced CSS

Lecture Notes
- Advanced CSS

11. Final Quiz

Overview

See the syllabus for details about the time and place of the final quiz.

Written by Brian Bird, winter 2019, revised fall 2026

This site is open source. Improve this page.