|
Dec 21, 2024
|
|
|
|
VCT 2121 - Responsive Web Design for Desktop and Mobile Devices Credits: 3 Hours/Week: Course Description: This course will cover the design of Responsive Web sites that display equally well on all formats from desktop computers to mobile devices such as tablets and smart phones. In this hands-on, project-oriented course, students will explore the concepts, design issues, and techniques of planning, designing, and creating Responsive Web sites. Projects will include the design and creation of multiple Responsive Web sites. MnTC Goals None
Prerequisite(s): VCT 1125 with a grade of C or higher Corequisite(s): None Recommendation: None
Major Content
- 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 Video Flexible
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 Web sites.
- implement the adjustment of 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 Web sites.
- solve design and technical problems through the use of critical thinking.
- 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)
|
|