Product landing page finished - Advice/tips etc

Code Feedback
1

Hi guys,

At last, my landing page here. When starting these challenges I thought they’d take maybe a day but it’s taking me much longer. It’s frustrating, I’m posting loads of questions but eventually I figure things out.

Web development so far feels like 1 step forward 5 steps back. :smiley: It’s so tough, everything single thing is delicately intertwined with everything else.

Anyway, I’d love any advice, what I could have done better, how could I have made the HTML/CSS more lean etc etc?

Cheers

1 Like
2

Hey @oocopperpot!
I like your project,

Good job.

1 Like
3

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

I’d suggest doing a search on “universal reset” to see why and how it’s used. Briefly, the main purpose of it is to compensate for differences between browsers. For the inheritance you’re using it for perhaps the body would be a better choice.

That said;

  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens
    • 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. Temporarily, add the following as the first line in your CSS;
* {
  border: solid 1px red;
}

You’ll be better able to see how the images are falling outside of the .container on smaller screens.

1 Like
4

Many thanks, appreciated.

5

Thank you, I used your border trick for the majority of it. Was super useful.
I’ve gone back and adjusted the images inside of the boxes.

When you say there;'s a horizontal scrollbar, this seems to be intermittent because when I enter “inspect”, the ‘responsive’ tab shows everything being responsive but sometimes if I click iphone for example, it’ll have a scroll bar.

  1. My nav seems to be hanging off the right and space on the left.
  2. Using the red border I see it’s the video causing the scroll bar on smaller screens (I hope)
6

I love your product landing page. Great job!

1 Like
7

Thank you for viewing. :smiley: