HTML Exercise

Let’s create our own basic web page and have some fun.

What you’ll need

  1. A web browser of your choice
  2. Visual Studio Code (installed during installfest)
  3. The repository created in the Intro to Git & GitHub workshop

1. Our First Web Page (We’ll do this together)

The files

You should have a repo you created in yesterday’s Github workshop. If you do please open the index.html inside Visual Studio Code file.

If you cannot access that file do the following:

  1. On your desktop create a folder and name it building-blocks.
  2. Open Visual Studio Code
  3. Inside Visual Studio Code open the building-blocks directory (File » Open).
  4. Inside building-blocks create a file named index.html.

Or use this sample repo here.

First step

  1. Inside index.html add <p>some text</p>.
  2. Open index.html in your web browser.

You should see this:

index.html page

You just made a web page!

2. Let’s Make a Complete Page

Let’s start with a complete web document. To your index.html file:

  1. Add the <!DOCTYPE html>
  2. Add <html>, <head>, and <body> tags

3. Your turn

Build this wireframe

Now let’s try some html. Spend the next 15-20 minutes building the following wireframe in your index.html page.

Feel free to reference the semantic elements page or the basic elements page.

If you need help with images use the embedding things page. If you need an image you can get one here. To get the path to the image right click on it and choose “Copy Image Address” or “Copy Image Link”.

We’ll do the first few elements together. If you get stuck here’s a completed version of this html exercise.

You could use generic content or make it fun by creating an actual web site. Like a food blog, all about jellyfish , or anything of your own choosing. It’s up to you.

Wireframe

Let’s take a 15 min break