Catalog Description

Prerequisite: Completion of AAD 85 with grade of "C" or better
Hours: 90 (36 lecture, 54 laboratory)
Description: Intermediate course in front-end web design and development. Current topics will be covered as they relate to user interface design, user experience design, usability principles, and accessibility expectations. Intermediate strategies addressing visual design and brand identity through the combination of layout design, visual assets such as images and graphics, copy and content, typography, and more. Special topics include coverage of industry standards and emerging technologies. (CSU)

Course Student Learning Outcomes

  • CSLO #1: Devise an effective workflow for use in project development including site management, user research, sourcing and preparing visual assets and content, user interface design, and development in the coding environment, and output to the web.
  • CSLO #2: Synthesize various elements and technologies into a cohesive website based on a prototype, including the use of visual assets, interactive elements, advanced CSS, and semantic HTML5 elements.
  • CSLO #3: Manipulate technologies for enhanced usability, Accessibility, and Search Engine Optimization for access by broad populations.
  • CSLO #4: Evaluate final sites through class discussions, self-assessment, and peer reviews, analyzing technique, composition, brand and aesthetics, technical proficiency, and project criteria. Include notes on features of usability and user experience.
  • CSLO #5: Demonstrate an understanding of legal considerations, copyright law, and ethical asset resourcing when designing for media industries. 

Effective Term

Fall 2025

Course Type

Credit - Degree-applicable

Contact Hours

90

Outside of Class Hours

72

Total Student Learning Hours

162

Course Objectives

Lecture Objectives

  1. Summarize changes in the field of Web design and development including languages, tools, and technologies
  2. Define and present a workflow that addresses planning goals and development processes for designing new websites
  3. Compare and contrast various methods and tools for creating CSS-based responsive layouts, images and text
  4. Articulate methods for increasing Accessibility for persons with disabilities
  5. Discuss approaches for improving Search Engine Optimization
  6. Define processes for improving websites through testing, version control, and  workflow/process documentation
     

Laboratory Objectives:

  1. Generate planning documents such as a style guide, wireframe, design comp, and research guide to expedite and define the development workflow
  2. Source, edit, optimize, and prepare visual media assets using modern methods and file types, including the application of responsive visual media assets
  3. Craft and test CSS-based responsive layouts on a variety of devices
  4. Enhance web typography using CSS and responsive measurements
  5. Generate CSS for various media outputs and dimensions using media queries and breakpoints
  6. Incorporate more advanced semantic elements to describe HTML content accurately for usability, accessibility and ranking
  7. Incorporate media elements using assorted methods
  8. Configure websites for search engine optimization using various strategies
  9. Incorporate accessibility features in websites and test for impact
  10. Manage site updates and testing with version control methods
  11. Demonstrate increased knowledge, skill, and ability through the creation of more complex web design projects using intermediate methods

General Education Information

  • Approved College Associate Degree GE Applicability
    • CSU GE Applicability (Recommended-requires CSU approval)
      • Cal-GETC Applicability (Recommended - Requires External Approval)
        • IGETC Applicability (Recommended-requires CSU/UC approval)

          Articulation Information

          • CSU Transferable

          Methods of Evaluation

          • Classroom Discussions
            • Example: Review the lecture and reading materials on layout methods and technologies for responsive web design, then compare them in a class discussion. Next, identify a process that will work best for current projects.
          • Objective Examinations
            • Example: Choose the measurement model from the list that best fits the following description: "This model scales text elements based on the font size declared for the element of <html>" • % • em • rem • px • pt
          • Projects
            • Example: Students are assigned a website project drafting a proposal, creating the desired design elements including graphics and images, constructing the layout, adding the content, controlling consistent presentation throughout using CSS and applying methods for increasing accessibility, usability and search engine optimization, and finally uploading the website via FTP to a remote server.
          • Skill Demonstrations
            • Example: Optimize five visual and media assets using the best file type for their delivery. Incorporate the assets into an HTML document and then upload the page and submit the URL for assessment.

          Repeatable

          No

          Methods of Instruction

          • Laboratory
          • Lecture/Discussion
          • Distance Learning

          Lab:

          1. The instructor will deliver a lecture and demonstration on using the HTML elements of fig and figcaption to mark up a graph and its description effectively. In addition, the instructor will discuss the use of these elements and their effect on accessibility. Students will then be asked to incorporate these methods into a page that meets accessibility guidelines and demonstrates their understanding of the techniques being applied.

          Lecture:

          1. The instructor will give a lecture on Git and Github and how they relate to version control for site development. Topics covered will include working with teams, and best practices for testing and versioning. Students will be asked to actively participate by responding to questions the instructor posits, and also by developing at least one question to clarify the subject, or extend the concept.

          Distance Learning

          1. The instructor will provide a lecture presentation and accompanying tutorial on responsive design techniques, including an introduction to modules such as Flexbox and CSS Grid. Students will then be asked to follow the tutorial on creating a responsive design for desktop, tablet, and phone output. Students will update their website to include these methods, and provide a link via the LMS. In addition, students will then respond to prompts with written submissions to share where they succeeded and where there is room for growth in their practice.

          Typical Out of Class Assignments

          Reading Assignments

          Read the chapter "Media Queries and Container Queries" from the book titled "Responsive Web Design with HTML5 and CSS: Build future-proof responsive websites using the latest HTML5 and CSS techniques," then complete the associated quiz to test your comprehension.

          Writing, Problem Solving or Performance

          Choose three existing websites to test and evaluate on the following devices: desktop or laptop, tablet, and phone using an online testing environment. Formulate your feedback based on the lecture content covering best practices for responsive websites. Identify the strengths and weaknesses for each site and outline solutions for improvement. Present one site critique to the class.

          Other (Term projects, research papers, portfolios, etc.)

          Assignment: Design a responsive webpage featuring a gallery of visual assets optimized using the correct file type and prepared for a variety of devices and screen sizes. The typographic elements should also be responsive and address the needs of the audience on each device. Upload the final product and share the URL with the instructor for evaluation.

          Required Materials

          • HTML and CSS QuickStart Guide: The Simplified Beginners Guide to Developing a Strong Coding Foundation, Building Responsive Websites, and Mastering the Fundamentals of Modern Web Design
            • Author: DuRocher, David
            • Publisher: ClydeBank Media
            • Publication Date: 2022
            • Text Edition: 1st
            • Classic Textbook?:
            • OER Link:
            • OER:
          • Responsive Web Design with HTML5 and CSS: Build future-proof responsive websites using the latest HTML5 and CSS techniques
            • Author: Frain, Ben
            • Publisher: Packt Publishing
            • Publication Date: 2022
            • Text Edition: 4th
            • Classic Textbook?:
            • OER Link:
            • OER:

          Other materials and-or supplies required of students that contribute to the cost of the course.