Now we can annotate our content and documents so a web browser can understand their structure, and can visually style that content and lay it out on a page, we will start to think about how our users access this content and what that means for our webpage design. We’ll look at some of the simpler tools at our disposal to help us build pages that are accessible no matter what type of device our users are using.
If the embed above does not work here is a link to the full version of the video
If the embed above does not work here is a link to the full version of the video
Required Reading
- Responsive Web Design - Ethan Marcotte - although this is over ten years old (which is basically prehistoric for an article about the web) it still holds up as a really great introduction to the whys and hows of Responsive Web Design
Related Reading
Code Examples
There are a set of code examples that accompany this course showing the use of the fundamental HTML tags and CSS styles/rules that we look at. (Right click and open in a new window/tab) if you’re viewing this on Learning Central.
- Media Queries [Code: HTML] [Code: CSS] [Demo]
- Responsive Images [Code: HTML] [Code: CSS] [Demo]
Next: Flexbox and Grid
Previous: Exercise 2: CSS Layout