- Review previous class's exercises
- Learn flexible images
- Learn how to use media queries
- Homework #6
- Next class
April 23, 2020
Class intro and review of previous exercises. I recommend you follow along and make sure you understand flexible grids before moving on.
We are now experts at flexible layouts and converting mockups with pixels to flexible units. Now we want to focus on making our images be flexible.
Our layouts are flexible, our images are scaling... but when you get to a really small screen, the content doesn't always look like it should. This is where media queries are useful. We might want things to display different on different screen sizes and resolutions.
Due: Thursday, 9:00 AM, April 30
Through this exercise, you'll develop the ability to test your understandings of Responsive Web Design (RWD). Specifically, you should implement fluid layouts, flexible images, and media queries. To successfully complete this task, you should be able to exhibit mastery of the objectives from Exercises 1-5, and you should also:
Here's what you should do: Generate two files - one HTML file and corresponding external stylesheet for controlling layout and appearance.
You should make sure your work includes:
This represents the minimum you should do to successfully complete the exercise. You should feel free to go further – such practice will only improve your skills. In the end your browser might display something like this:
Next class, we're going to be doing more work with responsive web design.
On the 30th, we're going to do a partner usability study on each others websites. We are going to use our 9:00-10:45 AM class time to do this. This means that you'll be logging on during our normal class time. If this is a problem, please let me know immediately so we can come up with an alternative. Decide on your partner and one of you should email me (or message me on Teams) you and your partner's name by the end of the day, Sunday, April 26th. If you do not have a partner, let me know as soon as you can and I'll pair you with someone.