"Structuring a page of content" assessment

Finira · December 14, 2019, 3:45pm

–https://codepen.io/finira66/pen/NWPRaZq

chrisdavidmills · December 16, 2019, 10:10am

Thanks a lot @Finira! This is looking really good, and I can’t see anything obviously wrong with it. Well done!

abhinavJ462 · February 16, 2020, 1:26pm

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="utf-8">
    <title>Bird Watching</title>
    <meta name="Learner" content="Abhinav Juyal">
    <meta name="description" content="This one of the assignments provided by MDN Web Docs : Learn Web Development">
    <link rel="stylesheet" href="styles/style.css">
    <link href="https://fonts.googleapis.com/css?family=Cinzel+Decorative|Roboto+Condensed&display=swap" rel="stylesheet">
</head>
<body>
    <header> 
        <h1>Bird Watching</h1>
        <img src="images/dove.png">
        <nav>
            <ul>
                <li><a href="#">HOME</a></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 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 ciomputer and get out into the great outdoors!</p>
        </section>
        <aside>
            <h2>FAVOURITE PHOTOS</h2>
                <a href="images/favorite-1_th.jpg"><img src="images/favorite-1.jpg"></a>
                <a href="images/favorite-1_th.jpg"><img src="images/favorite-2.jpg"></a>
                <a href="images/favorite-1_th.jpg"><img src="images/favorite-3.jpg"></a>
                <a href="images/favorite-1_th.jpg"><img src="images/favorite-4.jpg"></a>
        </aside>
</main>
<footer>
    <p>This fake website example is CC) - any part of this code may be reused in any way you wish. Original example written 
        Chris Mills, 2016.
    </p>
    <p><a href="#">Dove icon</a> by Lorc.</p>
</footer>
</body>
</html>

Can someone check this code?

chrisdavidmills · February 17, 2020, 11:58am

Hello again @abhinavJ462

I’ll check this one as it is, as I appreciate it is a pain to put this all in an online editor, including the images, etc.

The structure of your code looks pretty much perfect; well done! I don’t really have any specific things to point out.

PieroFrias · June 29, 2020, 1:37pm

Hola, acabo de terminar el segundo ejercicio de introduccion a HTML: “Estructurando una pagina de contenido”. Tuve un pequeño problema en organizar el código; especificamente con la etiqueta section no logré colocarlo en ningún lugar por motivos de que el diseño quedaba algo raro . Por esa razón cualquier sugerencia vendria muy bien. !Gracias¡

observacion-de-aves.zip (282,9 KB)

chrisdavidmills · June 29, 2020, 11:02am

English:

I have looked over your code here, and the HTML structure you have used is fine — well done!

Spanish (Google translate):

He revisado su código aquí, y la estructura HTML que ha utilizado está bien, ¡bien hecho!

PieroFrias · June 30, 2020, 4:57pm

¡Muchas gracias! Tu trabajo me ayuda bastante, gracias por tu tiempo al responder los mensajes.

roksolana_koval · July 23, 2020, 4:54pm

Hi, I have completed the"Structuring a page of content". Can you check my code, 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|Cinzel+Decorative:700" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/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="pictures/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="favourite-1_th.jpg"><img src="pictures/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="pictures/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="pictures/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="pictures/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 24, 2020, 9:51am

Hi there @roksolana_koval! I have looked over your code, and your semantic structure is perfect — well done!

roksolana_koval · July 27, 2020, 4:02pm

I am happy, thank you so much

GeoLinkin · August 7, 2020, 3:44am

Hello Again from Colombia, here is my practice, thank you so mucho for the lasts suggestions.

Evgen_Shkaruba · March 28, 2021, 3:31pm

Hi, everybody!
Can you check my code, please? about “Structuring a page of content”.

or (How convenient?)

MeBirdWatching

BIRDWATCHING

HOME
GET STARTED
PHOTOS
GEAR
FORUM

<main>
    <article>
        <h1>WELCOME</h1>

        <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="/home/yevhen/Документы/assets/favorite-1.jpg">
            <img src="/home/yevhen/Документы/assets/favorite-1_th.jpg" title="Small black-green bird sitting on a red flover, links to larger version of the image">
        </a>
        <a href="/home/yevhen/Документы/assets/favorite-2.jpg"><img src="/home/yevhen/Документы/assets/favorite-2_th.jpg" title="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="/home/yevhen/Документы/assets/favorite-3.jpg"><img src="/home/yevhen/Документы/assets/favorite-3_th.jpg" title="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="/home/yevhen/Документы/assets/favorite-4.jpg"><img src="/home/yevhen/Документы/assets/favorite-4_th.jpg" title="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>

marina.marisha · April 30, 2021, 10:07am

Hello. I made the task from the “Structuring a page of content” section. Check, please.

<!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="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <![endif]-->
  </head>
  <body>
  
	<header>
      <h1>Birdwatching</h1>
      <img src="images/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="images/favorite-1.jpg"><img src="images/favorite-1_th.jpg" alt="Small black bird, black claws, long black slender beak, links to larger version of the image"></a>
      <a href="images/favorite-2.jpg"><img src="images/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="images/favorite-3.jpg"><img src="images/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="images/favorite-4.jpg"><img src="images/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>

KatrinTish · July 15, 2021, 8:18pm

Hello, please check my code.

 


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

<!--[if lt IE 9]>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.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>

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

justsomeone · July 15, 2021, 9:29pm

Hello @KatrinTish

you doing great well done and have a nice day

KatrinTish · July 20, 2021, 7:27pm

Thank you! Have a nice day

justsomeone · July 20, 2021, 8:03pm

you welcome and thanks a lot

demnnys · September 27, 2021, 12:26pm

Hello everyone, someone can check my solution to the problem:

The solution:

https://jsfiddle.net/demnnys/gL3a5ueh/

justsomeone · September 19, 2021, 3:42pm

well done @demnnys you doing great

herculesovich888 · December 9, 2021, 12:23pm

Hello everyone, pls check my home work.

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

    <!--[if lt IE 9]>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <![endif]-->
    <link  rel="stylesheet" href="style.css">
  </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>