May 14, 2024  
2022-2023 Course Catalog 
    
2022-2023 Course Catalog [ARCHIVED CATALOG]

Add to Portfolio (opens a new window)

WEBD 2121 - Responsive Web Design for Desktop and Mobile Devices

Credits: 3
Hours/Week: Lecture 2 Lab 2
Course Description: This course emphasizes designing responsive websites that display equally well on all formats, from desktop computers to mobile devices such as tablets and smart phones. This hands-on, project-oriented course focuses on planning and creating multiple responsive webpage layouts using CSS Media Queries, Grid, Flexbox, and Bootstrap.
MnTC Goals
None

Prerequisite(s): WEBD 1125  with a grade of “C” or higher
Corequisite(s): None
Recommendation: None

Major Content
  1. Creative visual and informational web design processes
  2. The concepts of responsive web design
  3. Planning a responsive web site
  4. Adjusting screen resolution
  5. Custom layout structure
  6. Showing and hiding content
  7. Creating liquid and elastic layouts
  8. CSS3 media queries
  9. Making images flexible
  10. Foreground images that scale with the layout
  11. Creating sliding composite images
  12. Hiding and revealing portions of images
  13. Making embedded videos flexible
  14. Advanced features with Flexbox, Grid, and Bootstrap
  15. Templates with CSS variables and preprocessors
  16. Project presentation and critiques

Learning Outcomes
At the end of this course students will be able to:

  1. employ a creative visual Web design process.
  2. employ a creative informational Web design process.
  3. discuss the concepts of Responsive Web Design.
  4. plan flexible design layouts for responsive websites.
  5. adjust screen resolutions.
  6. implement hiding and showing of content based on screen resolution.
  7. create flexible web design solutions for multiple formats.
  8. apply CSS3 image properties to dynamically resize images.
  9. use CSS3 to allow images to reposition on flexible layouts for Responsive Web sites.
  10. apply CSS3 Media Queries to implement flexible layouts for Responsive Web sites.
  11. create responsive layouts with CSS Flexbox, Grid, and Bootstrap.
  12. solve design and technical problems through the use of critical thinking.
  13. employ CSS variables and preposessors to create template theme.
  14. critique one’s own work and that of other students in group discussions.

Competency 1 (1-6)
None
Competency 2 (7-10)
None


Courses and Registration



Add to Portfolio (opens a new window)