"Marking up a letter" assessment

MDN Learn
#83

Hello @karl-han, thanks for submitting in your assessment; hope you are finding the course helpful so far.

It is looking mostly good/I’ve noticed a few things that could be changed:

  1. You didn’t wrap your sender and receiver address stuff in paragraphs/<p></p> elements, so they aren’t getting the same line-height as the other parts of the text.
  2. You’ve missed your <time> elements on the semester start dates.
  3. “important university dates” is wrapped in an <address></address> element for some reason, rather than the link it originally had.
  4. You’ve not included the <sup>/<sub> elements on the chemical formulae, temperatures, etc.
  5. You’ve not turned the university motto into a quote.

Look into our version in more depth here:

#84

Thanks a lot for your feedback. I improve it with your advice. It reminds me to focus on the details in html editing.

#86

Hi. This is my “letter assessment”. Could you please have a look. Thanks

https://thimbleprojects.org/samiz/544191/

#87

This is really good, well done @samiz! The only comment I have is that you don’t need to put quote marks inside your quote (the contents of the <q> element) because the element adds quotes automatically. You’ve ended up with two sets of quotes around it.

Apart from that, really nicely done.

1 Like
#88

Hello everyone, I found out about MDN family just a few days ago doing some tutorials on pluralsight and I am happy I came across all this wonderful information. I just finished making the “letter” and would highly appreciate any feedback. I used https://validator.w3.org to validate the code and showed no errors.
Best regards!

Letter

Dr. Eleanor Gaye
Awesome Science faculty
University of Awesome
Bobtown, CA 99999,
USA
Tel: 123-456-7890
Email: no_reply@example.com

20 January 2016

Miss Eileen Dover
4321 Cliff Top Edge
Dover, CT9 XXX
UK

Re: Eileen Dover university application


Dear Eileen,


Thank you for your recent application to join us at the University of Awesome's science faculty to study as part of your PhD next year. I will answer your questions one by one, in the following sections.

Starting dates

We are happy to accomodate you starting your study with us at any time, however it would suit us better if you could start at the beginning of a semester; the start dates for each one are as follows:

  • First semester: 9 September 2016
  • Second semester: 15 January 2017
  • Third semester: 2 May 2017
Please let me know if this is ok, and if so which start date you would prefer.

You can find more information about important university dates on our website.

Subjects of study

At the Awesome Science Faculty, we have a pretty open-minded research facility — as long as the subjects fall somewhere in the realm of science and technology. You seem like an intelligent, dedicated researcher, and just the kind of person we'd like to have on our team. Saying that, of the ideas you submitted we were most intrigued by are as follows, in order of priority:

  1. Turning H2O into wine, and the health benefits of Resveratrol (C14H12O3.)
  2. Measuring the effect on performance of funk bassplayers at temperatures exceeding 30°C (86°F), when the audience size exponentially increases (effect of 3 x 103increasing to 3 x 104.)
  3. HTML and CSS constructs for representing musical scores.

So please can you provide more information on each of these subjects, including how long you'd expect the research to take, required staff and other resources, and anything else you think we'd need to know? Thanks.

Exotic dance moves

Yes, you are right! As part of my post-doctorate work, I did study exotic tribal dances. To answer your question, my favourite dances are as follows, with definitions:

Polynesian chicken dance
A little known but very influential dance dating back as far as 300 BC, a whole village would dance around in a circle like chickens, to encourage their livestock or be "fruitful".
Icelandic brownian shuffle
Before the Icelanders developed fire as a means of getting warm, they used to practice this dance, which involved huddling close together in a circle on the floor, and shuffling their bodies around in imperceptably tiny, very rapid movements. One of my fellow students used to say that he thought this dance inspired modern styles such as Twerking.
Arctic robot dance
An interesting example of historic misinformation, English explorers in the 1960s believed to have discovered a new dance style characterised by "robotic", stilted movements, being practiced by inhabitants of Northern Alaska and Canada. Later on however it was discovered that they were just moving like this because they were really cold.

For more of my research, see my exotic dance research page.

Yours sincerely,

Dr Eleanor Gaye

University of Awesome motto: Be awesome to each other. -- Bill S Preston, Esq

#89

https://thimble.mozilla.org/en-US/user/cristucu/1885335/ here is link to my project. I did it in Sublime and pasted it…

#90

Hi there @Cristucu! From looking at your version in the Discourse post, it looks pretty good. The styling, etc. all seems to be in the right place.

