4.1: Facts HTML

Add a new section

In index.html we need to add another section for this "Facts" portion of the webpage - again, we need to give the section an ID attribute so the link in our header will work.

<section id="facts">
  <h3>Facts</h3>

</section>

Facts HTML

We want this section to have a light gray background color. We could do this in the CSS file - sure - but for the sake of learning multiple solutions... let's use in-line styling.

<section id="facts" style="background-color: lightgray;">
  <h3>Facts</h3>

</section>

Add centered content

We want an image and a list to appear in this section - but we'll want this content centered in the middle of the page. To accomplish this we will wrap the image and list in a <div> with an ID attribute, and reference that ID in the CSS file.

<section id="facts" style="background-color: lightgray;">
  <h3>Facts</h3>
  <div id="centerThis">

    </div>
</section>

Inside of this <div> we want our image... (Right click on this image and hit "Save image as..." and then save it in your project folder or use your own photo)

<img src="./portrait-face-outline.jpg" alt="My Portrait">

...and our list...

<ul>
  <li>My favorite color is dark blue.</li>
  <li>Cats are my favorite animals.</li>
  <li>My least favorite subject in school was english.</li>
  <li>My favorite subject was math.</li>
  <li>I am excited to learn to code!</li>
  <li>My favorite Wikipedia page is the one about <a href="https://en.wikipedia.org/wiki/Glacier_National_Park_(U.S.)" target="_blank">Glacier National Park</a>.</li>
</ul>

Facts HTML Final

When you refresh the page, the photo is gigantic! We'll resize it in the next section...

Facts HTML Final Result

Next Section

Time to fix the size of that image. Go to 4.2: Facts CSS.