My first code pen challenge (Build Tribute Page)

My first code pen challenge (Build Tribute Page)
0

#1

Hello,

I’m new to FCC and not sure if this is the place to post this. I completed my first challenge “Tribute Page”. I would like any feedback on the technical details of the HTML and CSS. I want to know if I’m using the HTML and CSS elements effectively. The content is not important; I quickly added things just to fill in the webpage.

My pen is here

Thank you,

Paul


#2

Hi @pcantalupo,

  • You don’t need this line in Codepen:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />

Using Bootstrap With Codepen


  • Do not use lower levels to decrease heading font size:
 <h1 class="large">History of Virology</h1>
  <h3><em>How much virology history do you know?</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

You can use html inspector in Codepen:

1.- Click the V (upper right)
2.- Click “Analyze HTML”

You can also do the same for CSS and JavaScript.

Cheers and happy coding :slight_smile:


#3

Thank you for your help!