HTML Me Something, Part 1

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

Getting Started

Stub out index.html with these basic elements:

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>

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

   <body></body>
</html>

You can now fill each element with some appropriate content.

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: <p>, <header>, <footer>, <main>, <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). 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.

Add and Commit Your Changes on Git

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

Why commit again?

The reason is that you added a bunch of new HTML code to your index.html file. It is now in a very different state compared to the first time you committed it. See this for yourself by checking the status:

$ git status
On branch master
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

    modified:   index.html

no changes added to commit (use "git add" and/or "git commit -a")

Git tells us:

I see that you have modified index.html. Use git add if you want these changes to be included in your next commit.

The Git workflow more or less comes down to this:

  1. Create some initial stuff

  2. init

  3. add and commit

  4. make some changes

  5. add and commit

  6. make some more changes

  7. add and commit

  8. etc...

The general rule is that whenever you make any changes, you must add and commit those changes to Git.

So let’s do that. From within your root html-me-something/ directory:

$ git add index.html
$ git commit -m "Finished work on HTML page"

You might be wondering: How do I know when it’s time to pause working and do another commit?

This is somewhat subjective, and is ultimately up to you. The good habit is to pause and commit any time you reach a natural stopping point or complete a coherent chunk of work.

Now that you have made a new commit, push your work to your remote repository using the git push command.

Done!

Well done! You may notice that you haven't got a green check mark on your repository yet. Time to dive into some CSS.