First Project Completed

Code Feedback
1

My ever first project-tribute page is completed!
Please take a look at this :https://codepen.io/mahimabmahesh/full/dyGXEym
Expecting your feedback :slightly_smiling_face:

2 Likes
2

Congrats on your first project. I’ll gently give you a few suggestions to get you started and then others can chime in as well.

  • The first thing I noticed is that it is very hard to read most of the content on the page. The blue text on that background does not have enough color contrast to be accessible. Generally, white on black is accessible but you aren’t using a pure white and you also have turned down the opacity to 80% which makes it even harder to read. Also, the background is not pure black, so any time text is over a bunch of stars or the galaxy in the middle it is basically unreadable. You have a very tough background to put text on. I think you might have to add a solid background color underneath the content so that it is readable.
  • You appear to be using a couple of different font types for the content. Is there a reason for this? I think consistency is probably the better option here.
  • You have quite a bit of text content on your page, which is great, but it is hard to read because the line length will stretch as wide as the browser. Put a max-width on your content so that the line length doesn’t get too long. Personally, I would set the max-width using ‘em’ units.
3

Thank you for your suggestions. I’ll check it and make it correct
:slightly_smiling_face:

4

Please, can you check it once again? Is this ok?
https://codepen.io/mahimabmahesh/full/dyGXEym
Should I do anything else in it?

5

hi @MahimaMahesh

just a quick review,
instead of manualy sets every #tribute-link0 to 8 id selector, it would be more simple to merges those properties with the .back class selector, since all of them have the same class in your html.

and you can get rid the repetitions of tribute link id selector which have back class selector.

6

Yes. I tried it :smiley:
Thanks for your review :slightly_smiling_face:

1 Like
7

hi again,

try to use the codepen analzye tool, it have great works to find your coding errors in css.

happy coding

8

Ohh! I’m new to use codepen and I don’t know how it works :slightly_frowning_face:
Can you please explain me about it , if you don’t mind :slightly_smiling_face:

9

you have typo or missed the s on property grid-template-columns ,

and you dont need to add semicolon at your media 800px;

Summary

_20200619_205138
_20200619_2051381768×846 180 KB

10

I’ll try to correct them.
Thank you :slightly_smiling_face:

11

Yes, the content is much easier to read now and the font is consistent. I would still suggest you put a max-width on the content however so that the line length doesn’t get too long.

12

I’ve corrected that now :slightly_smiling_face:

13

Page looks good @MahimaMahesh. Something to revisit;

  • Don’t use <br> to force line breaks or spacing. That’s what CSS is for. If you want multiple paragraphs, use multiple paragraph elements. If want extra spacing, use padding and/or margin.
14

Thanks for your feedback. I will correct my mistakes. :slightly_smiling_face: