Tribute to Kobe Bryant, 1st Project

Code Feedback
1

Hi! Just finished my first project, the tribute page.
Please check out the link below if you can and let me know if you have any feedback, I would really appreciate it!
Also, I’m not quite sure if some elements may have moved around due to different screen sizes and will work on fixing that. If anyone has any advice on how to solve this, please let me know. :slight_smile:

-work in progress-

https://codepen.io/Chicken25/full/JjRLmqL

Thanks!

1 Like
2

Hi @vanewu88!

Congrats on finishing your first project.

A few things.

  • There are some errors in your html. Run your code through the html validator.

  • Please do not do inline css styles.
    style: "font-size: 588px;"

  • There is no h7 heading tag. Only h1-6.
    <h7> We love you, Kobe and Gianna <3 </h7>

  • For the image gallery, you have used absolute positioning. So that is why your images sometimes cover all parts of the timeline. I would suggest creating a container for the images and using flexbox for the layout. That way you can just place that container underneath the timeline and it will be responsive.
    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

  • You have one error in your css which relates to the unknown h7 selector.

Hope that helps!

1 Like
3

Thank you so much for all the feedback!!! I will work on fixing them right away, really
appreciate it! :slight_smile:

4

:heart_eyes: :heart_eyes: :heart_eyes:

1 Like
5

Thanks! :two_hearts:

6

Your page looks good @vanewu88. 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.
    • The link to the font goes in the box labeled ‘Stuff for <head>’
    • Mainly mentioning this because you have a few errors in your page such as;
      1. duplicate body elements. There should be only one and everything the browser renders belongs in the body element
      2. links to fonts in the body. Links to fonts would go in the head element.
    • review this for an understanding of the HTML boilerplate tags
  • as noted, run your HTML code through the W3C validator
  • Codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it and address the issue(s).
  • I noticed each time you used a heading tag you went down one. That’s not necessary. You could have left the top one as an <h1> and each subsequent one could be <h2>
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on large and smaller screens
      • The tribute link falls out of the container
  • Some of your timeline info doesn’t fit in the container on large or small screens. Screenshots attached of each
  • When you style your page, start with the narrow view (mobile) design first and then work your way wider, adding breakpoints where needed for the wider design.

Screen Shot 2021-01-04 at 17.46.57
Screen Shot 2021-01-04 at 17.46.571163×527 61.9 KB

Screen Shot 2021-01-04 at 17.48.43
Screen Shot 2021-01-04 at 17.48.43496×612 28 KB

1 Like
7

Thank you so much for the advice and all the feedback! Thanks for taking a look and letting me know all this too! I will get to work on fixing them <3 :blush:

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.