Product-landing page29

Code Feedback
1

hey guys i finally done my project please feedback on this project and i will try ti fix that issues https://codepen.io/sammm29/pen/ExPJZBp .i hope you guys help me a lots

regards:@sam

2

Hey, good job on making your product landing page!

Here are a couple of things I think you should look at in your html.

Two things I noticed in CSS.

  • You used a custom property without defining it first in your root:.
  • Your header img width is being sized with vh instead of vw. https://snook.ca/archives/html_and_css/vm-vh-units
  • Take some time to research what makes a website responsive and how you can add it to your page.

Keep it up and don’t stop learning!

3

Hello @sammm29!

Nice job getting your page started. I would offer a couple things to look at.

  1. You have an @media started but then end it almost immediately. If this was done on purpose and the rest on the css wasn’t supposed to be a part of it then I would suggest keeping @media either at the beginning or end but not in the middle.
/*for small devices*/
@media only screen and (max-width: 520px) {
  #mr {
    position: fixed;
  }
}  <—————you ended your media query
#box3 {
  padding: 15px;
  max-width: 50px;
  margin: auto;
  border-radius: 10px;
  text-align: center;
  1. Stop using pixels for everything and start using relative units. Pixels are an absolute unit and therefore not responsive. A lot of your widths and margins have huge pixel amounts. I’d change them to a relative unit.

Overall great job getting started on this one!

4

thanks for help buddy :smiling_face_with_three_hearts:

5

thanks for help dude :star_struck: :heart_eyes: :smiling_face_with_three_hearts:

6

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

  • 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.
  • Don’t use <br> to force spacing or line breaks. That’s what CSS is for.
  • Make your page responsive. On smaller screens there’s a horizontal scrollbar, items fall out of the container.
2 Likes
7

thanks dude for helping me :wink:

8

@Roma Very helpful tip on break. Thanks for the link. Now I know the proper usage of break element :smiley: Otherwise I was using it unnecessarily everywhere :joy:

1 Like