HCDE 532: Week 10
- Homework review: assignment 9
- Continued: Responsive design
- Discussion: Interactivity
- Document embed: Scribd.com, Slideshare.net
- In-class exercise – continuing to code
- Discussion: class next Wednesday?
- Due Friday 16 March at 5 pm, final assignment
Homework review
Take a few minutes and look at fellow student implementation. Remember to run your page through the W3C HTML validator
- Aastha | https://staff.washington.edu/aastha11/contact.html
- Alice | https://students.washington.edu/uwalice/contact.html
- Chun-Fang (Jenni) | https://students.washington.edu/jennicf/contact.html
- David | https://students.washington.edu/molinero/contact.html
- Jake | https://students.washington.edu/grhodes/contact.html
- Jihoon | http://students.washington.edu/jihoons/contact.html
- Julie | https://students.washington.edu/jstu2/contact.html
- Laura | https://students.washington.edu/lmeise/contact.html
- Pierre | https://staff.washington.edu/pdelcour/contact.html
- Putri | http://staff.washington.edu/putrih/contact.html
- Rachel | https://students.washington.edu/xukun/contact.html
- Thana-On | https://students.washington.edu/thanaon/contact.html
- Tucker | https://students.washington.edu/tstandle/contact.html
- Yaonan (Natalie) | https://students.washington.edu/yaonah/contact.html
- Ziyan | https://students.washington.edu/ziyan053/contact.html
Responsive design, continued
Responsive-specific css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
/* responsive specific css */ * { box-sizing: border-box; } /* For desktop: */ /* Each row should be wrapped in a div */ /* The number of columns inside a row should always add up to 12 */ .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} [class*="col-"] { float: left; padding: 15px; border: 1px solid red; } /* clears the flow after each row */ .row::after { content: ""; clear: both; display: table; } |
Interactivity
- What is it?
- Things to consider when writing code
