First project: Tribute to Ansel Adams

Just finished my first project on CodePen, a tribute to Ansel Adams. Here is my First Pen. Please let me know what you think and if you have any comments/suggestions on the coding. Trying to get back into coding since I enjoyed it so much when I was in high school some 16+ years ago.

Hi @VT-Hokie04,

HTML inspector:

  • The <center> element is obsolete:
<h3>The man who captured America's beauty</h3>
<center>
<figure>

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

Deprecated
This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Avoid using it and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

  • Do not use lower levels to decrease heading font size:
<h1>Ansel Adams</h1>
<h3>The man who captured America's beauty</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

CSSlint:

  • Unknown property ‘text-style’
h5{
	text-style: bold;
}

quote{
	...
	text-style: italic;
}
  • Invalid value bold
h1{
	...
	font-style: bold;
}
h2{
        ...
	font-style: bold;
}

MDN documentation:
https://developer.mozilla.org/en-US/docs/Web/CSS/font-style

Values

  • normal
    Selects a font that is classified as normal within a font-family.
  • italic
    Selects a font that is labeled italic, or, if no italic version of the face is available, one labeled oblique is selected instead.
  • oblique
    Selects a font that is labeled oblique, or, if no oblique version of the face is available, one labeled italic is selected instead.

Cheers and happy coding :slight_smile: