A Fun Product Landing Page! Feedback wanted

Heya,

For my Product Landing Page project I decided to go with a more fictional theme, specifically imagining it as a page for the T-45 Power Armor from the Fallout series. It was fun, and I’ve learned a lot (and it’s made clear certain areas that I need to learn more of).

The page on desktop I think I’ve gotten to a decent point, but things crash and burn a bit on the mobile side. I’m learning how to use media queries to do that, but am stuck somewhat on the issue of resizing both the nav bar and the initial header/intro text to a smaller size. Any advice would be appreciated!

https://codepen.io/BrennasBrenna/full/LYpoKep

1 Like

My dad would love this! i am going to show this to him when he gets off work.

Looks great, one thing you could fix is since you already have same container for everything, add container inside the footer aswell and add background to that container instead so its the same size as everything else, and the other thing i noticed, you can add align-items: center; in wrapper thats inside nav to align those links, having flex-wrap: wrap; there doesn’t do anything for you right now. Also what’s the issue u have with resizing?

Will definitely look into that. The issue I’m having with the resizing is that I’m not exactly sure how to make the nav bar smaller. On mobile it takes up a large chunk of the screen. I’ve messed around with height a bit and been able to shrink it somewhat, but even then it’s still overlarge.

looks great, loved it

Super useful link, thank you!

Page looks good @Brena. Some things to revisit;

  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are HTML coding errors you should address. (You can ignore the warning about adding section headers if you want)

Quite a few of the errors you get are because you’re doing this;

<section class="capabilities">
  <section id="capabilities">

And when you do you’re not closing one of the section elements. But you don’t want to do that. You don’t want a section within a section. What you should be doing is this;
<section id="capabilities" class="capabilities">
You can have an id and a class together. But, and this is a big but, what you don’t want is them having the same name. An id will overrule a class in CSS so be careful of styling when they both have the same name.

  • check that the email field is populated correctly when clicking the submit button. Throw an error if it is blank or incorrect. You learned to do that when you made your survey form.
  • 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 HTML misses things which is why I recommend W3C
    • The one for CSS is good. Use it, there’s a couple of typo’s that will affect your page. (you may have to run it more than once.)
  • Make the page responsive. There’s a horizontal scroll bar on anything other than a desktop