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:
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.
I couldnât get the video responsive (youtube iframe) by myself, I found this code:
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.
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;)
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.
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.
@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.
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.