I couldn’t look at your Thimble version; it gave me a permission error and wouldn’t let me see the page.

You can look into our version in more depth here:

#91

From everything I could tell from other resources it seems like you don’t need to use reference entities like ° in HTML5, and it infact decreases readability in the code and takes up more space. Provided you declare utf-8.

Why does MDN stress the entity references which typically would require much more memorization for even simply character symbols, or a constantly alt-tabbed window with the references?

#92

You are probably right that we no longer need this. I think this is an artifact left over from when I first started writing about this stuff :wink:

I will update the course to lessen the importance of this.

It is still worth mentioning, as people will still come across it in the wild.

#93

Hi,

I followed the assessment and evaluated with the final version on github. I however wondered if I approached this correctly. See below example of how I used a <pre> tag instead of a <p>-tag

<pre class="sender-column"> <strong>Dr. Eleanor Gaye</strong>

Awesome Science faculty
University of Awesome
Bobtown, CA 99999,
USA
<strong>Tel</strong>: 123-456-7890
<strong>Email</strong>: no_reply@example.com

<time class=“sender-column” datetime=“2016-01-20”>20 January 2016</time>
</pre>

So my question is: when should I use a pre-tag instead of a p-tag?
Was this also a correct use of the tag?

Thank you for you feedback!

#94 
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="author" content="Mark Allen Battey" >
    <link rel="stylesheet" href="styles/style.css">
    <title>Student Letter</title>
  </head>
  <body>
    <p class="sender-column"><strong>Dr. Eleanor Gaye</strong><br>
    Awesome Science faculty<br>
    University of Awesome<br>
    Bobtown, CA 99999,USA </p>
    <p class="sender-column"><strong>Tel:</strong> 123-456-7890</p>
    <p class="sender-column"><strong>Email:</strong> <a href="mailto:no_reply@example.com">no_reply@example.com</a></p>
    <p class="sender-column"><time datetime="2016-01-20">20 January 2016</time></p>
    <p><strong>Miss Eileen Dover</strong><br>
    4321 Cliff Top Edge<br>
    Dover, CT9 XXX <br>
    UK<br></p>

    <h1>Re: Eileen Dover university application</h1>
    <p>Dear Eileen,</p>
    <p><em>Thank you</em> for your recent application to join us at the <strong>University of Awesome's</strong> science faculty to study as part of your <abbr title="Doctor of Philosophy">PhD</abbr> next year. 
        I will answer your questions one by one, in the following sections.</p>

    <h2>Starting dates</h2>
    <p>We are happy to accommodate you starting your study with us at any time, however it would suit us better if you could start at the beginning of a semester; the start dates for each one are as
        follows:
    <ul>
      <li>First semester: <time datetime="2016-09-09">9 September 2016</time></li>
      <li>Second semester: <time datetime="2017-01-15">15 January 2017</time></li>
      <li>Third semester: <time datetime="2017-05-02">2 May 2017</time></li>   
    </ul>
    <p>Please let me know if this is ok, and if so which start date you would prefer.</p>
    <p>You can find more information about important university dates on our <a href="http://example.com">website</a>.</p>
    
    <h2>Subjects of study</h2>
    <p>At the Awesome Science Faculty, we have a pretty open-minded research facility — as long as the subjects fall somewhere in the realm of science and technology. You seem like an intelligent, 
        dedicated researcher, and just the kind of person we'd like to have on our team. Saying that, of the ideas you submitted we were most intrigued by are as follows, in order of priority:</p>
    <ol>
      <li>Turning <abbr title="Hydrogen dioxide">H<sub>2O</sub></abbr> into wine, and the health benefits of Resveratrol (C<sub>14</sub>H<sub>12</sub>O<sub>3</sub>.)</li>
      <li>Measuring the effect on performance of funk bassplayers at temperatures exceeding 30°C (86°F), when the audience size exponentially increases (effect of 10<sup>3</sup> increasing to 
          10<sup>4</sup>3 × 104.)</li> 
      <li><abbr title="Hypertext Markup Language">HTML</abbr> and <abbr title="Cascading Style Sheets">CSS</abbr> constructs for representing musical scores.</li> 
    </ol>    
    <p>So please can you provide more information on each of these subjects, including how long you'd expect the research to take, required staff and other resources, and anything else you think we'd 
        need to know?</p>
    <p>Thanks.</p>

    <h2>Exotic dance moves</h2>
    <p>Yes, you are right! As part of my post-doctorate work, I did study exotic tribal dances. To answer your question, my favourite dances are as follows, with definitions:</p>
    <dl>
      <dt>Polynesian chicken dance</dt>
        <dd>A little known but very influential dance dating back as far as 300 <abbr title="Before the Commom Era">BC</abbr>, a whole village would dance around in a circle like chickens, to encourage their livestock to be "fruitful".</dd>
      <dt>Icelandic brownian shuffle</dt>
        <dd>Before the Icelanders developed fire as a means of getting warm, they used to practice this dance, which involved huddling close together in a circle on the floor, and shuffling their 
            bodies around in imperceptibly tiny, very rapid movements. One of my fellow students used to say that he thought this dance inspired modern styles such as Twerking.</dd>
      <dt>Arctic robot dance</dt>
        <dd>An interesting example of historic misinformation, English explorers in the 1960s believed to have discovered a new dance style characterized by "robotic", stilted movements, being 
            practiced by inhabitants of Northern Alaska and Canada. Later on however it was discovered that they were just moving like this because they were really cold.</dd>
    </dl>
    <p>For more of my research, see my <a href="http://example.com">exotic dance research page.</a></p>
    
    <p>Yours sincerely,</p>
    <p>Dr Eleanor Gaye</p>
    <p>University of Awesome motto:</p> <q>Be awesome to each other.</q> -- <cite>Bill S Preston, Esq</cite>
  </body>
