Advice regarding my tribute page

Hello,

I am a beginner who has just started coding. I have gone through the curriculum, read some other sources about HTML and CSS, checked out some YouTube videos to get some advice. I am not sure if my page is good. I would appreciate any feedback. https://codepen.io/Greshner/full/WNQBGjV

Thank you very much.

Looking at it, it looks pretty good. For a guy/gal just starting out, it looks really good.

If I had to be really nitpicky (and some of this is subjective) …

I find the color scheme a little nauseous. (But I am famous for horrible color choices, so what do I know.)

I think the blue is kind of in the middle ground in terms of darkness - black text is hard to read against it and white text is too.

I usually like a little border radius on the pictures to undo those sharp corners. I usually like it just barely noticeable. It would be like 5px in this case, but your padding is getting in the way. I’d do like margin: 20px auto; and then apply the border radius. But that’s just me.

Your text. It’s so looooooooong. If someone goes fullscreen and a large monitor, it’s insane. There’s a principle in UX that text shouldn’t be more than 40-50 characters. I think you’re above 200 here. I might set a max width. I might also have put the list in two columns. The same problem with the quotes below.

I might center the last line.

I can’t find any major issues. There are little things - your last li is missing a closing tag - there is an extra div closing tag. Other than that I’d just say to get in the habit of formatting your code as you go. Use proper indenting and spacing. It makes it much more readable.

I’m not saying you need to make any of these changes. Go ahead and move on. Good job. On to the next task. I’m just pointing these out so you can use this knowledge on your next project.

Hello Kevin. Thank you for your feedback. I really appreciate it. I will have to edit myself not to type so much. It is good to know about the UX principle of 40-50 characters. I am learning about what colours work with each other. I like blue and chose this shade. I just added the last li closing tag but I have not changed the margin, border radius yet. Thank you very much for your feedback.

Yeah, like I said, job well done, move onto the next project. Keep moving forward.

I was wrong, the “limit” is 60. It is tip #3 here.

Thank you for the additional information. It is very helpful.

Yeah, UX is something we don’t often think about. Don’t Make Me Think is also a great book.

The color is a little bit much.

Your goal is to make the page feel right. You want it to evoke the appropriate emotions from your viewer.

The colors hurt the eyes somewhat.

But don’t worry. I did the exact same things with my first tribute page. :slightly_smiling_face:

Thank you for the feedback. I like blue but I guess I need to see what works better. Thank you.

1 Like

Get this book! Then you can move to Head First Javascript and more HTML books… read read code read read code… it’s like learning new language… you cannot start speaking in foreing language out of nothing…

Just google "html color codes. I bet you could find something great in the color charts they have. :slightly_smiling_face:

hi @greschwannabe4

heres might interest you with the color. just pick a color and youll have all the value.

https://www.w3schools.com/colors/colors_picker.asp

Hello. Thank you for the link. It will help me .

Hi @greschwannabe4, I recall giving you feedback on this page once before but don’t recall what it was about. Some things you should revisit;

  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should address.
  • Don’t use <br> to force spacing. Use margin and/or padding in CSS.
  • Review the lesson about giving meaningful text to links.
  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
1 Like