Assessment wanted for Marking up a letter-

MDN Learn
1

Hi there,

I have finished the Marking up a letter assessment. Would highly appreciate it if someone can check my assessment!

The only problem I ran into is that I couldn’t get the tooltip to appear for HTML and CSS despite doing the proper element.

Link to assessment:

Link to my code:

2

Hi @Kebin and welcome to the community :wave:

Great job on your first big exercise! :medal_sports:

Here are some comments:

  • <body> should be placed in front of the first address and the <head> around <h1> needs to be removed (<head> is only for meta data at the start of the page)
  • <tel> and <email> aren’t valid HTML elements. It’s fine to just use <strong>.
  • The datetime attribute of <time> needs padding zeros for day an month. This would be correct: <time datetime="2017-05-02">.
  • You wrote title: instead of title= for the HTML and CSS <abbr> that’s why they are not showing the tooltip.
  • The quote at the end of the letter should be surrounded by <q>. This will automatically add quotes and tell the browser that this part is a quotation: <q>Be awesome to each other.</q>

I hope that helps. Feel free to ask questions if something isn’t clear. :blush:

Have a nice day,
Michael

1 Like
3

Hi Michael,

Thank you so much for the feedback and warm welcome! Highly appreciate it.

and THANK YOU for pointing that out! I was pulling my hair not knowing what the error was for the element.

I have fixed the problems already in my code!

Thanks again!
Kevin

1 Like
4

Your welcome, @Kebin!

Good improvements.
Two things remain:

  • The <body> still starts at the wrong place. It should immediately follow </head> (line 8)
  • You replaced <cite> with <q>. <cite> was correct since that’s the source of the quotation. What I meant was to put <q> around the quotation itself:
<p>University of Awesome motto: <q>Be awesome to each other.</q> -- <cite>The memoirs of Bill S Preston, <abbr title="Esquire">Esq</abbr></cite></p>
1 Like
5

Thank you again @mikoMK!

I’ve fixed the 2 errors and ran it through the HTML validator and all of the errors dissapeared except for one:

image
image420×125 3.51 KB

What might this be?

Thanks again!
Kevin

1 Like
6

The reason is that the whole footer also needs to be part of <body>. If you move </body> to line 96 the error goes away.
The main structure of an HTML file is:

<!DOCTYPE html>
<html>
  <head>
    <!-- meta data, page title, linked CSS files, etc. -->
  </head>
  <body>
    <!-- All the page content including navigation, sidebars, -->
    <!-- headings, paragraphs, lists, footer, images, etc. -->
  </body>
</html>

All the tags have to be where the comments are above; either in <head> or in <body>.
Does that make it clearer? :slightly_smiling_face:

Michael

1 Like
7

Ahh I see, thank you very much! That made it much clearer!

1 Like