Academic Catalogs

DART G200: Web Design II

Course Outline of Record
Item Value
Curriculum Committee Approval Date 11/16/2021
Top Code 061430 - Website Design and Development
Units 3 Total Units 
Hours 90 Total Hours (Lecture Hours 36; Lab Hours 54)
Total Outside of Class Hours 0
Course Credit Status Credit: Degree Applicable (D)
Material Fee No
Basic Skills Not Basic Skills (N)
Repeatable No
Grading Policy Standard Letter (S), 
  • Pass/No Pass (B)

Course Description

Formerly: Advanced Web Design. This course will provide students with the fundamentals of responsive website design with emphasis on cross platform functionality including phone, tablet, and desktop. Students will apply concepts from interaction design and human computer interaction and build an interactive website. Other topics covered in the course include navigation, animation graphics for Web, interactive content, audio and video for Web, using templates, and wireframe mockups. ADVISORY: DART G178. Transfer Credit: CSU.

Course Level Student Learning Outcome(s)

  1. Course Outcomes
  2. Apply eCommerce capability to website construction and management.
  3. Utilize Web connection protocols to build websites that will work with a variety of servers.
  4. Use HTML and hand coding in website development.
  5. Design responsive websites capable of being viewed on desktop computers, mobile, and tablet devices.
  6. Employ multiple website design applications.
  7. Integrate movement and animation into website page designs.

Course Objectives

  • 1. Prioritize website content to fit information architecture best practices, including mobile-first methodologies.
  • 2. Write the most common HTML/CSS properties with proper indentation and comments and understand how to use these properties efficiently.
  • 3. Apply a modern workflow to a responsive website design, including competitive research techniques, content development, information architecture, design and development.
  • 4. Utilize style tiles and reusable patterns for colors, typography, layout, and user interface elements for developing prototypes.
  • 5. Create interactive prototypes and wireframes in HTML/CSS, using standards-compliant HTML and CSS, media queries and responsive layouts.
  • 6. Evaluate prototypes for common performance, usability, and Web browser issues.

Lecture Content

Advanced Website Construction A second look at the tools of construction to learn additional functions. Multiple information sources by linking. Color choices to expand design and interest. Shapes for function and information storage. Slicing to add more information to a page. Image Ready site planning and construction. Advanced optimizing in Photo Shop. HTML Hand Coding Review of HTML codes, tabs and hyperlinks. Adding art to the code table. Reading and repairing codes. Movement in Web Pages Animation programs and how they work in the web. Getting the most visual movement for the least memory. Simple shapes that become believable animations. Introduction to Flash. Advanced Layout Designs Choices in type, color, position and content. Producing good rollover buttons and photo pop-ups. Building links to other sites. Creating desired viewer actions and responses. Providing good contact back channels for clients. Website Memory Management The benefits of optimizing to acceptable quality. Building good jpeg and gif images. Learning advanced slicing techniques. Getting the most out of limited memory.

Lab Content

Initial Responsive Web Design Writing the basic HTML file Taming images Enter media queries Writing HTML Markup The doctype HTML tag and lang attribute Character encoding New semantic elements of HTML5 HTML Text-Level Semantics element tags Embedding Media in HTML5 Adding video Adding audio Responsive HTML5 videos and iframes Media Queries Fluid Layout Using Flexbox Responsive images Layout Grid with CSS Grid Basic grid syntax Setting up a grid Placing and sizing grid items Names grid lines CSS Selectors Web typography CSS color formats RGB color HSL color Alpha channels Aesthetics with CSS Text shadows Box shadows Background gradients Repeating gradients Background gradient patterns Multiple background images CSS filters CSS clip-path Using SVGs for Resolution Independence CSS Motion Transitions Transformations 2D transforms Scale Translate Rotate Skew Matrix 3D transforms 3D property Progressive enhancements Animations Forms with HTML5 and CSS HTML5 forms Input types Styling HTML5 forms with CSS

Method(s) of Instruction

  • Lecture (02)
  • DE Live Online Lecture (02S)
  • DE Online Lecture (02X)
  • Lab (04)

Reading Assignments

Textbook Website design manuals Magazine articles Internet articles Blogs

Writing Assignments

Write objectives and summaries of proposed projects.  Write a proposal to a company on how you could improve their Internet efficiency.

Out-of-class Assignments

Maintain a reference file of website examples exhibiting best practices. Keep a log on client contact activities.  Prepare and give demonstrations on website preparation techniques.  Work with clients to create a website.

Demonstration of Critical Thinking

Explain the design and layout of complex website designs.  Critique a given website and give suggestions for improvements.  Create a simple working web site with little or obscure instructions.

Required Writing, Problem Solving, Skills Demonstration

Prepare site diagram layout sketches for proposed projects.  Write a proposal to a company on how you could improve their Internet efficiency.  Create multiple site designs for the same program.

Eligible Disciplines

Art: Masters degree in fine arts, art, or art history OR bachelors degree in any of the above AND masters degree in humanities OR the equivalent. Note: “masters degree in fine arts” as used here refers to any masters degree in the subject matter of fine arts, which is defined to include visual studio arts such as drawing, painting, sculpture, printmaking, ceramics, textiles, and metal and jewelry art; and also, art education and art therapy. It does not refer to the “Master of Fine Arts” (MFA) degree when that degree is based on specialization in performing arts or dance, film, video, photography, creative writing, or other non-plastic arts. Masters degree required. Commercial art (sign making, lettering, packaging, rendering): Any bachelors degree and two years of professional experience, or any associate degree and six years of professional experience. Graphic arts (desktop publishing): Any bachelors degree and two years of professional experience, or any associate degree and six years of professional experience. Multimedia: Any bachelors degree and two years of professional experience, or any associate degree and six years of professional experience.

Textbooks Resources

1. Required Frain , B. Responsive Web Design with HTML5 and CSS: Develop future-proof responsive websites using the latest HTML5 and CSS techniques, 3rd ed. Packt Publishing, 2020