Session 1: This week we will begin looking at ways to make our templates responsive to devices with different dimensions like desktops, laptop, tablets, and mobile phones. One of the best techniques available are media queries. Essentially, media queries allow us to insert logic into our CSS that changes the properties assigned to certain rules when the maximum or minimum screen width goes above or below a specified value.
CSS Media queries allow you to target CSS rules based on – for instance – screen size, device-orientation or display-density. This means you can use CSS Media Queries to tweak a CSS for an iPad, printer or create a responsive site. Open the overview to see the complete list, and find for each media query if your browser applies these.
– cssmediaqueries.com
Relevant resources:
MDN: CSS media queries
Gallery of Sites Using Media Queries
Media Queries Explained on W3Schools
Session 2: Today the first of several Final Web Application Milestones are due (Final Web Application Milestone #1). Please be prepared to show me what you have produced for feedback during studio time.
This site provides 39 examples of CSS transitions. The code appears after clicking on each one:
http://leaverou.github.io/animatable/#
This site shows an example of how to use media queries to change content based on resizing of the page:
http://css-tricks.com/css-media-queries/
This site shows example code using media queries in order to rearrange content depending on the size of the window. You can even try resizing the window to see how their example changes:
http://learnlayout.com/media-queries.html