Practice Pages

Practice One: A Styled Web Page

Use the knowledge and skills you gained in this course to create a simple web page that contains the following content:

<!DOCTYPE html>
<html>
<head>
  <title>Practice One: A Styled Web Page</title>
  <style>
    body {
      background-color: #505759;
    }
    h1 {
      color: #b9dfff;
      font-size: 40px;
      padding: 20px;
    }
    p {
      color: #ecf6ff;
      font-size: 30px;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div style="background-color: #145d85">
    <h1>Heading one in section one</h1>
    <h1>Heading two in section one</h1>
  </div>
  <div style="background-color: #00a6f2">
    <p>Paragraph one in section two</p>
    <p>Paragraph two in section two</p>
  </div>
  <div>
    <img src="http://www.duncanpriebe.com/blog/wp-content/uploads/2015/03/Low-Flying-Aircraft.bmp"></img>
    <a href="http://www.duncanpriebe.com/blog">My Blog</a>
  </div>
</body>
</html>

Practice Two: Adding JavaScript

Add the following features to the code you wrote in the previous exercise:

<!DOCTYPE html>
<html>
<head>
  <title>Practice One: A Styled Web Page</title>
  <style>
    body {
      background-color: #505759;
    }
    h1 {
      color: #b9dfff;
      font-size: 40px;
      padding: 20px;
    }
    p {
      color: #ecf6ff;
      font-size: 30px;
      padding: 20px;
    }
  </style>
</head>
<body onLoad="printMessage();">
  <div style="background-color: #145d85">
    <h1 id="headingId">Heading One</h1>
    <h1>Heading Two</h1>
  </div>
  <button type="button" onClick="changeHeadings();">Change Headings</button>
  <div id="divTwo" style="background-color: #00a6f2">
    <p>Paragraph one</p>
    <p>Paragraph Two</p>
  </div>
  <script>
    for (var i = 0; i < 5; i++) {
      var element = document.createElement("p");
      var text = document.createTextNode("New paragraph " + (i + 1));
      var div = document.getElementById("divTwo");
      element.appendChild(text);
      div.appendChild(element);
    }
  </script>
  <div>
    <img src="http://www.duncanpriebe.com/blog/wp-content/uploads/2015/03/Low-Flying-Aircraft.bmp"></img>
    <a href="http://www.duncanpriebe.com/blog">My Blog</a>
  </div>
  <script>
    function printMessage() {
      console.log("The body has been loaded.");
    }
    function changeHeadings() {
      document.getElementById("headingId").innerHTML = "New Text";
      document.getElementById("headingId").style.backgroundColor = "#424242";
    }
  </script>
</body>
</html>

Practice Three: A Personal Page

For your third and final exercise, try creating a complete, profressional-looking web page that uses JavaScript to create and style all elements. Features may include:

Once you've finished practicing here, move on to the next page.

Continue to Next Page »