"Structuring a page of content" assessment


(Filip sky) #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>

(Chris Mills) #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


(Marios Daskalas) #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>

(Chris Mills) #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.


(Marios Daskalas) #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?


(Chris Mills) #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/)


(Renanmartineli) #15

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


(Chris Mills) #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.


(Chirag Gupta) #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>

(Chris Mills) #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:


(Chirag Gupta) #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>

(Chirag Gupta) #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:


(Chris Mills) #21

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) #22

Hi All!!
Just completed 2nd 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>

(Chris Mills) #23

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:


(Chirag Gupta) #24

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>


(Chris Mills) #25

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:


(Clemente del Río) #26

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:

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>


(Chris Mills) #27

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.


(Clemente del Río) #29

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