Do Now: Reproduce this page

Load JSBin and reproduce this page as closely as you can!

My Justin Beiber Fan Page

<html>
<head>
<style>
body { background-color:pink; }
h1 { color:purple; }
#reasonOne { color:blue; }
#reasonTwo { color:red; }
#reasonThree { font-style:italic; }
<style>
</head>
<body>
<h1>Reasons Justin Beiber is Awesome!</h1>
<p>Here are the reasons I think Justin is the best singer on the planet:</p>
<ul>
<li id="reasonOne">He sang Boyfriend, the best song ever</li>
<li id="reasonTwo">He looked good before he dyed his hair</li>
<li id="reasonThree">He never makes any mistakes</li>
<ul>
</body>
</html>
<html>
<head>
<style>
body { background-color:pink; }
h1 { color:purple; }
#reasonOne { color:blue; }
#reasonTwo { color:red; }
#reasonThree { font-style:italic; }
<style>
</head>
<body>
<h1>Reasons Justin Beiber is Awesome!</h1>
<p>Here are the reasons I think Justin is the best singer on the planet:</p>
<ul>
<li id="reasonOne">He sang Boyfriend, the best song ever</li>
<li id="reasonTwo">He looked good before he dyed his hair</li>
<li id="reasonThree">He never makes any mistakes</li>
<ul>
</body>
</html>
<html>
<head>
<style>
body { background-color:pink; }
h1 { color:purple; }
#reasonOne { color:blue; }
#reasonTwo { color:red; }
#reasonThree { font-style:italic; }
<style>
</head>
<body>
<h1>Reasons Justin Beiber is Awesome!</h1>
<p>Here are the reasons I think Justin is the best singer on the planet:</p>
<ul>
<li id="reasonOne">He sang Boyfriend, the best song ever</li>
<li id="reasonTwo">He looked good before he dyed his hair</li>
<li id="reasonThree">He never makes any mistakes</li>
<ul>
</body>
</html>
<html>
<head>
<style>
body { background-color:pink; }
h1 { color:purple; }
#reasonOne { color:blue; }
#reasonTwo { color:red; }
#reasonThree { font-style:italic; }
<style>
</head>
<body>
<h1>Reasons Justin Beiber is Awesome!</h1>
<p>Here are the reasons I think Justin is the best singer on the planet:</p>
<ul>
<li id="reasonOne">He sang Boyfriend, the best song ever</li>
<li id="reasonTwo">He looked good before he dyed his hair</li>
<li id="reasonThree">He never makes any mistakes</li>
<ul>
</body>
</html>
<html>
<head>
<style>
body { background-color:pink; }
h1 { color:purple; }
#reasonOne { color:blue; }
#reasonTwo { color:red; }
#reasonThree { font-style:italic; }
<style>
</head>
<body>
<h1>Reasons Justin Beiber is Awesome!</h1>
<p>Here are the reasons I think Justin is the best singer on the planet:</p>
<ul>
<li id="reasonOne">He sang Boyfriend, the best song ever</li>
<li id="reasonTwo">He looked good before he dyed his hair</li>
<li id="reasonThree">He never makes any mistakes</li>
<ul>
</body>
</html>
<html>
<head>
<style>
body { background-color:pink; }
h1 { color:purple; }
#reasonOne { color:blue; }
#reasonTwo { color:red; }
#reasonThree { font-style:italic; }
<style>
</head>
<body>
<h1>Reasons Justin Beiber is Awesome!</h1>
<p>Here are the reasons I think Justin is the best singer on the planet:</p>
<ul>
<li id="reasonOne">He sang Boyfriend, the best song ever</li>
<li id="reasonTwo">He looked good before he dyed his hair</li>
<li id="reasonThree">He never makes any mistakes</li>
<ul>
</body>
</html>
<html>
<head>
<style>
body { background-color:pink; }
h1 { color:purple; }
#reasonOne { color:blue; }
#reasonTwo { color:red; }
#reasonThree { font-style:italic; }
<style>
</head>
<body>
<h1>Reasons Justin Beiber is Awesome!</h1>
<p>Here are the reasons I think Justin is the best singer on the planet:</p>
<ul>
<li id="reasonOne">He sang Boyfriend, the best song ever</li>
<li id="reasonTwo">He looked good before he dyed his hair</li>
<li id="reasonThree">He never makes any mistakes</li>
<ul>
</body>
</html>
<html>
<head>
<style>
body { background-color:pink; }
h1 { color:purple; }
#reasonOne { color:blue; }
#reasonTwo { color:red; }
#reasonThree { font-style:italic; }
<style>
</head>
<body>
<h1>Reasons Justin Beiber is Awesome!</h1>
<p>Here are the reasons I think Justin is the best singer on the planet:</p>
<ul>
<li id="reasonOne">He sang Boyfriend, the best song ever</li>
<li id="reasonTwo">He looked good before he dyed his hair</li>
<li id="reasonThree">He never makes any mistakes</li>
<ul>
</body>
</html>
<html>
<head>
<style>
body { background-color:pink; }
h1 { color:purple; }
#reasonOne { color:blue; }
#reasonTwo { color:red; }
#reasonThree { font-style:italic; }
<style>
</head>
<body>
<h1>Reasons Justin Beiber is Awesome!</h1>
<p>Here are the reasons I think Justin is the best singer on the planet:</p>
<ul>
<li id="reasonOne">He sang Boyfriend, the best song ever</li>
<li id="reasonTwo">He looked good before he dyed his hair</li>
<li id="reasonThree">He never makes any mistakes</li>
<ul>
</body>
</html>
<html>
<head>
<style>
body { background-color:pink; }
h1 { color:purple; }
#reasonOne { color:blue; }
#reasonTwo { color:red; }
#reasonThree { font-style:italic; }
<style>
</head>
<body>
<h1>Reasons Justin Beiber is Awesome!</h1>
<p>Here are the reasons I think Justin is the best singer on the planet:</p>
<ul>
<li id="reasonOne">He sang Boyfriend, the best song ever</li>
<li id="reasonTwo">He looked good before he dyed his hair</li>
<li id="reasonThree">He never makes any mistakes</li>
<ul>
</body>
</html>
<html>
<head>
<style>
body { background-color:pink; }
h1 { color:purple; }
#reasonOne { color:blue; }
#reasonTwo { color:red; }
#reasonThree { font-style:italic; }
<style>
</head>
<body>
<h1>Reasons Justin Beiber is Awesome!</h1>
<p>Here are the reasons I think Justin is the best singer on the planet:</p>
<ul>
<li id="reasonOne">He sang Boyfriend, the best song ever</li>
<li id="reasonTwo">He looked good before he dyed his hair</li>
<li id="reasonThree">He never makes any mistakes</li>
<ul>
</body>
</html>
<html>
<head>
<style>
body { background-color:pink; }
h1 { color:purple; }
#reasonOne { color:blue; }
#reasonTwo { color:red; }
#reasonThree { font-style:italic; }
<style>
</head>
<body>
<h1>Reasons Justin Beiber is Awesome!</h1>
<p>Here are the reasons I think Justin is the best singer on the planet:</p>
<ul>
<li id="reasonOne">He sang Boyfriend, the best song ever</li>
<li id="reasonTwo">He looked good before he dyed his hair</li>
<li id="reasonThree">He never makes any mistakes</li>
<ul>
</body>
</html>
<html>
<head>
<style>
body { background-color:pink; }
h1 { color:purple; }
#reasonOne { color:blue; }
#reasonTwo { color:red; }
#reasonThree { font-style:italic; }
<style>
</head>
<body>
<h1>Reasons Justin Beiber is Awesome!</h1>
<p>Here are the reasons I think Justin is the best singer on the planet:</p>
<ul>
<li id="reasonOne">He sang Boyfriend, the best song ever</li>
<li id="reasonTwo">He looked good before he dyed his hair</li>
<li id="reasonThree">He never makes any mistakes</li>
<ul>
</body>
</html>
<html>
<head>
<style>
body { background-color:pink; }
h1 { color:purple; }
#reasonOne { color:blue; }
#reasonTwo { color:red; }
#reasonThree { font-style:italic; }
<style>
</head>
<body>
<h1>Reasons Justin Beiber is Awesome!</h1>
<p>Here are the reasons I think Justin is the best singer on the planet:</p>
<ul>
<li id="reasonOne">He sang Boyfriend, the best song ever</li>
<li id="reasonTwo">He looked good before he dyed his hair</li>
<li id="reasonThree">He never makes any mistakes</li>
<ul>
</body>
</html>

Review: Parts of a Tag



< ████    ██████ =" ████ " >

Review: Parts of a Tag



< ████    ██████ =" ████ " >
name attribute value

Review: Parts of a Tag



< img    src =" cutebunny.gif " >

Review: Parts of a CSS Rule


██████ {

    ██████=██████

}

Review: Parts of a CSS Rule

selector
██████ {

    ██████=██████
    property    value
}

Review: Selectors

  • Define what you want to style.
  • Select a single ID: 
    #myPicture {
  height: 200;
  width: 100;
}
  • Select a class: 
    .friendPictures {
height: 150;
width: 75;
}
  • Select all of a single type of tags: 
    p {
   color: red;
}

Review: Properties

Define how you want to style.

Common properties:

  • color
  • background-color
  • height
  • width
  • font-size

A challenge!

I have made some simple webpages with little bugs - see if you can find them! For each bug, write down in words what the mistake is - use the terminology we reviewed!

There is a tool to help if you are stuck! http://bit.ly/html-checker

Micro-Project

With the people at your table, find a new CSS property we have not yet discussed. Make an example webpage with the CSS property to demonstrate it to the class

  • 5 min: Find your CSS property
  • 5 min: Make a demonstration webpage
  • 5 min: Prepare a presentation