The Cat example of Chelsea is rendering different in my browser

Get Help HTML
,
#1

Hello everybody,

I just finished the HTML course and moved on to Chelsea’s video about HTML Structure. HTML Structure

I wanted to recreate the HTML file myself using the Atom Editor on Ubuntu.
As I view the file in my browser (I tried chrome and mozilla firefox) it renders different than it should.
See for yourself! Screenshot from 2020-08-10 13-11-18|377x500

I really don’t understand why the h1 Headline is the smallest text and every element gets bigger and bigger. Even the list elements are bigger than the actual h2 headline for that unordered list.

What am i doing wrong here?

This is “my” code:

<!DOCTYPE html>
<html>

<body>
  <h1>Important Schedules<h1>

      <section>
        <h2>Jinx<h2>
            <img src="/home/smax/Pictures/jinx.jpeg" alt="Orange cat resting" width="500px">
            <p>Jinx is interested in food.</p>
            <section>
              <h3>His Schedule<h3>
                  <ul>
                    <li>sleep</li>
                    <li>attack Magic</li>
                    <li>MURDER</li>
                    <li>nap</li>
                    <li>snack</li>
                    <li>dose</li>
                  </ul>
            </section>
      </section>

      <section>
        <h2>Magic</h2>
        <img src="/home/smax/Pictures/magic.png" alt="grumpy cat resting" width="500px">
        <p>Magic is interested in Metaphysics and Philosophy.</p>
        <section>
          <h3>Her Schedule</h3>
          <ol>
            <li>wake Caretake</li>
            <li>play</li>
            <li>MURDER</li>
            <li>sleep</li>
            <li>meow until Caretaker gives three pets</li>
            <li>nap</li>
          </ol>
        </section>
      </section>

</body>

</html>

Thank you very much in advance

#2

I am replying to my own post since i figured out what I did wrong.

In case anybody stumbles upon the same thing, here’s what I did wrong:

I simply forgot the “/” in the first h1, h2 and h3 element! That was enough to mess up the result completely.

As you can see it took me 1h to figure out this simple mistake. Not only did i learn to be very precise in typing but it encouraged me even more to continue my path since the feeling of resolving a problem is just great!

1 Like
#3

That’s a good attitude to take! Programming often entails dealing with sets of problems where the answer isn’t clear, and finding a path through that forest.

1 Like