Responsive Web Design Project - Tribute Page

Code Feedback
1

Hi guys!

I have recently just finished the first Responsive Web Design Project - the tribute page.

I would appreciate if you could take a look https://codepen.io/ToothlessCube/pen/eYJdBxe and let me know your thoughts.

Criticism and advice welcome!

Thanks in advance! :stuck_out_tongue:

2

The page is very nice and the design is great.
My only suggestion is to use relative instead of absolute font sizes since the text seems so large on my phone.

This is not a requirement, and all in all, your page itā€™s very good.

Good luck an happy coding.

3

I really like the typography. Itā€™s an attractive design. Personally I think the red as the main background color is a bit too intense for the eyes. A potential improvement is to clean up details in your CSS like trailing white spaces - color: #FFF ; and some selectors have a space after them and before the bracket and some do not. Ex: #main{} vs .title {}.

4

@anon43350554 Great, thank you for the advice! I will definitely look into that. :slight_smile:

5

@skyeaoki Great, thank you for your advice! :slight_smile: The main reason for the red background is because itā€™s the colour of the Labour Party (who Jeremy Corbyn was the leader off) , but can definitely see why it comes across as quite intense.

I will have a look through my CSS and clean it up, as now you have mentioned it I can see quite a few that have spaces etc.

6

Thank you for sharing your project. I just started on the same one, and Iā€™m happy to see good examples.

It looks great, though I do agree the red background is a bit too bright, maybe more of a brick-red color.

7

Looks great overall. I would make the background less of a bright red and then change the font size. The h1 should be larger than the text below it.

8

@cherylm Great, thank you for your feedback!

Good luck with your project :slight_smile:

9

@SpringStep Great, thank you for your feedback! :slight_smile:

10

Your page looks good @ToothlessCube. Some things to revisit;

  • 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 the <head> element click on the ā€˜Settingsā€™ button, then HTML and add it into the ā€˜Stuff for <head>ā€™ box.
    • Mentioning because you have elements out of order. Everything the browser displays belongs in the body element. The meta and title elements you have in header is incorrect. They belong in the head element which is outside the body element.
  • Itā€™s not a good idea/accessible to skip header levels. Go from h1 to h2 to h3, etc but donā€™t jump.
  • 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 HTML coding errors you should address.
  • Review the lesson about giving meaningful text to links.

For further study, use this to understand the tags in HTML boilerplate

11

Just a few suggestions:

  • Donā€™t skip heading levels (you are jumping from h1 to h4).
  • Move the <a> out of the <ol> (place it below the list, perhaps in a <p>) and as stated above, make the link text more meaningful than ā€˜click hereā€™.
  • Technically, you should have an alt attribute on the image. Since you are using a figcaption you could just set it to an empty string.
12

@ToothlessCube

Looks good I like how you did the list.

13

Great, thank you for the feedback!

I will have a look at everything you have suggested, it is much appreciated. :slight_smile:

14

Thank you! :slight_smile:

15

Great, thank you for your feedback! :slight_smile: