|
May 14, 2024
|
|
|
|
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
- Creative visual and informational web design processes
- The concepts of responsive web design
- Planning a responsive web site
- Adjusting screen resolution
- Custom layout structure
- Showing and hiding content
- Creating liquid and elastic layouts
- CSS3 media queries
- Making images flexible
- Foreground images that scale with the layout
- Creating sliding composite images
- Hiding and revealing portions of images
- Making embedded videos flexible
- Advanced features with Flexbox, Grid, and Bootstrap
- Templates with CSS variables and preprocessors
- Project presentation and critiques
Learning Outcomes At the end of this course students will be able to:
- employ a creative visual Web design process.
- employ a creative informational Web design process.
- discuss the concepts of Responsive Web Design.
- plan flexible design layouts for responsive websites.
- adjust screen resolutions.
- implement hiding and showing of content based on screen resolution.
- create flexible web design solutions for multiple formats.
- apply CSS3 image properties to dynamically resize images.
- use CSS3 to allow images to reposition on flexible layouts for Responsive Web sites.
- apply CSS3 Media Queries to implement flexible layouts for Responsive Web sites.
- create responsive layouts with CSS Flexbox, Grid, and Bootstrap.
- solve design and technical problems through the use of critical thinking.
- employ CSS variables and preposessors to create template theme.
- 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)
|
|