Comments welcomed

Code Feedback
1

https://codepen.io/19alema/pen/VwjgBwy

2

Hi @19alema!

Congrats on finishing your product page. A few things.

  1. Your page should have a title. I had to scroll down to the footer to see the name samsung.

  2. Your video is not displaying because it was not embedded properly. Make sure to click on share, embed, then copy.

  3. There are a few issues within your html that need your attention.
    https://validator.w3.org/

  4. It would be nice to have all of the products are in one line for larger devices.

Hope that helps!

3

@19alema A few things that I saw…

  • In the location section of your page you had a typo. Favourate should be spelled favorite.
  • Next thing I saw was that your navbar didn’t span the whole screen.
  • @jwilkins.oboe talked about the embed on your page.
    • When making the embed, pause the video make sure you haven’t watched any of the video and then embed it. I am starting the video at 23 seconds into it.
  • The last thing I saw that could use some improvement is your little boxes with the product in them. They all have the same ID which is not the best practice. They also don’t appear on the same line.

Just some things to work on. Happy Coding! :smile:

4

Hi @19alema, some things to revisit;

  • Run your HTML code through the W3C validator. (I’d advised you to use this when looking at your other projects. It a good tool that you should keep and use.)
    • There are HTML coding errors you should be aware of and address.
    • Among the other issues remember, an id must be unique within the document.
  • This line margin-left:50rem; in your nav ul selector causes half of your links to not display to the user
  • Make your page responsive. Remember, the R in RWD stands for Responsive.
    • There’s a horizontal scrollbar on smaller screens.
1 Like
5

Thanks for the suggestion…
But how can I make my page responsive…
Because that concept , am not getting it well…

6

Thank for the suggestion but can please tell me how I can make the nav bar span the whole screen…

7

Looks as though you’ve accomplished this.

First thing is to use the W3C validator and correct the issues with your HTML code. It’s hard to work with broken code.

For responsiveness,

  • Get familiar with the box methodology. Once you realize everything you see on a webpage is just a box you need to move around and resize, things will start to click. Add the following to the top of your CSS to outline every element to see what’s going on if having trouble with something.
* {
  border: solid 1px red;
}

Use the narrow first approach when styling.
That means narrowing the browser as much as possible and then styling so the page is legible and with no horizontal scrollbar. Then widen the browser slowly and see where it makes sense to change the flow of the page…not everything needs to be stacked as the viewport widens.

Review the media query lesson.

2 Likes