I have done the work from my side and want it to be assessed.
I am looking for feedback on semantics as that was the most difficult part, what I felt.
My code is shared at : codepen link and jsfiddle link.
This is looking pretty good — well done on some great work.
I had a few small things to bring up, but nothing major.
You’ve got the first address wrapped inside a <div>:
<div class="sender-column">
...
</div>
This isn’t terrible, but you could just delete the <div> and put the class="sender-column" directly on the <address> element.
In this bit:
<p>Dear Eileen,<br>
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="Doctorate of Philosophy">PhD</abbr> next year. I will answer your questions one by one, in the following sections.
</p>
“Dear Eileen,” would probably be better contained in its own separate paragraph, with the rest of it put in another separate paragraph.
thanks @ chrisdavidmills for your feedback.
I faced one more difficulty - deciding between “section” and “article” elements Any article or pointer on that could be helpful.
For this example, I don’t think you really need them at all; in general, this is a topic that a lot of people get confused about.
We have tried to provide a definition here:
In most simple cases where you just want a container element for a simple block of content, it doesn’t really matter.
With something more complex where you’ve got multiple containers, it depends on what content the containers have in them.
<article> is more for an item of content where you will have more than one, like blog posts, or news item summaries.
<section> is more for different areas of functionality, like a map, or a summary of your latest tweets, or an FAQ, or a section of contact information.