Tribute Page Feedback Andrej

Code Feedback
1

Any tips and feedback would be hugely appreciated

I am fairly new to coding so am trying to learn as much as possible.

Thanks,

Andrej

Here is the link to the code: https://codepen.io/drdre5/pen/OJyzZBW

2

Love the colors and it looks really nice.
I would add some padding at the very top and the bottom. The footer should be glued to the bottom as you did it, but it would look better if there was a bit of space between letters and the edge of the website.
Did you want to have list bullets? Because on the bigger screens they are visible in front of the table, not as a part of the table.
It also doesnā€™t look so nice on small devices: the table doesnā€™t look nice as well as the quote.
You can easily check if it looks okey, when you choose editor layout with code on the left and ouput on the right. You can make the editor wider and then you can see how your website would look like on smaller screens.

4

Ok thank you so much for your help and feedback!!!

1 Like
5

Your page looks good @andrejjj222. Some things you should revisit;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).
    • The test script should be included, with all tests passing, when you submit your projects.
  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are coding errors you need to address.
  • Donā€™t use <br> to force spacing. Use margin and/or padding in CSS.
  • Review the lesson about giving meaningful text to links.
  • As mentioned, you need to work on the responsiveness
7

Ok thank you thatā€™s a very thorough response and very helpful. I am just confused about a few things.

  1. What do you mean ā€œThis Siteā€ is not accessible? When I click on it, it takes me to the site.
  2. How come I should ignore this errorā€“> Element head is missing a required instance of child element title ?
  3. What is the best way to learn to build responsive websites / what part of my website is not responsive and whats the best way to check how responsive your website is. Also I am confused as to how many pixels you put as the min and max width for the media queries.

Thanks,

Andrej

8

Thatā€™s not what accessible means. Read the provided article.

Because codepen provides the boilerplate for you and all it expects is the code youā€™d put in the body element. If you want to add the title element in codepen then click on the ā€˜Settingsā€™ button, then HTML and add it into the ā€˜Stuff for <head>ā€™ box.
You can read codepenā€™s official documentation

The easiest way to see if your page is responsive is to grab the right side and drag it to the left, narrowing it. If you see things fall out of their containers you know itā€™s not responsive.
Use Developer Tools in Chrome. Firefox has tools. Iā€™m not good at describing how to access them (plus itā€™s a lot to type) so itā€™s best if you use Google. Youā€™ll learn how to access and use them.

1 Like
9