Assessment 2: Structuring a page of content

Hello! I have been trying to structure my page but the images don’t show.

Here is 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" href="styles/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="images/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>

Hi @Ashel and welcome to the community :wave:

Congratulations! You correctly used all tags. As an alternative you could also use <article> instead of <section>. Both tags are fine.

When you are working locally you need to make sure that the paths to the images are correct. For example with src="images/dove.png" the image needs to be in a sub directory called “images” next to index.html and the file name needs to be “dove.jpg”.

I hope that helps. :slightly_smiling_face:

See you,
MIchael

Hello MDN! I’ve just finished the ‘Structuring a page of content’ assignment and will be grateful to see any feedback. Here is my CodePen link:
‘Structuring a page of content’ pen

P.S. I’ve decided to add two additional <address> elements to mark the webpage author and the logo icon author in the footer of the page. Is it legit and considerable to be done? (because it was absent initially in task template)

Hi @Danil_Dark

Well done! All tags are correctly places.

Have a nice day,
Michael

1 Like