Task 1: Creating Your Content

For Task 1, you will get comfortable with writing markup, and with separating content from design and layout.

Getting Started

Open your index.html file.

Your index.html comes with a simplified HTML5 boilerplate:

1
2
3
4
5
6
7
8
9

<!DOCTYPE html>

<html>
   <head>
      <title></title>
   </head>

   <body></body>
</html>

Getting to Work

Your mission is to build a page that:

  1. Tells a story. This can be personal or impersonal, funny, serious or neither. You can do whatever you like, but it should be something in the range of 3-10 paragraphs or sections. Here is an example , and here are some other ideas:

    1. Create a résumé page that tells the story of your professional journey to-date, and where you want to go as a coder.
    2. Describe a trip you took.
    3. Talk about one of your hobbies or passions.

  2. Does each of the following:

    1. Uses each of the following structural HTML5 tags at least once:

      1. <p>
      2. <header>
      3. <footer>
      4. <main>
      5. <article>.

      If you need to review any of these tags, check out the HTML tag reference at w3schools.

    2. Uses at least one <img> tag (hopefully more).

      1. When placing images in your page, put them in a new subfolder called images within your html-me-something directory.

    3. Uses at least one HTML entity .

      Hint: putting a copyright notice in your footer will afford you the opportunity to use &copy;, but you should also try to get creative here.

    4. Demonstrates creativity.

      Don’t stop with these items or tags. Have some ideas for your page, and make it great. And dig into the w3schools HTML reference to learn more about other tags, their usage and attributes!

Notes and Tips

  1. Use your browser developer tools to look at the example page , or to troubleshoot things that don’t look right. You can mimic the document structure of this example, but do NOT just copy/paste!
  2. Use the example to learn how your HTML elements might be structured, and build your page to fit your own content.
  3. Don’t add any CSS yet. Really, we mean it! If you think your page looks boring now, that’s okay. We’ll get there soon enough.
  4. As you make changes, you will obviously want to see the results. To do so, re-save the file in your text editor, then click Refresh in the browser window (or use cmd+R on a Mac, ctrl+R on Windows).
  5. Rely on the reference sites linked on this page, or find others online. We haven’t taught you every detail about every tag that you may want or need.
  6. You’re free to use tags that haven’t been explicitly introduced in class. We’ve given you enough background to get started, and are intentionally leaving some of the learning up to you.
Tip

Once you finish your page, use Git to add and commit your index.html changes.

Well done! You may notice that you haven’t got a green check mark on your repository yet. You need to create and apply some design features. You will do that in Task 2 .