"Structuring a page of content" assessment

MDN Learn
#64

Hello there, I have done the given exercise please have a look. Thanks a lot !

Birdwatching 
<!--[if lt IE 9]>
  <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

  <header>
  <h1>Birdwatching</h1>
  <img src="dove.png" alt="a simple dove logo">
  

  <nav>
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="get-started.html">Get started</a></li>
    <li><a href="photos.html">Photos</a></li>
    <li><a href="gear.html">Gear</a></li>
    <li><a href="forum.html">Forum</a></li>
  </ul>
  </nav>
  </header>
  
  <main>
  <article>
  <h2>Welcome</h2>
  
  <p>Welcome to our fake birdwatching site. If this were a real site, it would be the ideal place to come to learn more about birdwatching, whether you are a beginner looking to learn how to get into birding, or an expert wanting to share ideas, tips, and photos with other like-minded people.</p>
  
  <p>So don't waste time! Get what you need, then turn off that computer and get out into the great outdoors!</p>
 
  </article>

  <aside>
  <h2>Favourite photos</h2>

  <a href="favorite-1.jpg"><img src="favorite-1_th.jpg" alt="Small black bird, black claws, long black slender beak, links to larger version of the image"></a>
  <a href="favorite-2.jpg"><img src="favorite-2_th.jpg" alt="Top half of a pretty bird with bright blue plumage on neck, light colored beak, blue headdress, links to larger version of the image"></a>
  <a href="favorite-3.jpg"><img src="favorite-3_th.jpg" alt="Top half of a large bird with white plumage, very long curved narrow light colored break, links to larger version of the image"></a>
  <a href="favorite-4.jpg"><img src="favorite-4_th.jpg" alt="Large bird, mostly white plumage with black plumage on back and rear, long straight white beak, links to larger version of the image"></a>
  </aside>
  </main>

  <footer>
  <p>This fake website example is CC0 — any part of this code may be reused in any way you wish. Original example written by Chris Mills, 2016.</p>

  <p><a href="http://game-icons.net/lorc/originals/dove.html">Dove icon</a> by Lorc.</p>
  </footer>
#65

Hello @folllowrmp, and thank you for submitting your code.

I have tested it, and it looks pretty much perfect. This is good work, well done!

1 Like
#66

I appreciate you so much for the answer !

#67

Thanks for the follow up answers! I didn’t know performance-wise the font links didn’t make a difference whether you include it in the stylesheet or the html file. That was interesting. If you don’t mind me asking for answer no.1, what are the subtle difference in the semantics? :smiley: :sunny: :sunny:

#68

@UnorthodoxThing I knew you’d ask me that :wink:

We make an attempt to explain it at https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure#HTML_layout_elements_in_more_detail

Basically:

  • articles are for similar, repeated blocks of content, which have the same kind of functionality.
  • sections are for distinct areas of different functionality.
1 Like
#69

this is my first page without any ‘div’ block, I think it’s fantastic!
http://106.52.23.212/birds-watching/index.html

#70

@1825401612 This looks great; nice work!

#71

Hey
Please find link to my code https://github.com/harsimranbhasin/assets.github.io/blob/master/index.html

The pictures seemed to line up when I used section tag in the body. That got fixed up using aside tag.

#72

Hi there @harsimran,

Your code looks fine — pretty much identical to our original. Well done!

#73

In the Birdwatching Assignment, I don’t understand why we need to make the images act like an hyperlink.

#74

Hi @AbhinavJ,

The <a> elements are not needed to display the image; I only included them so that you can click on one of the thumbnails to display the full-sized image.

And the example doesn’t display properly when you remove the <a> elements because I coded the example’s CSS to lay out the <a>s in the columns you see, not the <img>s.

But you could alter the CSS to make it work with just image the <img>s. In short, the <a>s are not needed for the technology to work; they are a stylistic choice for my example.

#75

Are you refering to this part of style.css?

    aside a {
  display: block;
  float: left;
  width: 50%;
}
#76

@AbhinavJ Yes. If you change the selector to aside img, then it should work for a version of the HTML that has the wrapping <a>s removed from around the <img>s.

1 Like
#77

I’ve just finished the “structuring a page of content” assessment, and I think your solution is pretty great. But i just dont understand this yet: can the “header” tag contain the “nav” tag? And if it can, then why do you separate these into 2 different parts? And is it okay to use the “nav” tag inside the “header” tag? Thank you!

#78

Hi there @nygma1559, and welcome to our community.

In our original version of the code (https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/structuring-a-page-of-content-finished/index.html), we have included the <nav> element inside the <header> element — this is totally fine. It is also fine to include the two separately, so your choice depending on what works best for your page.

In fact, I think the only combination that doesn’t make sense is including the <header> element inside the <nav> element — <nav> is supposed to contain the page’s primary navigation method; it doesn’t really make sense for it to contain the entire site header, imo at least.

#79