</html>
#95

Hi @MarkBattey, well done for completing the first assessment!

I’ve had a look at your work and, while there are a few differences between our version and yours, they are only minor differences, and most of them are not wrong as such. Great job.

The only thing I think is really worth pointing out is that in H20, you turned both the 2 and 0 into a subscript, where it just needs to be set on the 2.

If you want to explore our version further and look at what we did, you can find it here: https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-finished/index.html

Best regards.

#96

Hi there @smoens,

This is interesting — I’d actually never never used <pre> element for an address before. It tends to be used for displaying code samples, and the typical default display font is generally a monospace code type font such as Courier. However there is nothing in the spec or our <pre> reference page to say it can’t be used for marking up addresses, and it certainly saves you some markup (you don’t need <br> for the line breaks.)

One disadvantage is that you’d need to use CSS to set the font back to match the rest of the letter.

I found this rather interesting article that compares and contrasts methods of marking up addresses: http://jkorpela.fi/html/address.html

#97

I just finished assesment, can someone analyize it? thanks

#98

I have finished the assessment and checked it on the “Nu Html Checker”
But it said:" Error : No p element in scope but a p end tag seen."(line 46,55 and 75)
but i did have ‘p’ element (i used visual stdio2107 to wrote the “letter” and it match the ‘p’ element successfully),why?
thanks a lot​:blush::blush::blush:

letter

Dr.eleanor Gaye
Awesome Science faculty
University of Awesome
Bobtown,CA 99999.
USA
Email: no_reply@example.com
Tel:123-456-7890
20 january 2016 

</p>
<p><em>
<b>Miss Elissn Dover</b><br />
4321 Cliff top Edge<br />
Dover,CT9 XXX<br />
UK
    </em></P>
<h1>Re: Eileen Dover university application</h1>
<p>
    Dear Eileen,<br /><br />
    Thank you for your recent application to join us at the University of Awesome's science faculty to study as part of your PhD next year.
    I will answer your questions one by one, in the following sections.
</p>
<h2 >Starting dates</h2>
<p>
    We are happy to accommodate you starting your study with us at any time,
    however it would suit us better if you could start at the beginning of a semester;
    the start dates for each one are as follows:
    <ul>
        <li>First semester:<time datetime="2016-09-09"> <strong>9 September 2016</strong></time></li>
        <li>Second semester:<time datetime="2017-01-15"><strong> 15 January 2017</strong></time></li>
        <li>Third semester:<time datetime="2017-05-02"><strong> 2 May 2017</strong></time></li>
    </ul>
    Please let me know if this is ok, and if so which start date you would prefer.<br />
    You can find more information about
    <a href="http://example.com">
    important university dates</a> on our website.
</p>
<h2>Subjects of study</h2>
<p>
    At the Awesome Science Faculty, we have a pretty open-minded research facility — as long as the subjects fall somewhere in the realm of science and technology. You seem like an intelligent, dedicated researcher, and just the kind of person we'd like to have on our team. Saying that, of the ideas you submitted we were most intrigued by are as follows, in order of priority:
