Lecture Three

We are going to do three things today.

We are going to start with a cool online tutorial from the Mozilla foundation:


Then, we are going to download all the code from the Duckett site at:


In the above code samples, I will show you some different ways to float images to the left and right, image sizes, and image placement.

Then I will show you about dealing with making different image sizes display at the same size via the code sample below:

Images and Image Formats

This Code Sample Shows How to Set Image Sizes in HTML

<!DOCTYPE html>
<html >
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>A grid of images to talk about css and images</title>
body {
width: 100%;
height: 100%;
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
.grid img {
max-width: 100%;
height: auto;
width: 440px;
.grid {
background: white;
margin: 0 0 20px 0;
.grid:after {
/* Or @extend clearfix */
content: "";
display: table;
clear: both;
[class*='col-'] {
float: left;
padding-right: 20px;
.grid [class*='col-']:last-of-type {
padding-right: 0;
.col-1-2 {
width: 50%;
.col-1-3 {
width: 33.33%;
/* Opt-in outside padding */
.grid-pad {
padding: 20px 0 20px 20px;
.grid-pad [class*='col-']:last-of-type {
padding-right: 20px;
h1 {
color: white;
h1 em {
color: #666;
font-size: 16px;
@media screen and (max-width : 480px ) {
.col-1-2 {
width: 100%;

    <div class="wrapper" style="margin:auto;width:80%">
      <div class="grid grid-pad">
        <div class="col-1-2"> <img src="http://lorempixel.com/400/200/animals/1/" width="400" height="200"> </div>
        <div class="col-1-2"> <img src="http://lorempixel.com/500/250/sports/1/" width="500" height="250"> </div>
      <div class="grid grid-pad">
        <div class="col-1-2"> <img src="http://lorempixel.com/410/205/cats/1/" width="410" height="205"> </div>
        <div class="col-1-2"> <img src="http://lorempixel.com/440/220/nature/1/" width="440" height="220"> </div>