| Tasks: | 24 steps to complete |
|---|---|
| 1 | In your file manager, make a new folder inside of your development directory called Paris. Inside of that folder, create a new HTML file called index.html. Open index.html in your text editor. |
| 2 | In index.html, add the basic code for a website to be structured properly (also called boilerplate code). |
| 3 | Title your website: My Travel Blog |
| 4 | Directly below the opening [body] tag of your index.html file, add an [h1] that says My Travels. Below that, add an [h2] that says Paris. Below that, add an [h3] that says September 2016 . |
| 5 | Below the [h3] element that says September 2016, add opening and closing [nav] tags. Do not add any content between them right now. |
| 6 | Below the [nav] element you just created, create 3 new sections using the
[div] tag. Give them the following ids, respectively: 1. highlights 2. story 3. contact Remember, [div]s structure your content, and the [id]s can be used to link within a page. |
| 7 | Nest an [h3] inside the highlights [div]. The heading should say: My Favorite Spots in Paris |
| 8 | Nest an [h2] inside the story [div]. The heading should say: A Weekend on the Seine. |
| 9 | Below that, add three [h4]s that say Day 1, Day 2, and Day 3. Give each opening tag an [id] that we will later use for same-page navigation. The first [h4] should have an [id] with a value of day1 and the other two should have [id]s that follow the same pattern. |
| 10 | Nest an [h4] inside of the contact [div]. The heading should say: "If you have any questions about my blog, here is my contact information:" |
| 11 | Now that you have organized your webpage, preview it in the browser to see how much you’ve accomplished! Every few steps, refresh the page to make sure that your work looks the way you expect it to and to see the changes you’re making! |
| 12 | Now you are going to construct the navigation bar for your page. Inside of the [nav]
tag under the heading that says September 2016, nest an unordered list with these 3 list items: - Highlights - Full Story - Contact Make each list item a same-page link to its respective section, using the "" tag. |
| 13 | |
| 14 | |
| 15 | |
| 16 | |
| 17 | |
| 18 | |
| 19 | |
| 20 | |
| 21 | |
| 22 | |
| 23 | |
| 24 |