"Structuring a page of content" assessment

MDN Learn
#84

thanks, nice to read this

#85

Hello,

Here is my version of the exercise. Thank you in advance.

Directory tree

.
โ”œโ”€โ”€ images
โ”‚   โ”œโ”€โ”€ dove.png
โ”‚   โ”œโ”€โ”€ favorite-1.jpg
โ”‚   โ”œโ”€โ”€ favorite-1_th.jpg
โ”‚   โ”œโ”€โ”€ favorite-2.jpg
โ”‚   โ”œโ”€โ”€ favorite-2_th.jpg
โ”‚   โ”œโ”€โ”€ favorite-3.jpg
โ”‚   โ”œโ”€โ”€ favorite-3_th.jpg
โ”‚   โ”œโ”€โ”€ favorite-4.jpg
โ”‚   โ””โ”€โ”€ favorite-4_th.jpg
โ”œโ”€โ”€ index.html
โ””โ”€โ”€ styles
    โ””โ”€โ”€ style.css

Code

<!DOCTYPE html>
<html lang="en-US">
  <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 href="styles/style.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.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>
#86

@Soheil Iโ€™ve checked this one out too, and it also looks perfect. You are on a roll, well done!

#87

Hey @chrisdavidmills,

If you could please check my work, I would appreciate it. Thanks.

Github: https://github.com/Pawper/Structuring-a-Page-of-Content-MDN/blob/master/index.html
Live version: https://phillip-structuring-a-page-of-content-mdn.hashbase.io/

#88

Hi there @Pawper, thanks for sending your code in!

Iโ€™ve had a look, and your code looks absolutely perfect; well done!

1 Like
#89

Hi All,

I have completed the Second exercise of the topic. I have also done modifications in the links of the HTML code. Kindly review the code and suggest if any changes required.

BirdWatching Site 
    <!--Indicates topmost introductory content of the website-->
    <header>
        <h1>BirdWatching</h1>
        <img src="C:\Users\DELL\Desktop\Assets\assets\dove.png">

    <!--Indicates the navigation bar present on the site-->
        <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>

    <!--Specifies the main content of the website-->
    <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.

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

    <!--Species the side content for the website-->
        <aside>
            <section>
                <h3>Favorite Photos</h3>
            </section>
            <a href="https://www.google.com/search?q=bird+images&rlz=1C1CHBF_enIN861IN861&source=lnms&tbm=isch&sa=X&ved=0ahUKEwj_zbvDx5nlAhUbfX0KHbtpBLEQ_AUIEigB#imgrc=33R6X3yIF23PzM:"><img src="data:image/jpeg;base64,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"></a>
            <a href="https://www.google.com/search?q=bird+images&rlz=1C1CHBF_enIN861IN861&source=lnms&tbm=isch&sa=X&ved=0ahUKEwj_zbvDx5nlAhUbfX0KHbtpBLEQ_AUIEigB#imgrc=33R6X3yIF23PzM:"><img src="https://thumbs-prod.si-cdn.com/yxYtidKUcbMprBCzkC3AH2cnUQ4=/420x240/https://public-media.si-cdn.com/filer/54/10/5410da58-2295-4e3a-a847-fecd41cdcdd9/scarlet_tanager.jpg"></a>
            <a href="https://www.google.com/search?q=bird+images&rlz=1C1CHBF_enIN861IN861&source=lnms&tbm=isch&sa=X&ved=0ahUKEwj_zbvDx5nlAhUbfX0KHbtpBLEQ_AUIEigB#imgrc=33R6X3yIF23PzM:"><img src="https://www.imperial.ac.uk/ImageCropToolT4/imageTool/uploaded-images/newseventsimage_1529346275459_mainnews2012_x1.jpg"></a>
            <a href="https://www.google.com/search?q=bird+images&rlz=1C1CHBF_enIN861IN861&source=lnms&tbm=isch&sa=X&ved=0ahUKEwj_zbvDx5nlAhUbfX0KHbtpBLEQ_AUIEigB#imgrc=33R6X3yIF23PzM:"><img src="https://images.unsplash.com/photo-1470114716159-e389f8712fda?ixlib=rb-1.2.1&w=1000&q=80"></a>
        </aside>
    </main>

    <!--Species the bottom most content of the website-->
    <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.
        <a href="https://game-icons.net/1x1/lorc/dove.html">Dove icon</a> by Lorc.</p>
    </footer>
</body>
#90

Hello again @hellreet46!

So this one is looking better.

The page looks mostly fine, just a couple of bits to mention.

First of all, you should never provide local windows explorer links in your web page code:

<img src="C:\Users\DELL\Desktop\Assets\assets\dove.png">

This wonโ€™t work when you then go and load your code up to a web server, as the server wonโ€™t understand it (in addition most web servers use forward slashes, not black slashes as Windows does). It is also a security risk, as it is showing would be attackers the structure of your hard drive. This should be changed to a relative link to where your file is kept in relation to the HTML page, for example

<img src="assets/dove.png">

And the photogallery bit is a little bit wonky. I think this is because youโ€™ve chosen pictures that are slightly different aspect ratios to mine, and I donโ€™t know how youโ€™ve ended up with the huge great big data URI in the first image (the data:image/jpeg;base64,/9j/4AAQ... bit).

Bear in mind that in real web sites youโ€™d never hotlink directly to other peopleโ€™s image like this; youโ€™ve use local copies. But this is basically OK for now. Iโ€™d use a link to an image file rather than the data URI though, as it is making things go a bit weird.

But apart from those, good work!

1 Like
#91

Thanks for the reply Chris. Will structure the code as per the points mentioned by you.

#92

Anyone could give me a feedback about my assessment: Structuring a page of content.

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

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

@chrisdavidmills

#94

@krasnovdanial thanks for sending this one over too!

This looks really good; well done! I canโ€™t see anything wrong with it.

#95

@chrisdavidmills
Thank you so much.

#96

homeworkๆž„ๅปบๅ‡บๆœ‰ๅ†…ๅฎน็š„็ฝ‘้กตPlease trouble me to check it, thank you!

#97

@bright-ding this was also perfect โ€” very good work!

By the way, I can access these live by using the gh-pages link, like so:

https://dingguangbo.github.io/learning-area/html/structuring-a-page/index.html

#98

thank you so much:clap:

#99

Hi! Check my code please:

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

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

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

@Finira As I said in my previous comment โ€” can you put this in an online code editor and share the link with me? Thanks!

#101

After finishing up my first assesment I started doing the second one which was about marking up a webpage with the appropriate structure and layout tags.

A review on the code would be greatly appreciated!

Hereโ€™s a link to it on CodePen.io

Thanks in advance

#102

Hi there @saa-d โ€” thanks for sending your code in! Iโ€™ve tested it out, and it looks really godd; well done on some great work!

1 Like
#103

Thank you so much @chrisdavidmills :slight_smile: