Lesson 13

355 views
276 views

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
355
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Lesson 13

  1. 1. Front-End Web Development Lesson 13 Responsive Basics
  2. 2. Agenda ● ● ● ● ● ● Review and Build Responsive Layouts Media Queries Media Query Lab The Road Ahead Media Query Practice & Personal Project
  3. 3. Review Let’s bring HTML / CSS back into the equation. Review wireframe.html
  4. 4. Review Assignment Create boxes.html ● use HTML5 and CSS ● fixed width: 960px
  5. 5. Review Assignment Create mobile_boxes.html ● use HTML5 and CSS ● fixed width: 480px
  6. 6. Fixed vs. Responsive Layouts Fixed Layout ● used up until recently (and still used) ● relies on a container of fixed width ● typically 960px
  7. 7. Fixed vs. Responsive Layouts Responsive Layout ● different styles for different screen widths ● uses a fluid layout ○ sized in percentages ● used an elastic layout ○ sized in ems How to Size Text in CSS
  8. 8. Fixed vs. Responsive Layouts Tour Fixed Layouts ● Boston.com ● UPS.com ● Google.com ● Getaround.com
  9. 9. Fixed vs. Responsive Layouts Tour Responsive Layouts ● General Assembly ● Dwolla ● Sweet Hat Club ● RelayRides
  10. 10. Fixed vs. Responsive Layouts Introduce The Responsinator Test several of your personal sites.
  11. 11. Media Queries Code along. Introduce media query code: ● ● ● Start with template.html Build responsive.html Attach three style sheets
  12. 12. Media Queries What breakpoints to use? Popular Screen Resolutions CSS Responsive Breakpoints & Media Queries CSS Media Queries for iPads & iPhones
  13. 13. Media Queries Lab ● Make boxes.html responsive by attaching two style sheets ○ iphone.css and desktop.css ● Bonus: Create a third style sheet ○ ipad.css ● Bonus: Refactor code using @media directive (example)
  14. 14. The Road Ahead Next class you will work on making Startup Matchmaker responsive. Demo
  15. 15. More Review & Personal Project Sketch out what your personal project might look like on a iPhone Begin building iphone.css for your personal project

×