"Structuring a page of content" assessment

chrisdavidmills · April 25, 2018, 11:19am

Have you tried putting it inside code delimiters? You can put three backticks (```) either side of a block to turn it all into a code block.

So for example

```
put your code here

```

amit_sharma · April 26, 2018, 10:25pm

Hi All!!
Just completed 2^nd assessment. Pl check!!

<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="author" content="Amit Sharma">
    <title>Birdwatching</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300|Cinzel+Decorative:700" rel="stylesheet">
  </head>
  <body>
	<header>
	<h1>BIRDWATCHING</h1>
	<img src ="dove.png" alt="a simple dove logo">
      <nav>
        <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>
      </nav>
	</header>
<main>
      <div><h2>Welcome</h2>
<article>
      <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>
</div>

<div>
<aside>
  <h2>Favourite photos</h2>
<section>
      <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>
</div>
</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>

chrisdavidmills · April 27, 2018, 7:39am

Hi there Amit!

I have had a brief look, and this doesn’t look like a bad effort at all. A few things I’ve noticed immediately:

The <li> elements need to be enclosed in a <ul> element
I think this is causing the horizontal nav menu to be too tall on the page
The images are too big, and seem to be breaking out of their container
The “Welcome” and “Favourite photos” heading elements need to be inside the <article>/<section> elements you’ve got them just above — they are the headings of those sections, so should be contained within.
As a result, the main content column is not styled properly — the lighter green is not the same height as the other column.

You can check your work in detail against our version to see exactly where you went wrong:

chirag7145 · April 28, 2018, 10:57am

Check it out once again !

<!DOCTYPE html>
<html>
  <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" type="text/css" href="style.css">

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

  <body>
    <header>
      <!-- <span> -->
        <h1>Birdwatching</h1>
      <!-- </span> -->
      <!-- <span> -->
        <img src="dove.png" alt="a simple dove logo">      
      <!-- </span> -->
      <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>
      <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>
      </section>
      <section>        
        <p>So don't waste time! Get what you need, then turn off that computer and get out into the great outdoors!</p>
      </section>
    </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>

chrisdavidmills · April 30, 2018, 9:19am

Hello again @chirag7145! That is much better — I can see all the sample code now. Looking at this it looks really good, well done.

The only difference I can see from a quick look is that you’ve added some extra section elements inside the article element inside the main element. But this is not a problem at all.

Feel free to reference our version if you want to explore differences in more detail:

Derios · June 12, 2018, 3:48pm

Hello!
Just finished the “Structuring a page of content” assessment, please comment :).
I noticed that the W3C Markup Validation Serviced returned an error on the google font api’s link (see attached image).
It said the “Pipe” character was illegal.
Got this on the subject:

W3C Does not anymore recognize the “Pipe” character as legal.
To get the code to pass validation you need to encode the | (pipe characters) in the href attribute (%7C): (https://stackoverflow.com/questions/22466913/google-fonts-url-break-html5-validation-on-w3-org?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa)

here is 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%7CCinzel+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>

chrisdavidmills · June 13, 2018, 11:35pm

Hi there!

Your code looks pretty cool — well done.

In terms of the validation issue, I appreciate what you are saying. I’ve changed the wording a bit and included your link. But I don’t want to require 100% validation — I think developers need to get used to the fact that 100% validation is an ideal, which won’t always be achievable.

Derios · June 15, 2018, 12:35am

Thanks for the tip on validation and for taking the time to reply!

hiren.bechra · July 10, 2018, 3:54pm

Here is my code, please review it…

<!DOCTYPE html>
<html>
  <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" 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>
    <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>

Please assess my assignment and is it ok or not?

DanielXie · July 18, 2018, 7:59am

Hi guys!
I just completed the “Structuring a page of content” assessment.
Any feedback will be much appreciated.Thank you!

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>Birdwatching</title>
        <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300%7CCinzel+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>
          <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>

chrisdavidmills · July 17, 2018, 11:39am

Hello @hiren.bechra and @DanielXie.

Well done for completing the assessment! Your work looks good, and seems rto solve the problem well.

To explore the solution in more detail, I’d like to encourage you to look at our finished version:

lochyin · July 30, 2018, 12:53pm

Hello, I just finished this assessment and I’d like to ask for some feedback. Thank you!

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

chrisdavidmills · July 31, 2018, 5:07pm

Hi @lochyin, congratulations on some great work.

I’ve tested it, and it looks very similar to our version. The only difference I can really see is that you are using a <section> instead of an <article> for the main content column, but to be honest this really makes no different, at least not in this case.

Feel free to dive into our solution in more detail if you want more detailed knowledge:

To explore the solution in more detail, I’d like to encourage you to look at our finished version:

lochyin · August 1, 2018, 8:17am

Hello @chrisdavidmills, thank you for the feedback.
Could you explain what the difference is between <section>, <div> and <article>?

a7413329 · August 7, 2018, 11:18pm

Hi,

Here is a solution to the MDN Learn Web - Structuring a page of content assignment.

If someone could please review my submission, that would be very helpful.

Thanks.

chrisdavidmills · August 8, 2018, 8:24am

This is a tricky one — <section> and <article> are poorly defined in terms of what their differences are, and it confuses a lot of people. They are both semantic block level elements that apply meaning to their contents, but that meaning is quite subtle and distinct:

The way I understand it:

A <section> should be used to wrap a separate unit of functionality on a page, such as a box containing your recent tweets, or a map widget, or a photo stream, or a set of news headlines.
An <article> should be used to wrap a content item that could be considered to appear in a series of items, so for example each tweet in a series of tweets (which might contain the tweet text, author name, time and date, etc.), or each news headline box (which might contain a title, abstract, thumbnail, author name, etc.) All the articles do not have to appear on the same page necessarily. Note that the most obvious way of think about this is “news articles”, but this is not the best way —they are more like “multiple articles of clothing on a shelf”.

However, it gets more confusing — you can nest multiple <article>s inside a <section>, or vice versa.

So if your page includes a <section> containing news headlines, each individual headline could be inside an <article>, as we said above.
But if your page contains a single complete news article, that could be inside an <article>, and different units of functionality inside the article could be inside <sections>, for example the list of comments at the bottom of the article…

<div> is quite easy conceptually — it’s a block-level container with no semantic meaning, so it should be used when you want to group together more than one element and apply styling to the whole lot at the same time, without introducing any extra semantic meaning to that group. So for example if you have a group of <img> elements, and you want position them all somewhere else on a page as a group, you could wrap them in a <div> and then apply positioning CSS to the <div>.

However, the group you want to wrap and style is often a separate unit of functionality, or a content item in a series, so often <section> or <article> are more appropriate than <div>.

Really, it doesn’t matter all that much — you just need to try your best to make your content as semantically accurate as possible. In some cases this is easy — you should use a <button> element to mark up a button, and not a <div>! But no-one reasonable is going to shout at you if you mix up <section> and <article> on occasion.

chrisdavidmills · August 8, 2018, 8:29am

@a7413329 hello there!

Congratulations on the great work. I’ve had a look, and the only difference I can really see between your version and ours is that you have an extra <section> element inside your <aside>, which isn’t really needed.

However this is a pretty minor point. Very good work.

gggshaw007 · September 2, 2018, 2:54pm

Hi Sir,

I just learned a lot about how to structure a page and make lots of notes, but i didn’t understand too much about why we set the nav ul flex to 2, not other value, i tried 3, 4, 5 the result is same? i searched and learned that flex has three attributes, flex-grow | flex-shrink | flex-basis, the last two attributes are optional.

BTW, here is my version and source code of this assignment, if you could have a review on it, i will be grateful

chrisdavidmills · September 4, 2018, 6:01am

@gggshaw007, you are correct to question this. Basically when a parent element is set to display: flex, and its children are given flex: x where x is the same value for all of them, it causes all of the children to share the available space along the flex main axis (the horizontal axis in this case) equally.

The value of flex is a unitless proportion value — it could be 2, 3, 5, or 100000, and the effect would be the same, provided all flex children have the same value of it. If different flex children have different flex values, then you start to see a difference. For example if you have two children, one with flex: 2 and one with flex: 3, the first child will take up 2/5ths of the available space, and the second will take up 3/5ths of the available space.

I’m using nested flexbox/flex instances here, first of all to make the <ul> take up 100% of the space inside the <nav>, and then to make each <li> take up an equal amount of space inside the <ul>.

And yes, you are also right that flex-shrink and flex-basis are optional. They make things way more complex, and you should read about them sometime later

chrisdavidmills · September 4, 2018, 6:02am

Your version of the assessment looks really good, BTW, great work!