Web Building Blocks

In this demo/exercise, you will transform a simple set of text into a funcional web page.

HTML

Below is the start of our web page, it consists of just some text. Your job is to add the HTML to give the page some structure. To get started, click on the "Edit on CODEPEN".

• Make the first line a (h1) heading (<h1> ... </h1>)
• Enclose the two paragraphs in p-tags (<p> ... </p>)
• Mark the text "really easy" (in the first paragraph) as bold.
• Make the text "pug photos" into a link pointing to http://goo.gl/HQ60fK
• Add an image below the second paragraph using the photo at http://goo.gl/aWhiFb

My First Webpage
This is my first attempt at making a webpage and it is turning out to be really easy. I am glad that I have taken the time to read the instructions and am following step by step.
When I am finished, I plan on using my new skills to create a real webpage to show off my collection of pug photos.  Here is a example!

CSS

Great, now lets add some style. Below is what your markup should look like. Click on "Edit on CODEPEN".

• For the entire page, change the text to be sans-serif, 20px.
• Add an orange boarder (10px thick) around the whole page.
• Add 20px padding between the border and the content.
• Change the color of the heading to be blue.
• Make the bold (strong) text appear green in uppercase.
• Make the link red.
• Rotate the image 15 degrees counter-clockwise.

<h1>My First Webpage</h1>
<p>This is my first attempt at making a webpage and it is turning out to be <strong>really easy</strong>. I am glad that I have taken the time to read the instructions and am following step by step.</p>
<p>When I am finished, I plan on using my new skills to create a real webpage to show off my collection of <a href="http://goo.gl/HQ6OfK">pug photos</a>.  Here is a example!</p>
<img src="http://goo.gl/aWhiFb" />

Javascript

Fantastic, now let's add some action to the page. Below is what your CSS should look like. Click on "Edit on CODEPEN".

• When you click on the image, have it fade out.
• When you click on the heading, have it fade the image back in.

body {
  font-size: 20px;
  font-family: sans-serif;
  padding: 20px;
  border: solid 10px orange;
}
h1 { color: blue; }
strong {
  text-transform: uppercase;
  color: green;
}
a {
  color: red;
}
img {
  display: block;
  margin: 100px auto;
  transform: rotate(-15deg);
}

Finally...

Excellent. Below is what your Javascript should look like.

$('img').click(function() {
  $('img').fadeOut(500);
});
$('h1').click(function() {
  $('img').fadeIn(500);
});