Hello, I’ve just finished the “Structuring a page of content” assessment and it’s ok (I think). But when I validated it, the following message appeared:
Error : Bad value https://fonts.googleapis.com/css?family=Roboto+Condensed:300|Cinzel+Decorative:700 for attribute href on element link : Illegal character in query: | is not allowed.
From line 6, column 5; to line 6, column 117.

Anyone could tell me why, please? I just used the html file given.

My code:

Birdwatching 
<!--[if lt IE 9]>
  <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- fernando stankuns testing -->
<!-- validate https://validator.w3.org/ -->

  <header><h1>Birdwatching</h1>
  <img src="dove.png" alt="a simple dove logo"></header>


  <nav><ul>
    <li><span>Home</span></li>
    <li><a href="#">Get started</a></li>
    <li><a href="#">Photos</a></li>
    <li><a href="#">Gear</a></li>
    <li><a href="#">Forum</a></li>
  </ul></nav>


  <main>
    <article><h2>Welcome</h2>

  <p>Welcome to our fake birdwatching site. If this were a real site, it would be the ideal place to come to learn more about birdwatching, whether you are a beginner looking to learn how to get into birding, or an expert wanting to share ideas, tips, and photos with other like-minded people.</p>

  <p>So don't waste time! Get what you need, then turn off that computer and get out into the great outdoors!</p></article>

  <aside><h2>Favourite photos</h2>

  <a href="favorite-1.jpg"><img src="favorite-1_th.jpg" alt="Small black bird, black claws, long black slender beak, links to larger version of the image"></a>
  <a href="favorite-2.jpg"><img src="favorite-2_th.jpg" alt="Top half of a pretty bird with bright blue plumage on neck, light colored beak, blue headdress, links to larger version of the image"></a>
  <a href="favorite-3.jpg"><img src="favorite-3_th.jpg" alt="Top half of a large bird with white plumage, very long curved narrow light colored break, links to larger version of the image"></a>
  <a href="favorite-4.jpg"><img src="favorite-4_th.jpg" alt="Large bird, mostly white plumage with black plumage on back and rear, long straight white beak, links to larger version of the image"></a></aside></main>


  <footer><p>This fake website example is CC0 — any part of this code may be reused in any way you wish. Original example written by Chris Mills, 2016.</p>

  <p><a href="http://game-icons.net/lorc/originals/dove.html">Dove icon</a> by Lorc.</p></footer>

Thank you very much!

Fernando

#80

Hi there @fspfigueiredo!

Yeah, so this validation error is totally down to

<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300|Cinzel+Decorative:700" rel="stylesheet">

Which is code taken from the Google Fonts website. Strictly speaking, you are not allowed to use pipe (|) characters in URL parameters, but Google decided to do it like this anyway. It isn’t really doing any harm; it just won’t validate.

Basically, the HTML validator is a useful tool for debugging problems with your code, but at the same time, everything doesn’t have to validate at all times.

#81

Thank you very much for your clear and fast answer, Chris.

#82

Hi! Can you check my code?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Birdwatching</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300|Cinzel+Decorative:700" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>

  <body>

      <header>
        <h1>Birdwatching</h1>
      
      <img src="dove.png" alt="a simple dove logo">


      <nav>
        <ul>
          <li><span>Home</span></li>
          <li><a href="#">Get started</a></li>
          <li><a href="#">Photos</a></li>
          <li><a href="#">Gear</a></li>
          <li><a href="#">Forum</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <article>
        <h2>Welcome</h2>

        <p>Welcome to our fake birdwatching site. If this were a real site, it would be the ideal place to come to learn more about birdwatching, whether you are a beginner looking to learn how to get into birding, or an expert wanting to share ideas, tips, and photos with other like-minded people.</p>

        <p>So don't waste time! Get what you need, then turn off that computer and get out into the great outdoors!</p>
      </article>
      <aside>
        <h2>Favourite photos</h2>

        <a href="favorite-1.jpg"><img src="favorite-1_th.jpg" alt="Small black bird, black claws, long black slender beak, links to larger version of the image"></a>
        <a href="favorite-2.jpg"><img src="favorite-2_th.jpg" alt="Top half of a pretty bird with bright blue plumage on neck, light colored beak, blue headdress, links to larger version of the image"></a>
        <a href="favorite-3.jpg"><img src="favorite-3_th.jpg" alt="Top half of a large bird with white plumage, very long curved narrow light colored break, links to larger version of the image"></a>
        <a href="favorite-4.jpg"><img src="favorite-4_th.jpg" alt="Large bird, mostly white plumage with black plumage on back and rear, long straight white beak, links to larger version of the image"></a>
      </aside>
    </main>

    <footer>
      <p>This fake website example is CC0 — any part of this code may be reused in any way you wish. Original example written by Chris Mills, 2016.</p>

      <p><a href="http://game-icons.net/lorc/originals/dove.html">Dove icon</a> by Lorc.</p>
    </footer>
  </body>
</html>
#83

Hi there @nikolaesku, and thanks for submitting your code!

I am really impressed by this — you have done everything perfectly. Well done!