"Structuring a page of content" assessment

MDN Learn
#1
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">

Welcome

  <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>

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><a href="http://game-icons.net/lorc/originals/dove.html">Dove icon</a> by Lorc.</p>
I completed structuring page of contents and would appreciate suggestions and tips for being better
Learning web development: Marking guides and questions
Learning web development: Marking guides and questions
Learning web development: Marking guides and questions
Learning web development: Marking guides and questions
#2

Well done on finishing the 2nd exercise in the HTML Introduction module. I’m afraid it doesn’t format very well when pasted into the Discourse thread; in future, you would be advised to provide a link to an online version.

In the meantime, you can check your work again our marking guide:

And our finished example:

https://mdn.github.io/learning-area/html/introduction-to-html/structuring-a-page-of-content-finished/

#3 
Hello, I've just completed the "Structuring a page of content". Any feedback please? Thank you!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Birdwatching</title>
    <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:300%7CCinzel+Decorative:700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" 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">
    </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>
      <section>
        <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>
      </section>

      <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>
#4

Hi there Ciprian! This doesn’t look like the code from the “Marking up a letter” assessment; this looks like “Structuring a page of content”. Did you mean that one?

I’m just checking so I can send you the correct resources. Thanks!

Learning web development: Marking guides and questions
#5

oh, sorry. you are right about it!

#6

Sorry, my bad. I did mean “Structuring a page of content”. Thank you!

#7

Just finished the second assignment, please take a look. Any suggestions are appreciated.

<!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">
      </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>
        <section>
          <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>
        </section>
        
        <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>
#8

Hi Sajal,

Well done on some great work. The assessments look pretty good from a cursory glance. I’d like to invite you to check your work against the marking guide and finished source code:

First, the marking up a letter assessment:

And now the Structuring a page of content assessment:

#9

Hi…Any feedback will be great please

Birdwatching

Birdwatching

a simple dove logo

Welcome

  <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>
#10

Hi there!

This doesn’t look too bad from a first look. I’d like to advise you to check your work against the marking guide, and our finished version of the code:

https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/structuring-a-page-of-content-finished
https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/structuring-a-page-of-content-finished/marking-guide.md
https://mdn.github.io/learning-area/html/introduction-to-html/structuring-a-page-of-content-finished/1

Best,

Chris

#11

Hi, I just finished the "Structuring a page of content" project. I am excited as I continue my path towards web development. I struggle to fully understand the <article> and <section> element though. An explanation would be great. Here is my code. For some reason, it can not display the full code, the html and head tag.

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><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>
 
  <section>  
  <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>
  </section>
  </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>
#12

Hello again Marios,

This looks mostly fine, although you don’t need the <section> element. You can see our finished version, and the marking guide, here:

The difference between <article> and <section> can lead to confusion, and is fairly subtle in some ways:

  • <article> is for wrapping a single unit of content that appears on a website for example a book chapter, or a newspaper article, or an article abstract, or a contact summary in an address book, or a contact’s complete details. It is helpful to think of it as being more like an article of clothing in a wardrobe that a newspaper article. You can have one article on a single page, or many, depending on what you are showing, for example you could be showing several article summaries, or a single full article.
  • <section> is for wrapping a single unit of functionality on a website, rather than a single unit of content. Now, this single unit of functionality could also be a blog post or article, hence on this exercise we say either is ok. But article is probably slightly better. section is really more for containing things like a series of article summaries, or the map widget to help your customers get directions to your shop, or a list of your latest tweets.

Note also that you can nest articles inside sections, and vice versa. So if you wrapped a series of article summaries inside a section, you could then put each individual summary inside an article.

There are a few more tings you can do with article and section, but this hopefully gives you a basic idea. Did that help?

There are not really any hard rules about this - what you do depends on what is best for your content, and is often a stylistic choice.

1 Like
#13

Hi Chris,

Thank you for your quick response. Yes, your explanation gave me the basic idea of the <article> and <section> elements. I had one other question though, in my previous post when I wrote my code I enclosed it in a <code> element but some elements like the <head> and <html> are missing. Do you have any idea what is going on here and how can I fix it?

#14

Yes — this is because the posts on discourse are written in markdown format, but various HTML elements are also interpreted and take effect if they are included in the post. To get rid of this problem, we could try a few things:

  1. Wrap code blocks between lines containing three backticks in a row — ``` , then your code block, then three more. All of these should be on new lines. For example:
<html>

  1. Escape all your angle brackets, so use &lt; instead of <, and &gt; instead of >.

  2. Put your code online somewhere, for example in a GitHub repo, or a pastebin (https://pastebin.com/)

#15

I learned before that the <main> was to be used right after opening and closing the <body>.

#16

You don’t have to use it in any particular place, but it can be used to contain your page’s main body content, wherever that sits in the markup.

#17

Hey Guys! Please check this code !!

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

Birdwatching

a simple dove logo

Welcome

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.

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

<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>

<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>
#18

Hello again! I’m finding this code hard to test because it has mostly been interpreted by discourse and shown in the body of the message. Can you try resending you code, but making sure it is all shown as code?

In addition, you can also check your work against our version:

#19

Body of my html document :slight_smile:

<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>

Welcome

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.

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

<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>

<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>
#20

Sir, I tried to put it in a proper way, but it got split after just I posted it again!
So, help me if I am wrong anywhere!! :neutral_face::neutral_face: