Academic Catalog

GID 77: ADVANCED WEBSITE DESIGN & DEVELOPMENT

Foothill College Course Outline of Record

Foothill College Course Outline of Record
Heading Value
Units: 4
Hours: 3 lecture, 3 laboratory per week (72 total per quarter)
Advisory: GID 56 and 57.
Degree & Credit Status: Degree-Applicable Credit Course
Foothill GE: Non-GE
Transferable: CSU
Grade Type: Letter Grade (Request for Pass/No Pass)
Repeatability: Not Repeatable

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:
A. Develop a sound plan for converting an existing website using xhtml/CSS to HTML5/CSS3, and/or develop a new website using HTML5/CSS3.
B. 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.
C. 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.
D. 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.
E. Demonstrate basic use of XSLT in rendering XML content.

Course Content

A. 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
B. 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
C. 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
D. 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
E. XML XPATH and XSLT
1. Basic XML content contrast with xhtml
2. XPATH and tree navigation and selection
3. XSLT for rendering basic XML documents

Lab Content

A. Semantic/structural tags
B. Form and input tags
C. Media tags
D. Drag/Drop, geo location, local storage
E. Server Sent Events and Web Sockets
F. Canvas, SVG, basic Javascript
G. CSS3 selectors and box model, multiple column layout
H. Backgrounds, borders, text effects, and user interface
I. 2D/3D transformations and animation
J. Mobile content and formats
K. XML and xhtml

Special Facilities and/or Equipment

A. 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.
B. 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.

Method(s) of Evaluation

A. Completed student projects
B. Participation in class critiques
C. Classroom discussions

Method(s) of Instruction

A. Lectures on technical and conceptual concepts in advanced website design and development.
B. Discussion and critique of projects and representative media.
C. Group discussions that address the creative problem solving process and technical concepts.
D. Demonstration of advanced website design and development techniques.

Representative Text(s) and Other Materials

Ruvalcaba, Zak. Murach’s HTML5 and CSS3. Murach, 2015.

 

Types and/or Examples of Required Reading, Writing, and Outside of Class Assignments

A. Example of required reading assignments:

1. Chapter 4, How to work with Cascading Style Sheets

B. Example of required writing assignment:

1. CSS markup for one or more pages including inline comments explaining markup and design

 

Discipline(s)

Computer Information Systems, Graphic Arts