Do Now: Reproduce this page – My Justin Beiber Fan Page – Review: Parts of a Tag

View Github Repository Open presentation in a new window

mccluresc

See all presentation from mccluresc

Do Now: Reproduce this page – My Justin Beiber Fan Page – Review: Parts of a Tag

0 0

scripted-css2

On Github mccluresc / scripted-css2

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
Do Now: Reproduce this page Load JSBin and reproduce this page as closely as you can!