Tribute Page Completed! "Vixen"

Code Feedback
1

Hi everyone!

I have just completed my Tribute Page! I would love to get feedback on it.

2

Hey i’m not able to do even that . Its going above my head , please help

3

Hi!

It’s really cool! i love the font you used !
well done!
A.

1 Like
4

Hi!

I’m a super beginner too but I can try to help you any way that I can. Do you have any specific questions?

5

Not bad as beginner.Its good. but one thing to mention that there is no responsiveness in the paragraph texts.You can see it when you narrow down the screen-size ,it sits outside of the container of the texts.,that’s cause you are not using any bootstrap containers nor any media queries. so you might wanna fix that.

6

I will admit, i clicked because of Vixen. But, since you got my attention:

Good:

  1. Color palette (choices match main image & heroine’s outfit)
  2. Font choices.
  3. Responsiveness: Image resizes well.

Bad:

  1. Accessibility - https://webaim.org/resources/contrastchecker/ is a useful tool to tell you how contrasting your color choices are for text. I ran your central div’s background color and found that white fails against that orange-yellow background, but black passes very nicely.
  2. Responsiveness
    • At small widths, the black negative space on the sides is too big. I refer you to my answer about Bootstrap here for an explanation of how to acheive it better and an outlink to a great resource.
    • Your main heading font doesn’t scale with screen size, so it loses its proportion to the image at smaller widths. I don’t know how to do this in Bootstrap.

Like you, I suspect, I started on the production page, got to 232 points, and jumped tracks to the Beta. Best decision of the program - yeah, I repeated stuff, but without a framework like Bootstrap getting between me and the raw HTML/CSS/JS, I learned it much better. I even redid my first project (which I had done in Bootstrap) in raw HTML/CSS. If you go to the newest,shiniest version of the Beta, you will learn about media queries, which is how I would handle the font resizing and several of the other issues that you have with responsiveness.

[Edit: Advice under Bad.1 - forgot to finish my sentence.]

7

Might want to set a max width on your paragraphs to keep the lines from being so wide on larger screens. Human eyes are more accustomed to shorter lines, and I’ve read that about 700 characters wide is a max for comfortable reading. I’d also space out the bullet-points a bit to break up the text-walls and help bring focus to each section. Otherwise, this looks great!

9

Thank you for the feedback!
I like your idea of changing the max width and spacing between bullets. I have just updated my project with those changes.

10

Thank you so much for your detailed response!

I did make some of the changes you suggested. I changed most of the text color to black. I will have to look into how to edit my header though.

1 Like
11

Thank you! I just made a few changes. I really appreciate the feedback.

12

Sure thing. Much more legible now. You should really read the zeninvader page I linked to in that other post. The whole point of Bootstrap is to resize the width of elements based on viewport width, and the column system is everything. I noticed you classed the list-containing div a “box”. You should probably use columns.