Print Version

Effective: Summer 2017

Advisory: Advisory: GID 56 and 57.
Grade Type: Letter Grade, the student may select Pass/No Pass
Not Repeatable.
FHGE: Non-GE Transferable: CSU
3 hours lecture, 3 hours laboratory. (72 hours total per quarter)

Student Learning Outcomes -
  • Demonstrate HTML5 and CSS3 functionality in web pages for class critique and portfolio presentation.
  • Apply HTML5 and CSS3 in a mobile simulation environment, and/or on a mobile device (smart phone) etc
  • Create web pages that effectively demonstrate proficiency with HTML5/xHTML and CSS3 and validate according to current standards webpage usability and accessibility, and browser compatibility
Description -
Introduction to HTML5 and CSS3 for advanced Web development and design. Prepares students and working professionals to use advanced tags and layout. Emphasis on writing well-formed markup using current Web standards and coding technology, design concepts, usability, accessibility, and browser compatibility. Includes minor elements of JavaScript. Intended for students with a basic working knowledge of HTML/CSS and Web design.

Course Objectives -
The student will be able to:
  1. Develop a sound plan for converting an existing website using xhtml/CSS to HTML5/CSS3, and/or develop a new website using HTML5/CSS3.
  2. Demonstrate a working knowledge of the use and advantages of HTML5 including tags for accessibility and semantics, including audio and video, and new formatting tags for enhanced rendering of HTML documents.
  3. Demonstrate a working knowledge of the use and advantages of webpage design using CSS3 over CSS, including enhanced layout for both Web designer and programmers, especially formats that allow webpages to look more like traditional print and page layout.
  4. Create webpages that effectively demonstrate proficiency with HTML5 and CSS3, especially for enhanced presentation and mobile format, and validate according to current standards for class critique and portfolio presentation.
  5. Demonstrate basic use of XSLT in rendering XML content.
Special Facilities and/or Equipment -
  1. A lecture room equipped with instructional computer, high resolution color monitor, software; projection system, and lighting suitable for displaying projected media. An integrated or separate facility with student workstation configurations to include hard drives, color monitors, mice, keyboards, and software.
  2. When taught via Foothill Global Access: on-going access to computer with java-script enabled Internet browsing software, media plug-ins, and relevant computer applications.

Course Content (Body of knowledge) -
  1. Website development overview
    1. Conceptual thinking, storyboard, website navigation
    2. Theory and application of Web development technologies
    3. Analysis of xhtml/css and application of HTML5/CSS3
    4. Apply and use current Web development standards for HTML5 and and CSS3
  2. HTML5 tags and attributes
    1. New symantic/structural elements
    2. New media elements
    3. New form elements
    4. Local Storage
    5. Web Socket
    6. Drag and drop
    7. Geo location
    8. Server Sent Events
    9. Canvas, SVG, basic Javascript
  3. CSS3 Modules
    1. Selectors
    2. Box Model
    3. Backgrounds and borders
    4. Text Effects and User Interface
    5. 2D/3D Transformations
    6. Animations
    7. Multiple Column Layout
  4. Mobile formats using HTML5/CSS3
    1. HTML5/CSS3 formats for mobile browsers
    2. Rich media formats for mobile browsers
    3. Designing mobile apps using HTML5/CSS3
    1. Basic XML content contrast with xhtml
    2. XPATH and tree navigation and selection
    3. XSLT for rendering basic XML documents
Methods of Evaluation -
  1. Completed student projects
  2. Participation in class critiques
  3. Classroom discussions
Representative Text(s) -
Ruvalcaba, Zak. Murach’s HTML5 and CSS3. Murach, 2015.

Disciplines -
Computer Information Systems OR Graphic Arts
Method of Instruction -
  1. Lectures on technical and conceptual concepts in advanced website design and development.
  2. Discussion and critique of projects and representative media.
  3. Group discussions that address the creative problem solving process and technical concepts.
  4. Demonstration of advanced website design and development techniques.
Lab Content -
  1. Semantic/structural tags
  2. Form and input tags
  3. Media tags
  4. Drag/Drop, geo location, local storage
  5. Server Sent Events and Web Sockets
  6. Canvas, SVG, basic Javascript
  7. CSS3 selectors and box model, multiple column layout
  8. Backgrounds, borders, text effects, and user interface
  9. 2D/3D transformations and animation
  10. Mobile content and formats
  11. XML and xhtml
Types and/or Examples of Required Reading, Writing and Outside of Class Assignments -
  1. Example of required reading assignments:
    1. Chapter 4, How to work with Cascading Style Sheets
  2. Example of required writing assignment:
    1. CSS markup for one or more pages including inline comments explaining markup and design