Course Syllabus

Jump to Today

Course Name: Introduction to HTML and CSS

Course Number: X433.4-002

Number of Units: ( 2 ) semester unit in Design

Instructor Name: Sharon Kaitner, M.Ed.

Instructor’s email: skaitner@berkeley.edu

Day and class meeting time: Wednesday evenings, 6:00 pm – 9:45 pm, 8 weeks, 30 hours

Room Number: 514

Semester and Year: Spring 2016

School Address: 160 Spear Street, San Francisco, CA

Phone Number: Please email your instructor skaitner@berkeley.edu with your questions.

Elective Class: Computer Science
Honor Code:

UC Berkeley Extension Honor Code: All members of the UC Berkeley Extension community are expected to act with honesty, integrity, and respect for others. For further information,please refer to:

  • Tips for Maintaining My Academic Integrity

(http://extension.berkeley.edu/upload/academic_integrity.pdf)

  • UC Berkeley Extension Code of Student Conduct

(http://extension.berkeley.edu/upload/studentconduct.pdf)

 

Course Description

This project-driven course focuses on hypertext markup language (HTML5) and cascading stylesheet (CSS) implementation. Students are introduced to foundation concepts of semantic coding, usability & accessibility, and the Document Object Model (DOM). Those new to the field will learn code syntax, commenting, writing, testing, and maintenance of HTML and CSS, and will experiment with some basic JavaScript integration.

 

Course Objective

The objective of this course is to familiarize students with the coding process including syntax, best practices, and the idea of “code once, re-use many times”.

 


 

Student Learning Outcomes

  • Understand correct file and folder structure within computers
  • Write HTML5 structural semantic markup
  • Understand the Document Object Model, or DOM
  • Understand relationship of HTML, CSS & JavaScript
  • Create cascading stylesheets (CSS) for device and browser integration
  • Investigate client-side scripting uses
  • Perform online validation and accessibility testing
  • Identify online resources available for rapid front-end development

 

Intended Audience

This course introduces fundamental markup and coding best practices, and foundation concepts. It is intended for those wishing a basic introduction to writing code, whether for mobile, computer or software applications.

 

Prerequisites

No prior programming or coding experience is necessary, although general computer knowledge is expected.

Instructional Method

This course is project-based consisting of lectures on major concepts, and then lab activities demonstrating how to create, implement, test and maintain code. Assigned homework will include readings and practice of each lecture/lab main theme. Lab projects build on each previous lesson, supplemented by online links, videos, PowerPoints and other instructional material maintained by the instructor. Group discussions of presented material, as well as individual practice with provided learning materials.  The course is taught in a PC lab. I am comfortable assisting if you want to bring your mac or personal laptops, but you will need to have your own software installed. Wireless connection is provided.

 

Required Text

HTML5 and CSS3 Visual Quickstart Guide, by Elizabeth Castro and Bruce Hyslop, Peachpit Press: 7th Edition (Copyright ©2012). ISBN-10: 0321719611, ISBN-13: 978-0321719614.

 

Materials

  • Access to a computer and the internet
  • Access to a web host, either paid or free. We will discuss in class. Instructor will assist with questions.
  • A text editor such as PC Notepad or Mac SimpleText. The course is taught in a PC lab, but those with personal Mac laptops and software, as well as personal PCs, are welcomed.
  • Access to class folder of weekly demo exercises and homework files online
  • Personal storage device to save work, like a usb drive

 

Process for Evaluation

  • Midterm quiz 15%
  • Lab Activities 30%
  • Homework 40%
  • Final             15%

 

 

Class Overview

 

Week 1:    Introductions: Meet your classmates. Introduce yourself and your neighbor to class. Overview of class format and expectations are reviewed.

Lecture: Semantic markup, understanding the document tree

Lab Activities: HTML file is written and validated to current standards.

Homework:

Chapter Readings: chapters 1, 2 & 3 of HTML5 and CSS3: Visual Quickstart Guide, 7th Ed.

  • Student Learning Outcomes: Understand correct file and folder structure within computers

 

Week 2:    Lecture: File and folder structures in a computer system are discussed. HTML5 structural elements and the document flow.

                Lab Activities: . WAI-ARIA role attributes are added to markup and tested for accessibility. Code commenting introduced.

Homework:

Chapter Readings: chapters 4, 5 & 6 of HTML5 and CSS3: Visual Quickstart Guide, 7th Ed.

  • Student Learning Outcomes: Write HTML5 element semantic markup

 

 

Week 3:    Lecture: Document Object Model and HTML, CSS and JavaScript.

                 Lab Activities: Creating a stylesheet and linking to html. Code is validated and tested.

Homework:

Chapter Readings: chapters 8, 9 & 10 of HTML5 and CSS3: Visual Quickstart Guide, 7th Ed.

  • Student Learning Outcomes: Understand the Document Object Model, or DOM

 

Week 4:    Lecture: Visual hierarchy for usability

Lab Activities, applying advanced CSS selectors

Homework:

Chapter Readings: Read chapter 15, review chapters 3 & 6 of HTML5 and CSS3: Visual Quickstart Guide, 7th Ed.

  • Student Learning Outcomes: Understand relationship of HTML, CSS & JavaScript

 

 

Week 5:    Lecture: CSS3 effects animation, transformation and transitions

Lab Activities: Lab time for one-on-one with instructor.

Homework:

Chapter Readings: chapter 11 of HTML5 and CSS3: Visual Quickstart Guide, 7th Ed.

  • Student Learning Outcomes: Create cascading stylesheets (CSS) for device and browser integration

 

 

Week 6:    Lecture: HTML, CSS and JavaScript progressive enhancement to create interactive forms.

                Lab Activities:

Homework:

Chapter Readings: chapters 1, 2 & 3 of HTML5 and CSS3: Visual Quickstart Guide, 7th Ed.

  • Student Learning Outcomes: Investigate client-side scripting uses

 

Week 7:    Lecture: HTML, CSS and JavaScript progressive enhancement to create interactive forms.

Lab Activities: Testing of sites for usability in-class exercise.

Homework: Assignment #7: Run your current site through both a validator and an accessibility site, then post a discussion of the results to your homework page.

Chapter Readings: chapter 12, and pages 88-91, 11, and 467 of HTML5 and CSS3: Visual Quickstart Guide, 7th Ed. Go online and search for the United States government’s http://www.section508.gov/best-practices and review.

  • Student Learning Outcomes: Perform online validation and accessibility testing

 

 

Week 8:    Lecture: Online resources including JavaScript libraries and frameworks explored

Lab Activities: Q&A of past lectures. Individual assistance and lab time will be provided.

Homework

Chapter Readings: chapters 17 & 19 of HTML5 and CSS3: Visual Quickstart Guide, 7th Ed.

  • Student Learning Outcome: Identify online resources available for rapid front-end development

 

Course Summary:

Date Details Due