<ol>
    <li>Turning <abbr title="water">H<sub>2</sub>O</abbr> into wine, and the health benefits of <abbr title="a type of natural phenol">Resveratrol</abbr> (C<sub>14</sub>H<sub>12</sub>O<sub>3</sub>.)</li>
    <li>Measuring the effect on performance of funk bassplayers at temperatures exceeding 30&deg;C (86&deg;F), when the audience size exponentially increases (effect of 3 &times; 10<sup>3</sup> &gt;  3 &times; 10<sup>4</sup>.)</li>
    <li><abbr title="HyperText Markup Language">HTML</abbr> and <abbr title="Cascading Style Sheets">CSS</abbr> constructs for representing musical scores.</li>
</ol>
</p>
<h2>Exotic dance moves</h2>
<p>
    Yes, you are right! As part of my post-doctorate work, I did study exotic tribal dances. To answer your question, my favourite dances are as follows, with definitions:
    <br />
    <dl>
        <dt>Polynesian chicken dance</dt>
        <dd>
            A little known but very influential dance dating back as far as 300<abbr title="Before Christ">BC</abbr>, a whole village would dance around in a circle like chickens, to encourage their livestock to be "fruitful".
            Icelandic brownian shuffle
        </dd>
        <dt>Icelandic brownian shuffle</dt>
        <dd>Before the Icelanders developed fire as a means of getting warm, they used to practice this dance, which involved huddling close together in a circle on the floor, and shuffling their bodies around in imperceptibly tiny, very rapid movements. One of my fellow students used to say that he thought this dance inspired modern styles such as Twerking.</dd>
        <dt>Arctic robot dance</dt>
        <dd>An interesting example of historic misinformation, English explorers in the 1960s believed to have discovered a new dance style characterized by "robotic", stilted movements, being practiced by inhabitants of Northern Alaska and Canada. Later on however it was discovered that they were just moving like this because they were really cold.</dd>
    </dl>
    For more of my research, see my <a href="http://example.com">exotic dance research page.</a><br />
    <br />Yours sincerely,<br /><br /><br /><br /><br />
    Dr Eleanor Gaye<br /><br />
    University of Awesome motto: <q>Be awesome to each other.</q> -- Bill S Preston, Esq
</p>
#99

I have finished the assessment and checked it on the “Nu Html Checker”
But it said:" Error : No p element in scope but a p end tag seen."(line 46,55 and 75)
but i did have ‘p’ element (i used visual stdio2107 to wrote the “letter” and it match the ‘p’ element successfully),why?
thanks a lot​:blush::blush::blush:

letter

Dr.eleanor Gaye
Awesome Science faculty
University of Awesome
Bobtown,CA 99999.
USA
Email: no_reply@example.com
Tel:123-456-7890
20 january 2016

Miss Elissn Dover
4321 Cliff top Edge
Dover,CT9 XXX
UK

Re: Eileen Dover university application

Dear Eileen,

Thank you for your recent application to join us at the University of Awesome's science faculty to study as part of your PhD next year. I will answer your questions one by one, in the following sections.

Starting dates

We are happy to accommodate you starting your study with us at any time, however it would suit us better if you could start at the beginning of a semester; the start dates for each one are as follows:

  • First semester: 9 September 2016
  • Second semester: 15 January 2017
  • Third semester: 2 May 2017
Please let me know if this is ok, and if so which start date you would prefer.
You can find more information about important university dates on our website.

Subjects of study

At the Awesome Science Faculty, we have a pretty open-minded research facility — as long as the subjects fall somewhere in the realm of science and technology. You seem like an intelligent, dedicated researcher, and just the kind of person we'd like to have on our team. Saying that, of the ideas you submitted we were most intrigued by are as follows, in order of priority:

  1. Turning H2O into wine, and the health benefits of Resveratrol (C14H12O3.)
  2. Measuring the effect on performance of funk bassplayers at temperatures exceeding 30°C (86°F), when the audience size exponentially increases (effect of 3 × 103 > 3 × 104.)
  3. HTML and CSS constructs for representing musical scores.

Exotic dance moves

Yes, you are right! As part of my post-doctorate work, I did study exotic tribal dances. To answer your question, my favourite dances are as follows, with definitions:

