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
/* 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
