Landing Page Feedback

Code Feedback
1

Ok, I finally finished my landing page certification project. I would appreciate your feedback to improve it or improve my skills, you can check it at:

Let me tell you some things that I feel uncomfortable with:

  1. When you click on any link of the nav-bar, it gets you to the corresponding section, but the top of the section renders behind the header (which is sticky), depending on the width of the viewport, the title of the section could fall behind the header. Thats an undesirable behaviour.
    I think I could solve it setting an offset, but it should behave as height of the header, that is: depends on the width of the viewport. But maybe there is an easy way to solve it, like stacking bellow the end of the header “property” lol. I don’t know.

  2. I couldn’t get the video responsive (youtube iframe) by myself, I found this code:

.video-container {
    overflow: hidden;
    position: relative;
    width:100%;
}

.video-container::after {
    padding-top: 56.25%;
    display: block;
    content: '';
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

It works but only with the settings in ::after selector. I tried to understand it, checked info in w3 about the selector and I understand the concept, even played with ::after settings in dev tools, but finally I didn’t understand why it works ONLY with those settings.

  1. The CSS code from the above numeral, renders the video over the header bar when you scroll down the page, I know this happens when the .video-container have position: relative. The way I solved it was setting z-index: 1; in header. What I don’t understand is why setting the .video-container to relative position modify the z-index of that
    (even when in dev tools is rendered as z-index: auto;)

    Please let me know your thoughts.

    Thank you.

2 Likes
2

Amazing design, Keep going.

3

Hi @andrescaroc, your page looks good. Some things to revisit.

  • Your page passes 15/16 user stories. The nav bar should always be at the top, not scrolling off with the page.
  • On using codepen. codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to your font would go in the box labeled ‘Stuff for <head>’
  • 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.
    • typo’s in HTML and CSS affect how your page renders
  • when the user clicks the submit button they should get an error if the email field is not filled in. You learned how to do this with the survey form.
1 Like
4

Thanks @Roma and @Mohammad_Sami for taking the time to review it!

There was a typo in the position of the header position: sitck; now is position: sticky;. The pen passes 16/16 user stories when submitted, I don’t know when the code lost the ‘y’ of sticky, maybe I forgot to save. ¿Could you check the problem number 1 on the main post again please?

I didn’t know that, now I have cleaned the code.

Nice tip, I had a typo. Now is clean.

Ok, I had a validator for email address structure using regex, but I forgot to add required. Now I think is correct.

Thank you guys again.
Regards

1 Like
5

@andrescaroc, it looks a lot better. Nice job! Note, however, that when a link in the nav bar is clicked, the top part of that section is covered by the nav bar. Perhaps a little padding will help.
I also just noticed, no matter what screen size I view your page at, there’s always a horizontal scroll bar.

6

@Roma

Yes, that is the 1st problem of my main post, a little padding will help for sure, but that padding is going to make larger spaces when scrolling down.
Is there a way that when a link in the nav bar is clicked, the top part of that section starts at the end of the header (sticky) element?

Yes, I don’t know why, do you know why?.
I just googled it and found that adding css overflow-x: hidden; to the body will eliminate that horizontal scrollbar.

Thanks a lot, I think these little adjustments make me a better web dev.