Polynesian chicken dance
A little known but very influential dance dating back as far as 300BC, a whole village would dance around in a circle like chickens, to encourage their livestock to be "fruitful". Icelandic brownian shuffle
Icelandic brownian shuffle
Before the Icelanders developed fire as a means of getting warm, they used to practice this dance, which involved huddling close together in a circle on the floor, and shuffling their bodies around in imperceptibly tiny, very rapid movements. One of my fellow students used to say that he thought this dance inspired modern styles such as Twerking.
Arctic robot dance
An interesting example of historic misinformation, English explorers in the 1960s believed to have discovered a new dance style characterized by "robotic", stilted movements, being practiced by inhabitants of Northern Alaska and Canada. Later on however it was discovered that they were just moving like this because they were really cold.
For more of my research, see my exotic dance research page.

Yours sincerely,




Dr Eleanor Gaye

University of Awesome motto: Be awesome to each other. -- Bill S Preston, Esq
#100

I have finished the assessment and checked it on the “Nu Html Checker”
But it said:" Error : No p element in scope but a p end tag seen."(line 46,55 and 75)
but i did have ‘p’ element (i used visual stdio2107 to wrote the “letter” and it match the ‘p’ element successfully),why?
thanks a lot​:blush::blush::blush:

letter

Dr.eleanor Gaye
Awesome Science faculty
University of Awesome
Bobtown,CA 99999.
USA
Email: no_reply@example.com
Tel:123-456-7890
20 january 2016

Miss Elissn Dover
4321 Cliff top Edge
Dover,CT9 XXX
UK

Re: Eileen Dover university application

Dear Eileen,

Thank you for your recent application to join us at the University of Awesome's science faculty to study as part of your PhD next year. I will answer your questions one by one, in the following sections.

Starting dates

We are happy to accommodate you starting your study with us at any time, however it would suit us better if you could start at the beginning of a semester; the start dates for each one are as follows:

  • First semester: 9 September 2016
  • Second semester: 15 January 2017
  • Third semester: 2 May 2017
Please let me know if this is ok, and if so which start date you would prefer.
You can find more information about important university dates on our website.

Subjects of study

At the Awesome Science Faculty, we have a pretty open-minded research facility — as long as the subjects fall somewhere in the realm of science and technology. You seem like an intelligent, dedicated researcher, and just the kind of person we'd like to have on our team. Saying that, of the ideas you submitted we were most intrigued by are as follows, in order of priority:

  1. Turning H2O into wine, and the health benefits of Resveratrol (C14H12O3.)
  2. Measuring the effect on performance of funk bassplayers at temperatures exceeding 30°C (86°F), when the audience size exponentially increases (effect of 3 × 103 > 3 × 104.)
  3. HTML and CSS constructs for representing musical scores.

Exotic dance moves

Yes, you are right! As part of my post-doctorate work, I did study exotic tribal dances. To answer your question, my favourite dances are as follows, with definitions:

Polynesian chicken dance
A little known but very influential dance dating back as far as 300BC, a whole village would dance around in a circle like chickens, to encourage their livestock to be "fruitful". Icelandic brownian shuffle
Icelandic brownian shuffle
Before the Icelanders developed fire as a means of getting warm, they used to practice this dance, which involved huddling close together in a circle on the floor, and shuffling their bodies around in imperceptibly tiny, very rapid movements. One of my fellow students used to say that he thought this dance inspired modern styles such as Twerking.
Arctic robot dance
An interesting example of historic misinformation, English explorers in the 1960s believed to have discovered a new dance style characterized by "robotic", stilted movements, being practiced by inhabitants of Northern Alaska and Canada. Later on however it was discovered that they were just moving like this because they were really cold.
For more of my research, see my exotic dance research page.

Yours sincerely,




Dr Eleanor Gaye

University of Awesome motto: Be awesome to each other. -- Bill S Preston, Esq
#101

Hi @lraty , welcome to the MDN Community :blush:.
Sorry for the delay to answer your question.

Regarding the errors you are getting with the HTML Checker, it’s because you are nesting <ol>, <ul> and<dl> elements inside <p> ones. The specs stablish that <p> elements should contain only inline elements (like span, strong, etc), and the ones I mentioned before are block elements. To fix the errors, only close your paragraphs before the block elements are started and open them again after they finish. Do not fear to use a lot of paragraphs.

Hope that helps :wink:.

Now, as an extra tip you can edit your posts after publishing them as many times as you need. If it’s not troublesome, try to avoid posting the same post multiple times, because it gets a little complicated to follow the conversation :slightly_smiling_face:.

1 Like
#102

Really thank you！:smile::smile::smile:
(i’m sorry for posting the post for twice，i thought i screwed up at that time)

#103

Welcome @lraty, and no problem :blush:.
Any more issues you encounter, feel free to ask us. Happy learning!!