Tribute page with css only!

Code Feedback
1

After more than 2 weeks spent on learning the Responsive Web Design lessons, I came up with my first web-page! Please, if you have the patience, take your time to read my code (is a lot of it :upside_down_face:) and tell me if I wrote it correctly or not. Alse I don’t mind any criticism on the design, colors, etc., as it enables me to do better. Thanks a lot guys!
William Wilberforce

1 Like
2

Hi @tompenguin, your page looks good. Some things to revisit;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>). Your page passes 1/10 user stories.
  • On using codepen. codepen only expects the code you’d put within the <body> </body> tags 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.
    • The footer element would be within the body. Run your code through this validator to show some other things you should clean up. Just copy your HTML and paste it into the ‘Validate by Direct Input’ tab.
1 Like
4

Nevermind the last message. I’ve fixed the spelling errors ( the ids had _ instead of the -) and added the max-width to my image. Thanks for the feedback you’ve given me .

5

Good job!
Last thing, your footer and script elements (in that order) should come before your closing body tag.

1 Like
6

Your font size is not accessible. I have to widen my browser a whole lot just to be able to read it. And I can’t use ‘text only’ zoom to make the font bigger. You should not force font size on the user. The user should be able to set the font size as big as needed.

7

Thank you very much! I’ve corrected that aswell. I thought the footer should be a separate element :grimacing:.

8

I think you are now between the mobile view and the desktop view which should be some kind of tablet view, which, is true I did not take all the time to make because I thought is not really usefull. But can you tell me what resolution are you using, and if you can see it better when you make it smaller? Thanks for your feedback!

9

I’m not trying to be a jerk here, so please take this with a grain of salt, but it doesn’t matter how I am viewing the page. The point is that you should allow me to use whatever font size I need in order to be able to read the content. The way you are doing it now, the font size is dependent on the viewport width, which does not allow me to manually increase the size font size. The only way I can increase it is to widen my browser window and I can only widen it so far, so you have basically imposed a max font size on me.

If you are just beginning your journey here then I understand that these sorts of issues may not be as important to you right now. If you do end up doing web development professionally then chances are that whatever you do will need to pass accessibility requirements. And there is never a better time to learn than the present, which is why I am bringing this issue up.

3 Likes
10

Thank you for your feedback. I do not mind because I was just experimenting with that unit. I will stick to rem for font-size from now on.

11

Wow! This is an impressive work!

This page isn’t made of only css, but you used a lot to make it great!

I have never seen a tribute page that looks like this before! It has such a creative design.

I also cannot believe how well this page adjusts when viewed on differently sized screens.

Great job and keep up the great work!

1 Like
12

@ConnerOw1115 thank you very much for those kind words. It means a lot to me. You’re awesome!

1 Like
13

So are you. You’re welcome.

1 Like