I need feedback for my tribute page. lelouch

here is link for my page: https://codepen.io/redapy/full/oNZRyPo
I accept all critics and opinion, thnx in advance.

I think it looks good overall. I had an issue with the contrast between the background color and the color and size of the font. It was hard on the eyes but I love the background color. Perhaps condense the information into smaller paragraphs by pointing out the most important aspects of your character’s history.

I would also suggest adjusting the font color using a color wheel that make it a good match for the background and easy to read (not as contrasty) as well as the font size. Just my opinion.

Well, first of all, you are failing one of the tests:

  1. The element should be centered within its parent element.

Image is not centered: expected 0 to be close to 509 +/- 11 AssertionError: Image is not centered: expected 0 to be close to 509 +/- 11

Typing your HTML into a validator like validator.w3.org, (and ignoring the first three codepen related problems), I see the following errors:

1. **Error** : Element [ `strong` ](https://html.spec.whatwg.org/multipage/#the-strong-element) not allowed as child of element [ `ol` ](https://html.spec.whatwg.org/multipage/#the-ol-element) in this context. (Suppressing further errors from this subtree.)[From line 10, column 11; to line 10, column 18](https://validator.w3.org/nu/#l10c18) `      <ol><strong>conten`

Contexts in which element [ `strong` ](https://html.spec.whatwg.org/multipage/#the-strong-element) may be used:

Where [phrasing content](https://html.spec.whatwg.org/multipage/#phrasing-content-2) is expected.

Content model for element [ `ol` ](https://html.spec.whatwg.org/multipage/#the-ol-element):

Zero or more `li` and [script-supporting](https://html.spec.whatwg.org/multipage/#script-supporting-elements-2) elements.

2. **Error** : End tag `p` seen, but there were open elements.[From line 122, column 208; to line 122, column 211](https://validator.w3.org/nu/#l122c211) `ut Lelouch</p>↩     `
3. **Error** : Unclosed element `a` .[From line 122, column 75; to line 122, column 189](https://validator.w3.org/nu/#l122c189) `ing link: <a id="tribute-link" target="_blank" href="https://codegeass.fandom.com/wiki/Lelouch_vi_Britannia#Suzaku_Kururugi">more a`
4. **Error** : End tag `main` seen, but there were open elements.[From line 123, column 11; to line 123, column 17](https://validator.w3.org/nu/#l123c17) `          </main>↩  </d`
5. **Error** : End tag `div` seen, but there were open elements.[From line 124, column 3; to line 124, column 8](https://validator.w3.org/nu/#l124c8) `</main>↩  </div>↩↩</bo`
6. **Error** : End tag for `body` seen, but there were unclosed elements.[From line 126, column 1; to line 126, column 7](https://validator.w3.org/nu/#l126c7) `  </div>↩↩</body> `

I would work through those.

But yeah, the coding looks pretty good, I don’t see much about which to complain.

As to the design…

I’m a little old fashioned so the colors are a bit jarring to my tastes. But maybe it makes sense in the context of the subject matter.

You have a type in one of the section titles:

lelouch relationships’:

Note the apostrophe.

Also, there is a principle in design for readability that you shouldn’t have lines of text that long. When they get too long, it is difficult for the eye to follow. Usually you want lines about 50-60 chars long. Some people say up to 75 or 80. You have lines with over 350. Wikipedia (which I think has too long of lines) usually maxes out in the 200-250 range. I think they get away with it because people know, “I’m going here to read” and they know that it is basically an encyclopedia and they know they are going to be reading.

How do you have shorter lines? You can define the width down, you can have newspaper columns, etc.

I’m not saying that having more than 75 is an unforgivable sin, but 350 might be. I don’t know, it’s just something to think about.

Anyway, it still looks good. It looks slicker than my first page. Keep in mind that I am a very picky reviewer. Good job.

I’d at least fix those validation errors, but have fun on the Survey Form project.


Just to be clear, with regards to line length, that will of course depend on screen and window size. But still, if someone wants to look at it on a large screen, it would be nice if it was readable.

Again, I’m not saying it’s something you need to go back and fix, but just be aware of that going forward.

1 Like

Great suggestions on the lines of text, what would you suggest the width as a standard to be at or to start at?

You can’t define a perfect width, because it will depend on things like font and font size. And in some fonts, the characters are all the same width (monospace) and in some cases it is different for every letter (proportional). People also sometimes mess with the kerning - the space between letters.

You can’t really define a width. If you know the values above you can estimate a value, but I think it’s easiest to just set your font, font size, etc. and see what works. Just see how many chars per line you are averaging. If it is a long text section, and ff it is less than 50, it is probably too short. If it is above 75 it might be too long. If you’re above 100, then that is getting tough. I think above 200 is terrible.

Just work with it and see what works.

1 Like

Actually, I was thinking of width in pixels, but now that I think of it, you might be able to get pretty close to that by defining it in ems. If you want 60 chars, then you would want what, 40ems? That’s just a guess, assuming proportional fonts. Try it out and see what works.

1 Like

Great thank you, awesome pointers!

Thnx a lot for your feedback, that was my first page so I really was struggling to choose the colors.

thnx a lot for this usefull information and for your time, I’ll try to fix all the issue you pointed out.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.