Htt p ://ami.responsivedesign.

is/

Resources
Course Site
All of the reading material you will need to pass this course is contained within Coursera. Additional
resources may be added as optional material, but everything will be online and free.

CodePEN
For the coding content you may want to access my CodePEN account. CodePEN is a website that
allows you to modify copies of my code. In real time you can see how your changes affect the
website we are working on. The one issue that some students have with CodePEN is that it doesn't
require you to link your files together. So if you want to write the code right on your machine, you will
need to know how to link the code. Don't worry, I do cover that in class.

Here is a link to a collection of code for each week of the course:

Week One: http://codepen.io/collection/nmyRWM/

Week Two: http://codepen.io/collection/nYwVkZ/

Week Three: http://codepen.io/collection/DZQyBr/

Week Four: http://codepen.io/collection/XkkwBb/

When you watch the videos you can check the resources section to find a link to any code that I use
in the lectures. On each video page, just below the video, there is a Downloads section on the right
hand side of the screen. This contains links to mp3 downloads of videos, transcripts and any
CodePEN files referenced in that particular video. Oftentimes you will see two files, a "starter" file
and a "complete" file. This way you can start at the same place as me, but still have access to the
final product.

Discussion Boards
The best way to get help is to utilize the discussion boards. I know that this may be new to many of
you so let me explain how the discussion boards work. We always have one friendly "where are you
from?/introduce" yourself board where people tend to be social. Other than that we encourage
people to use the discussion section that goes with the week you are on. Notice that I said "use" not
"post." We really want to encourage you to read before you post. You will often find your question
already there. If you don't find your question, make sure to post. There are no "stupid" questions.
Ever. (Sometimes you may just have found a mistake on my part that I will need to fix.)

Course Slides
The slides for all of the lectures are now posted. You can find a BIG zip file at http://intro-
webdesign.com/ResponsiveDesignSlides.zip that has a pdf and powerpoint copy of all of the slides.

I have also attached the pdf and powerpoint slide for each lecture directly in the videos themselves.
Just look in the Downloads section to view them.

Fluid Measurements: Background readings

I like to include additional resources that align with my lectures and I will be putting these ideas into
practice in the next two videos. In this case, I have found four really good articles that relate to my
next lecture on Fluid Measurements.

1. Responsive Web Design: Using Fonts Responsibly by Annarita

Tranfici http://www.sitepoint.com/understanding-responsive-web-design-how-to-manage-fonts/
2. Web Design Basics: Rem vs. Em vs. PX - Sizing Elements in CSS by Matthew Davis (**
Material here is used in Week Two Assessment**) https://www.futurehosting.com/blog/web-
design-basics-rem-vs-em-vs-px-sizing-elements-in-css/
3. What's the Deal with Em and Rem? (** Material here is used in Week Two
Assessment**) https://codemyviews.com/blog/whats-the-deal-with-em-and-rem
4. Font Size Idea: px at the Root, rem for Components, em for Text Elements by Chris
Coyier https://css-tricks.com/rems-ems/ (Please note, some people on Firefox get a warning
when using this link. It is not the case for other students.)
http://pxtoem.com/

I recommend that you complete the Readings on Fluid Measurements before and/or after watching
this video. Some of these topics take time to understand and it is best to see the material from
multiple sources. Here is a link to those readings if you missed
them: https://www.coursera.org/learn/responsivedesign/supplement/iJAxV/fluid-measurements-
background-readings
https://codepen.io/ColleenEMc/pen/QyzJGy

Dynamically change the size of font with sliders

This CodePen by Chris Coyier will let you use sliders to dynamically change the font size on a page

http://codepen.io/chriscoyier/pen/tvheK

This demo goes with one of the readings on Fluid Measurements, but I am including it here again
just in case you missed the code. You can read it here if you want to know how to use the
tool. https://css-tricks.com/rems-ems/

Optional: CSS definitions of relative and absolute

Someone provided me with a link that helped them better understand the meaning of "relative" and
"absolute" as they relate to CSS. Here is the link: https://www.w3.org/TR/css3-values/#length-value.
This is a fairly technical document and is not required reading for the course.

body{

background-color: red;

@media screen and (min-width:600px){

body{

background-color: blue;

@media screen and (min-width:900px){

body{
 background-color: green;

} http://www.wireframeshowcase.com/wireframes/detail/tape_events

https://www.dtelepathy.com/blog/design

https://www.dtelepathy.com/blog/design/learning-to-wireframe-10-best-practices

https://quizlet.com/vn/458714536/responsive-flash-cards/

e: http://getbootstrap.com/, http://getbootstrap.com/getting-started/#download, or http://www.getboot
strap.com j

<header>

<h1> Web Design is Awesome!!!(I guess...)</h1>

<nav>

<a href="http://www.umich.edu/">University of Michigan</a>

<a href="http://www.intro-webdesign.com/">Intro to Web Design</a>

</nav>

</header>

<section id = "left">

<h2>Why I am taking this class</h2>

<ol>

<li>It is required.</li>

<li>I already know it, easy A!</li>

<li>My mom wants a webpage.</li>

</ol>

</section>
 <section id = "center">

<h2>Why I am at University of Michigan</h2>

<div class="myClass">

<h3> Ann Arbor</h3>

<p >There are many excellent reason to attend the <a href = "umich.edu">University of
Michigan</a>. The academics are top-notch, the students are exceptionally good-looking, and for about
six weeks out of the year the weather is almost pleasant.</p>

</div>

<div>

<img src="https://encrypted-tbn2.gstatic.com/images?
q=tbn:ANd9GcTzDojh5E0fzvTg4nWYs0JadpTwcS2S1KHOtnVQnlruNqmNvfIk" alt="Football">

<img src="https://encrypted-tbn1.gstatic.com/images?
q=tbn:ANd9GcTO8WIJ5ygVENopHPC5Op9z4ua-MoGD-LoUZuEd6vdL-EMro28CWw" alt="Solar Car">

<!-- <img src="http://www-

personal.umich.edu/~jensenl/visuals/album/annarbor/IMG_1051.jpg" alt="campus"> -->

<!-- <img src="https://encrypted-tbn2.gstatic.com/images?

q=tbn:ANd9GcTzDojh5E0fzvTg4nWYs0JadpTwcS2S1KHOtnVQnlruNqmNvfIk" alt="Football"> -->

</div>

</section>

body{
 margin: 1%;

padding:1%;

background-color: rgba(0,0,255,.2);

font-size: 100%;

min-width: 500px;

header h1{

font-size: 3rem;

color:rgba(0,0,0,.7);;

section{

margin:1%;

padding:1%;

width:30%;

float:left;

nav a{

display:block;

background-color: white;

border: 1px solid black;

 text-align: center;

border-radius: 35px;

text-decoration: none;

padding: 2%;

margin: 1%;

h1{

text-align: center;

color:rgba(255,0,0,.7);;

.myClass{

margin: 0em 1em;

padding:.60em;

border: 1px solid black;

border-radius: .25%;

width: 70%;

-webkit-column-count:3;

-moz-column-count: 3;

column-count:3;

}
ol{

list-style:upper-roman;

margin:1em;

https://builtwithbootstrap.com/

https://getbootstrap.com/

http://blog.nocturnalmonkey.com/css-frameworks-and-semantics/

https://codepen.io/nandar1/pen/JjXvPjM

Optional - Demystifying Bootstrap

I am about to go into some of the more advanced classes in Bootstrap. Before we begin, are you
looking for another reference on Bootstrap? I found that this article did a nice job of showing
Bootstrap classes along with the CSS that goes with them. http://www.sitepoint.com/responsive-
web-design-tips-bootstrap-css/

This material is not required for the course.

Optional: The Evolution of the Airbnb front-end

deveopment

This is an interesting article on the evolution of the Airbnb website.

https://www.airbnb.com/meetups/x4ede5jr2-css-frameworks-and-the-evolution-of-airbnb-s-frontend

I think one of the reasons I find it interesting is that the CodeAcademy CSS tutorial actually uses a
similar platform to teach about Bootstrap.
This material is not required for the course.

OPTIONAL - Debugging your style with

Firebug
I tend to use Chrome as my browser, and Inspect Element to debug my site. However, here is a
tutorial for another very popular development tool - Firebug. This video by Vicki Watson will walk you
through how it works. https://www.ostraining.com/blog/coding/bootstrap-firebug/

OPTIONAL - More resources for learning to

debug/develop

OPTIONAL - More resources for learning to debug/develop

If anyonewant to a little bit improve testing and debugging skills using Chrome. Codeschool has free
course about DevTools:

https://www.codeschool.com/courses/discover-devtools