Product Landing Page project!

Hello, here is my 3rd web page project with FCC.

The main problem that i’ve faced here, is anchors positioning as you see on the link below:
Link

I’ve followed a tutorial for the anchor that send the page to the top! Should i do the same with the others ? or is there any better solution?

Feedbacks are welcome!
Thanks

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

  • With codepen, the link to the font goes in the box labeled ‘Stuff for <head>’
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Check that a valid email has been entered. If not, give an HTML5 error.
  • You learned to do this when you made the survey form
1 Like

Thank you for your help i think i’ve managed to fix all the bugs through W3C!
Is this error message is ok ? Error : Element head is missing a required instance of child element title .

From line 1, column 1; to line 1, column 20

<header id="header">↩ <na

The problem now is the video takes all the width of the page! I tried to give it a max-width value but it does not work! Should i use a JS solution instead?!

Thank you!

Well i’ve fixed the issue of the video by wrapping it all inside an other div:

<div class="video-wrapper">
  <div id="howitworks" class="responsive-video">
    <iframe id="video" src="https://player.vimeo.com/video/407342228" width="640" height="360" allow="autoplay; fullscreen" allowfullscreen></iframe>
  </div>
</div>

is it considered as a good code to do so?

Hey @ahmed512! This project is so good! I like the clean design and it matches Netflix. But, you can improve a few things:

  • I like smooth scrolling a lot. So, add this line of code to your CSS: html { scroll-behavior: smooth; } and click on the links on the header. Now you can see a really cool scrolling effect.
  • Try changing the color of the text and icons of the features section to white. It is more easy to read.
  • You included the FCC test suite in the head tag! You should not do so. Instead, add the script tag linking to the test suite before your header element, that is, at the top of your HTML code.
  • In mobile devices, making the header fixed would be annoying. Let it be normal for mobile-only.

That you don’t need to worry because they are tags that are outside the body tag and you don’t need to specify those in CodePen. But, if you are working outside CodePen, you need to specify the entire markup: from <!DOCTYPE HTML> to </html>.

Did you see any error in the validator for this?

It is ok to wrap your iframe around a div.

Anyway, the project is wonderful and the design and layout are so neat. Thumbs up!

1 Like

Hi @ahmed512,

Yes, it’s okay. In my post I said when copy/paste from codepen it’s okay to ignore the first warning and first two error messages as codepen provides them behind the scenes.

Again, this message is because there is no head element since you copy/paste from codepen. This is the second error I said you could ignore.
Yes, in the body the header is correct and you’ve used it correctly.

1 Like

Thank you for your feedback i’ve added! The scroll and changed the color to white too! It made more improvement to it!

No it was no error on validator! I was just thinking, if it was ok to code it that way!

  • I was thinking to add a background like in the official netflix account, but i feel i’m not so confident using backgrounds, i need to relearn it again! If there is a good tutorial don’t hesitate to send me!

  • Also i’m thinking to try to include some soft animations too, i think it can help make better design in general!

1 Like

I see, thank you again for your help i appreciate it :smile:
That helped me correct some coding imperfections!

1 Like