First Project Feedback Request

Code Feedback
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:
style - HTML: HyperText Markup Language | MDN

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:
<h1>–<h6>: The HTML Section Heading elements - HTML: HyperText Markup Language | MDN

**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.

HTML Standard

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
HTML Standard

  • 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:
<br>: The Line Break element - HTML: HyperText Markup Language | MDN

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:
id - HTML: HyperText Markup Language | MDN

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)
A Line In The Sand, A Story About Meaty Chili and Using Classes | CSS-Tricks - CSS-Tricks

You can set the list-style to none (if you don’t want the dots):
list-style - CSS: Cascading Style Sheets | MDN

Cheers and happy coding :slight_smile: