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

You will be pushing your final assignment up to GitHub, so creating a repository for your work should be one of your first steps. Before moving on to Part 2, you will be asked to stage and commit Part 1 into your repo.

Create either a Generic or Blank Project in VS. Name it html-me-something. Next, add an empty html file to your project and name it index.html.

Getting to Work

Using your index.html, 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. And 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 to troubleshoot things that don’t look right.

  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 main
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.

Done!

Well done! Time to dive into some CSS.