• WD Home
• Calendar
• Student Work
• Links
• WD1 Unit #1
• WD1 Unit #2
• WD1 Unit #3
• WD1 Unit #4
• WD1 Unit #5
• WD2 Unit #1
• WD2 Unit #2
• WD2 Unit #3
• WD2 Unit #4
• WD2 Unit #5
• WD2 Unit #6

Unit 2: Responsive Web Design

Learning Targets

1. I can write CSS media queries that targets specific screens sizes to change the design of a website and deliver an optimal user experience for different screen sizes.
   

   Still Developing	Approaching Mastery	Mastery	Exceeds Mastery
   I can write CSS media queries that targets specific screens sizes to change the design of a website.	I can write CSS media queries that targets specific screens sizes to change the design of a website and deliver a adequate user experience for different screen sizes.	I can write CSS media queries that targets specific screens sizes to change the design of a website and deliver an optimal user experience for different screen sizes.	I can write CSS media queries that targets specific screens sizes to change the design of a website and deliver an optimal user experience for different screen sizes, screen resolutions, device orientation, and device or browser height.

   
   
2. I can use a fluid grid system to create a complex website layout that adjusts to the size of the screen to organize content.
   

   Still Developing	Approaching Mastery	Mastery	Exceeds Mastery
   I can use a fluid grid system to create a complex website layout that adjusts to the size of the screen.	I can use a fluid grid system to create a simple website layout that adjusts to the size of the screen to organize content.	I can use a fluid grid system to create a complex website layout that adjusts to the size of the screen to organize content.	I can write my own fluid grid system to create a complex website layout that adjusts to the size of the screen to organize content.

   
   
3. I can implement flexible media in a website that scales proportionally, while maintaining quality, as the size of the screen changes.
   

   Still Developing	Approaching Mastery	Mastery	Exceeds Mastery
   I can implement flexible media in a website that scales as the size of the screen changes.	I can implement flexible media in a website that scales proportionally as the size of the screen changes.	I can implement flexible media in a website that scales proportionally, while maintaining quality, as the size of the screen changes.	I can implement flexible media in a website that scales proportionally as the size of the screen changes. I can set minimum and maximum scale percentages to optimize the quality and performance of the website.

   
   
4. I can design, develop, and test a product that meets a specific list of requirements and demonstrates proficiency in the use of the elements and techniques of the technology.
   

   Still Developing	Approaching Mastery	Mastery	Exceeds Mastery
   I can design, develop, and test a product that meets some aspects of a specific list of requirements and demonstrates proficiency in the use of some of the elements and techniques of the technology.	I can design, develop, and test a product that partially meets a specific list of requirements and demonstrates proficiency in the use of most of the elements and techniques of the technology.	I can design, develop, and test a product that meets a specific list of requirements and demonstrates proficiency in the use of the elements and techniques of the technology.	I can design, develop, and test a product that meets a specific list of requirements and includes innovative work and demonstrates analysis of the elements and techniques of the technology.

Resources

1. Introduction to Responsive Design
2. Responsive Web Design
3. The Responsive Grid System
4. Fluid Layouts in Dremweaver

Assessments

1. Media Query Assignment
2. Fluid Grid Assignment
3. Flexible Media Assignment
   1. Flexible Media Assignment Downloads
4. Challenge: Responsive Web Design