Product Landing Page header help and feedback

Tell us what’s happening:
So I’ve been trying to create the project as it is shown in the project description. I’m almost done with the project, except header. The header has position:fixed as required by the project but after giving the fixed value, I can’t seem to use the flex properties on the navbar. I checked the code of the project codepen and its doing the same thing, however it doesnt work for me. Other than that, if you have any feedback, please reply. Thanks!

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:81.0) Gecko/20100101 Firefox/81.0.

Challenge: Build a Product Landing Page

Link to the challenge:

Welcome to the forums @prathameshkamath2999. Some things to revisit;

  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address. Although these aren’t so much what’s causing your issues.
  • 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.
    • The one for CSS is good. Use it, there are typo’s you need to correct.
    • (The one for HTML misses things which is why I recommend W3C)

Additionally,

  • The samples are just that. Examples of one way the project can be completed. You don’t have to recreate them. Come up with your own. The instructions say to make your page “functionally similar” and to “give it your own style”.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.

Thanks for the tip regarding validators, I used those and fixed the issues in my HTML and CSS! I still can’t figure out how to fix the navbar, where I can use the fixed position as well as flex properties. Any help would be appreciated!

Everything on your webpage is a box. Try adding this to see how things are set up on your page;

* {
  border: solid 1px red;
}

Reference this to get familiar with the box methodology.

Hi @prathameshkamath2999,

Personally, I had been stuck on the navbar for the last couple of days and I’m finally at a point where I actually understand why I’m adding in the code I’m adding.

I found a tutorial on flexbox really helpful for gaining a good understanding on how and when to use flexbox. https://www.youtube.com/playlist?list=PL4cUxeGkcC9i3FXJSUfmsNOx8E7u6UuhG (sorry for no hyperlink)

I’d recommend following along with the Net Ninja as it was great practice. As @Roma mentioned adding in a border( or background) to your containers. Initially, while designing the site it can be a big help when it comes to visualising what it is you’re affecting with your code.

While at first I tried to use the given example as a reference, learning and understanding flexbox in CSS helped a lot with this fixed navbar problem. There are also many follow alongs on YouTube that could help you build a fully responsive mobile landing page.

Finally, don’t be afraid to start fresh! Tomorrow I’ll be starting my 4th attempt at the landing page. Each time my code is more refined as I gain a deeper understanding on what is going on.

Good luck!