Project Feedback for my Tribute Page dedicated to Nujabes

Hi! I think I’ve finished my page. Used both CodePen’s internal document analyzer and W3C Validator, and the only error I’ve found was that the W3C Validator says my code is missing the <! DOCTYPE html> line (as it’s not required on CodePen, but the line is in my original code, which was written in VSCode, asI feel more comfortable with it).

I had to look at some page on W3Schools for better explanations of some things, mostly on CSS, as i felt like the lessons on freeCodeCamp felt kinda superficial, and I often saw myself stuck trying to remember a tag, an attribute or something else.

My page is simple, and I tried to make it look as clean as possible.

Thanks in advance for any suggestion and advice.

Hi @RamiLT, overall it’s a very good but you definitely need to fix the responsiveness. As I narrow my browser I get a horizontal scroll bar. Fortunately, it’s an easy fix. I think you should be able to figure out it fairly quickly, but let us know if you need a hint.

The other thing I would recommend is that you reword the last sentence so that link text includes something like “Jun Seba’s Wikipedia entry”. The more descriptive the link text is about where it goes to the more accessible it is to people who are listening to your page.

1 Like

Thank you for yor reply.

I don’t think I know how to fix the responsiveness issue, but I’ll try to figure it out.

The other issue is an easy fix and I’ll correct it asap!

You get a horizontal scroll bar because an element is not automatically narrowing as the browser narrows. Usually this is because you have set a width on it that is too wide. I would look for that.

1 Like

Thanks! Now I know what to look for!

I’ve updated the code and I think I managed to fix everything this time. I also took some time to remove the underline from the link in the last sentence (using text-decoration: none;) and I also decided to change the link’s color to match the page’s color scheme (the default blue color looks very out of place).

The responsiveness issue was fixed by using the max-width: ; attribute on the “main” selector, so even if I keep a width value of 800px, the screen doesn’t show the horizontal scroll bar anymore, fitting to the screen instead.

Thank you so much for your time, attention and advices!

Nice work! Good job on replacing width with max-width. You’ve learned a very important concept here when it comes to responsive design.

Using bold instead of underline for links is definitely acceptable and passes accessibility requirements. My only hesitation with this is that you use bold for all of the dates on the page and the color is not that much different than the bold color for the link. Personally, I would either get rid of the bold for the dates or choose a different color for the link that makes it stand out more as a link.

1 Like

Yeah, changing the link’s color might be the best option (even if it doesn’t match the page’s color scheme). I’ll experiment with some colors later.

As my wife has told me many times, “Anything goes with black or gray.” Apparently, I do not have a lot of fashion sense :smiley:

1 Like

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