http://slides.com/amandacheung/intermediate-html-css
Instructor: Amanda Cheung
Teaching Assistants: Colleen, Jenn, Maura, Sara |
Dobot shop
Visual
Motor
Auditory
Cognitive
What are some things I built in for accessibility here?
.visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
Visually hide “Shop”
.logo {
height: 50px;
width: 50px;
transition-duration: .25s;
transition-property: opacity;
&:hover {
opacity: .75;
}
}
Wikipedia says: Design and build sites to provide optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors)
Example: The Great Discontent
Write the code once and have it functional
and legible across many devices.
People use a wide range of devices to complete their tasks.
Reading on mobile phones, shopping on tablets, etc.
"The first major, high-traffic, content-heavy website to adopt a responsive design" - Beaconfire Wire
"Raise[d] public awareness of this flexible, standards-based, multi-platform and user-focused web design approach"
- Jeffrey Zeldman
The font is Montserrat and the teal is #8affbf. Write CSS that changes the font sizes at different media queries.
Why mobile first?
Don’t forget this meta tag
<meta name="viewport" content="width=device-width">
Test on a device or with a simulator (Easy way: GitHub pages)
Twitter: @acacheung
6/7: CSS Modules