Mozilla, thank you for this HTML tutorial, first of all. Here i begin my adventure to the code
letter edit lesson: https://github.com/tonybarracuda/letter-markup/blob/master/index.html
Hi there @Cyborger! Sorry for missing this one; I’ll answer you now.
This is not looking too bad at all; here’s a few points where you could improve:
- Don’t use presentational elements like
<i>and<u>; if you want to get a pure visual effect on a page, you should use CSS (which this bit of the course doesn’t teach!). To get the italic text on the address, wrap the address in an<address>element, which is the best semantic element for that job. - As I said above, use
<address>for the addresses, not paragraphs. You also don’t really need the extra wrapping<div>— you could just put<address>around the address, a<p>around the<time>element, then include theclass="sender-column"on the<address>and<p>elements. - Always separate different paragraphs into individual
<p>elements. Don’t split them with<br>. - I am not sure what the
onclick="return false"is for
- The motto should be structured more like this:
<p>University of Awesome motto: <q>Be awesome to each other.</q> -- <cite>The memoirs of Bill S Preston, Esq</cite></p>
The <q> automatically adds the quote marks, so you don’t need to put them in, and the <cite> automatically adds the italic style.
Apart from that, it is looking good!
Hello @tonybarracuda! Thanks for sending your code in!
This is looking really good; I had a few comments, but nothing major:
-
class="sender-column1"needs to be updated toclass="sender-column", to work with the originally provided CSS. - Wrap the addresses in
<address>elements, not<p>. - You are missing
<time datetime="">elements from some of the dates. - You have a bit of junk in the last line —
</e,>
hello, mate. Thank you for showing me my mistakes.
sender-colum1 , i jusy played with css.
what i have not understand proprely, which are you talking about? Should it be the one before the last row or beginning first column on the right of the page?
Thank you
Sory, I don’t know what you mean by this Which one of my points does this refer to?
Thanks For marking this for me, sorry about the delayed response. I really appreciate it.
Hey guys, looking for an assessment and any feedback on my Awesome University letter markup. Thoughts are welcome and appreciated. Thanks!
Hi all.
<head>
<meta charset="utf-8">
<title>Letter</title>
<link rel="stylesheet" href="styles/style.css">
<meta name="author" content="vladymyr">
</head>
<body>
<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 datetime="2016-01-20" class="sender-column">20 January 2016</time>
</pre>
<pre>
Miss Eileen Dover
4321 Cliff Top Edge
Dover, CT9 XXX
UK
</pre>
<h1>Re: Eileen Dover university application</h1>
<p> Dear Eileen,</p>
<p>Thank you for your recent application to join us at the University of Awesome's 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>
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 <a href="http://example.com" title="Example Domain">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:</p>
<ol>
<li>Turning H<sub>2</sub>O 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 3 × 10<sup>3</sup> > 3 × 10<sup>4</sup>.)</li>
<li><abbr title="Hipertext 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? Thanks.</p>
<h2>Exotic dance moves</h2>
<p>Yes, you are right! As part of my post-doctorate work, I <em>did</em> 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 <em>very</em> influential dance dating back as far as 300<abbr title="Befor Christ">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" title="Example Domain">exotic dance research page.</a></p>
<p>Yours sincerely,</p>
<p>Dr Eleanor Gaye</p>
<p>University of Awesome motto: <q>Be awesome to each other.</q> -- The memoirs of Bill S Preston, <abbr title="Esquire">Esq</abbr>
</body>
Hi @zenya!
Can you please put your code in an online editor like codepen, so I can see the source more easily, and can see it running live? Thanks!
Hey,chisdavidmills!
Here is my code.
How strange; I still couldn’t see the link you put in the discourse thread. But I could see it in the alert email, so I was able to find it
The HTML structure you’ve used in your example looks really good.
There is some strange CSS going on, and you’ve got the whole HTML source repeated in the HTML pane for some reason. But the actual HTML structure is very good!
Hi, this is my work. I would appreciate feedbacks.
https://github.com/ekouakaki/letter_markup.git
Thank you !
Hi there @ekouakaki, and thank you for sending your code in.
Looking at this, it looks very good overall. There is nothng really major wrong with it. I did notice a couple of things that could be improved:
- You could wrap the postal addresses in
<address>elements rather than<p>elements — better semantics. - In
H<sup>2</sup>O,supshould besub.
Hi all!
Appreciate any feedback. Thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Letter</title>
<link rel=stylesheet href="css.css">
</head>
<body>
<div class="sender-column">
<address>
<p><b>Dr. Eleanor Gaye</b><br>
Awesome Science faculty<br>
University of Awesome<br>
Bobtown, CA 99999,<br>
USA<br>
<b>Tel:</b> 123-456-7890<br>
<b>Email:</b> no_reply@example.com<br></p></address>
20 January 2016
</div>
<p><b>Miss Eileen Dover</b><br>
4321 Cliff Top Edge<br>
Dover, CT9 XXX<br>
UK</p>
<header><h1>Re: Eileen Dover university application</h1></header>
<p>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 <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:</p>
<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.
You can find more information about <a href="https://www.google.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:</p>
<ol>
<li>Turning H<sub>2</sub>O 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 3 × 10<sup>3</sup> increasing to 3 × 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>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.</p>
<h2>Exotic dance moves</h2>
<p>Yes, you are right! As part of my post-doctorate work, I <em>did</em> 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 <em>very</em> 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".</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="https://www.google.com">exotic dance research page</a>.</p>
<p>Yours sincerely,</p>
<p>Dr Eleanor Gaye</p>
<p>University of Awesome motto: "Be awesome to each other." -- The memoirs of Bill S Preston, <abbr title="Esquire">Esq</abbr></p>
</body>
</html>
Hey there @onberfrest, nice to hear from you, and thanks for sending in your code.
This is a good effort, but I did notice a few things you could improve:
-
You could get rid of the first
<div>, and putclass="sender-column"on the<address>element instead. -
Then you’d need to markup the letter date too, which you really should do anywa. Something like this would be appropriate:
<p class="sender-column"><time datetime="2016">20 January 2016</time></p>
-
Instead of using
<b>to bold words, it is better to use<strong>— this means strong emphasis and has more semantic meaning. -
The following bit needs to be made into a quote:
<p>University of Awesome motto: "Be awesome to each other." -- The memoirs of Bill S Preston, <abbr title="Esquire">Esq</abbr></p>
This can be done in a variety of ways, but we ended up doing it like this:
<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>
Note that using the <q> elements gives the text it wraps the semantic meaning of a quote, and also puts in the appropriate quote marks for you (depending on what language you have the page to).
1 Like
Hello! Thanks for making a good assignment.
Any small feedback is welcome.
Hi there @dadchyyy, and welcome to the community!
I have looked over your code, and it is pretty much perfect — I can’t find anything wrong with it. Well done on some great work!
1 Like
Hola a todos. Estoy empezando en esto del desarrollo web y quisiera una evaluación o revisión de mi código referente a “Marcar una Carta”. Todo comentario o crítica constructiva es bienvennida. Gracias de antemano.
ejemplo-carta.zip (3,2 KB)
LETTER
body {
max-width: 800px;
margin: 0 auto;
}
.sender-column {
text-align: right;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.3em;
}
p,ul,ol,dl,address {
font-size: 1.1em;
}
p, li, dd, dt, address {
line-height: 1.5;
}
Dr. Eleanor Gaye
Awesome Science faculty
University of Awesome
Bobtown, CA 99999,
USA
Tel: 123-456-7890
Email: no_reply@example.com
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 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:
- Turning H2 into wine, and the health benefits of Resveratrol (C14 H12 O3.)
- 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 increasing to 3 × 104.)
- 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 300BC, a whole village would dance around in a circle like chickens, to encourage their livestock to 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 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." -- The memoirs of Bill S Preston, Esq
Hi guys) Can you check my code, please? Thank you))
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="Roksolana" content="in this HTML page I describe letter from university">
<title>
LETTER
</title>
<style type="text/css">
body {
max-width: 800px;
margin: 0 auto;
}
.sender-column {
text-align: right;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.3em;
}
p,ul,ol,dl,address {
font-size: 1.1em;
}
p, li, dd, dt, address {
line-height: 1.5;
}
</style>
</head>
<body>
<address class="sender-column">
<p>
<b>Dr. Eleanor Gaye</b>
<br>
Awesome Science faculty
<br>
University of Awesome
<br>
Bobtown, CA 99999,
<br>
USA
<br>
<b>Tel:</b> 123-456-7890
<br>
<b>Email:</b> no_reply@example.com
</p>
<time datetime="2016-01-20" class="sender-column">20 January 2016</time>
</address>
<address>
<p>
<b>Miss Eileen Dover</b>
<br>
4321 Cliff Top Edge
<br>
Dover, CT9 XXX
<br>
UK
</p>
</address>
<h1>Re: Eileen Dover university application</h1>
<p>Dear Eileen,</p>
<p>Thank you 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="it is....">PhD</abbr> next year. I will answer your questions one by one, in the following sections.</p>
<h3>Starting dates</h3>
<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:</p>
<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<a href="http://example.com." title="important dates" target="_blank"> important university dates</a> on our website.</p>
<h3>Subjects of study</h3>
<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 H<sub>2</sub> 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 3 × 10<sub>3</sub> increasing to 3 × 10<sub>4</sub>.)</li>
<li><abbr title="it is..">HTML</abbr> and <abbr title="it is..">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? Thanks.</p>
<h3>Exotic dance moves</h3>
<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="it is..">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." title="research page" target="_blank" >exotic dance research page.</a></p>
<p>Yours sincerely,
<br>
<br>
Dr Eleanor Gaye</p>
<p>University of Awesome motto: <q cite="http://example.com.">"Be awesome to each other."</q> <a href="http://example.com." target="_blank"><cite>-- The memoirs of Bill S Preston,</cite></a> <abbr title="it is..">Esq</abbr></p>
</body>
</html>