First HTML Project, hoping for some feedback!

First HTML Project, hoping for some feedback!
0.0 0

#1

Hey everyone!

I’m brand new to programming and I was just looking for some feedback on my first HTML project. I know I still have a TON to learn, so off the bat I’m really just hoping for some constructive criticism on how my code is set up. I know there’s a certain way it’s supposed to be, so I’d like to establish that early.

Thanks a lot!

Project: http://codepen.io/cpie19/pen/XpgXWW


#2

Hi @cpie19,

HTML

  • Do not use lower levels to decrease heading font size:
  <h1 class="text-center text-primary" id="heading">Kemba Walker</h1>
  <h3 class="text-center" id="subheading">Point Guard - Charlotte Hornets</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

  • Is recommended for styles to be defined in a separate file or files
<ul id="percentages" style="list-style: none">

MDN documentation:
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style

The style global attribute contains CSS styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the <style> element have mainly the purpose of allowing for quick styling, for example for testing purposes.


CSS

This is only a recommendation
https://css-tricks.com/a-line-in-the-sand/

  • This is error prone
...
#body {
  font-family: courier;
}
...

#heading {
  margin-bottom: 5px;
}
...

Cheers and happy coding :slight_smile: