Tribute page - Marcus Aurelius - All feedback welcome!

Tribute page - Marcus Aurelius - All feedback welcome!
0.0 0

#1

Hi guys,

I’ve just finished my first FCC project. Getting a chance to use Bootstrap is great for building an understanding of how it works. It’s a tribute page to Marcus Aurelius (the king of stoicism). Here’s the link: http://codepen.io/JoshAmore/full/GNPxOM/

I would love any feedback!

Thanks all!


#2

Hi @joshamore,

HTML

  • Do not use lower levels to decrease heading font size:
<h1 id="tribute-main" class="text-center head-font">Marcus Aurelius</h1>
<h3 class="text-center"><em>The king of Stoicism.</em></h3>

MDN documentation:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements

**Do not use lower levels to decrease heading font size: use the CSS font-size property instead.**Avoid skipping heading levels: always start from <h1>, next use <h2> and so on.

http://w3c.github.io/html/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements

h2–h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection. Instead use the markup patterns in the §4.13 Common idioms without dedicated elements section of the specification.

Common Idioms
https://www.w3.org/TR/html5/common-idioms.html


  • This code is not correct
<html>
  
  <div class="container-fluid">
    <div class="container-fluid" id="main-area">
      
      <body>

MDN documentation:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html

Permitted content:
One <head> element, followed by one <body> element.

Cheers and happy coding :slight_smile:


#3

Hi @erretres,

Thank you for the helpful reply (especially for linking to MDN – that’s an amazing resource).

I updated some sections of my tribute page based on your reply. I removed the h2 element, which was styling my subheading, and went with a header element, h1, and p combination (styled with CSS).

I also added a head element (with title).

Again, thanks for the help!