First Project Feedback Request

First Project Feedback Request
0.0 0

#1

Hi! This is my first project with code camp and I was hoping some people would give me some feedback? It’s a tribute page for Dirk Strider from Homestuck. Warning: My page does include swearing (I did it to keep inline with the character.) The color scheme was done using colors associated with the character as well.

Any and all feedback is appreciated. I did try to make the pictures mobile friendly, but every time I did, the pictures would end up off center.


#2

Hi @AvidReader,

HTML:

  • Please, don’t use the style attribute, it make the review difficult (because there are multiple style sources [every element with the attribute])

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 element have mainly the purpose of allowing for quick styling, for example for testing purposes.


  • Do not use lower levels to decrease heading font size:
 <h1 style = "color:#b21261; font-family:comic sans ms; font-size:45px";>Dirk Strider</h1></div>
<h3 style = "color:#b21261; font-family:comic sans ms; font-size:25px text-align:center"; >Prince of Heart</h3></div>

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


  • Do not use <br> to increase a gap:
 <li>Wants a body so he can secretly dance around in his underwear for ironic purposes.</li>
  </ul>
  <br>
  <br>

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

Do not use <br> to increase the gap between lines of text; use the CSS margin property or the <p> element.

Cheers and happy coding :slight_smile:


#3

Thank you so much! I’m going to work on this over the week. I didn’t know most of this and appreciate the documentation so I can learn more.


#4

You’re welcome :smile: .

Cheers and happy coding :slight_smile:


#5

Okay, so I think I fixed everything. Would you mind taking another look?


#6

Sure, no problem :thumbsup: .

HTML:
This is note recommended (the dot)

<div id=".firstDiv">

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

Note: Using characters except ASCII letters and digits, ‘_’, ‘-’ and ‘.’ may cause compatibility problems, as they weren’t allowed in HTML 4. Though this restriction has been lifted in HTML 5, an ID should start with a letter for compatibility.


CSS
This is only a recommendation (but I think is a really good recommendation)
https://css-tricks.com/a-line-in-the-sand/

You can set the list-style to none (if you don’t want the dots):
https://developer.mozilla.org/en-US/docs/Web/CSS/list-style

Cheers and happy coding :slight_smile: