My First Project - Tribute Page With A Different Design

Code Feedback
1

Although at first I was guided by the example page, then I decided to create something different with the knowledge I had acquired. Obviously it was much more complex, it took longer and I had to investigate much more, but the results I obtained were as expected. I hope you take a little moment of your time review my code and design. I await your suggestions. Thank you!

Codepen Link: Tribute Page

2

Good Job :clap:!!! Just for the memes, Where is Kyle Musk or as people know X Æ A-12 :laughing:. Anyways. A couple tips

  • You should pass your code into the W3C Validator, there is a couple of errors there.
  • The paragraph texts font can be bigger to improve readability.

Overall, Great Work!!!

3

First thing that pops out at me is that you are using view port units for the font size. This is an accessibility issue, you don’t want to do that. Use ‘em’ (or ‘rem’). When you use view port units then the size of the font is determined by the height/width of the browser. Currently the p.p2s are set to a font size of 2.6vh. What if I need to make the text size bigger? The only way I can do that right now is to increase the height of the browser. But what if I can’t do that? You see the problem. Using ‘em’ allows the user to increase the text size on the page manually as much as they need to no matter how wide/tall the browser window is.

4

Thank you very much for reviewing so quickly. I already checked the bugs and fixed them, you were right. by the way I just saw the X Æ A-12 gave me a lot of laughter! :joy:

1 Like
5

Thank you very much for reviewing my project. You are right, I was not very clear on the issue of font size. Your response has made it clearer to me. I’ll get to work on it.

6

Welcome to the forums @rumertovar7474. 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 8/10 user stories.
    • The test script should be included, with all tests passing, when you submit your projects.
  • Use external styling for everything, no in-line styling
7

Thanks for the welcome. I already fixed the errors, now I have 10/10 in the test and I don’t see any more in-line styling in my code. Please, if there are any more comments or other suggestions, let me know. That would help me a lot, in this new path, which I am really enjoying. Thank you!