Product Landing Page_

Hello, I was just wondering how I did on this third web design project. Thanks.

https://codepen.io/gtrman97/pen/jOVpzLw

2 Likes

Hi @gtrman97 !

I think your page looks good.

Remember to have alt attributes in all of your img tags.

I would add cursor pointer to the submit button.
You might consider adding a smooth scroll to the page.

Sometimes the text is a little hard to read for me on the darker background

Hope that helps!

And also don’t forget to validate your email with codepen so we can se the full view

Ok great thanks will do!

Your page looks okay @gtrman97. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Run your HTML code through the W3C validator.
    • There is an HTML coding error you should be aware of and address. FCC teaches and you should be using HTML5.
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens. The video does not scale.

I don’t often comment on styling because I’m not the best at it but some things you may want to reconsider;

  • Multiple lines of little text spanning the width of a page is not a good UX
  • Dark text on a dark background is hard to read. Another bad UX
  • Having the a transparent background makes links hard to see or they’re obscured by the background text. This is a bad UX

I do this mainly in case I want to copy and paste it into visual studio code.

I got rid of them but now submit and email are side by side. I tried using the margin property like your link states but it only sets them further horizontally apart and doesn’t set them on top of each other.

Are you referring to the lang attribute or <!DOCTYPE html>? Or the frameborder attribute being obsolete?

How do fix this?

This seemed to fix it. Is it right?

#video {
  padding-bottom: 10px; 
  margin: auto; 
  height: 100%;
  max-width:100%; 
}

So make it the same width as headers or video?

So I just added a background color to the nav-bar.

That is because input are inline elements. You need to make a change to the display :grinning:

Like this

#submit {
  cursor: pointer;
  display: block; 
  margin: auto;

}
1 Like

Yeah that works :grinning:

In the pen there’s an export button which puts in the boilerplate elements that codepen provides behind the scenes.

Instead of using <br> elements to have each inline element on a new line, use or set container elements to be block-level elements so they’ll each take up the full width.

The obsolete frameborder attribute. This is HTML5.

What I mean by this is that on desktop devices having text span from one side of the screen to another is not a good UX. It’s hard on the human eye to go back and forth like that. And the font-size being small exacerbates that.

Someone here told me that to get the video to play on the page you copy the embed code from youtube and paste it in so that’s what I did. It looks like that obsolete attribute was in their code.

But now when I get rid of frameborder I have these weird empty rectangles on the top and bottom of the video.

https://codepen.io/gtrman97/pen/jOVpzLw

So you took away the obsolete frameborder attribute but you didn’t use CSS to style the #video, that’s why you’re seeing what you’re seeing. If you style it in CSS it will look the same as when the obsolete attribute was used.
And the “weird empty rectangles” aren’t just around the top and bottom, it’s on the sides too. After you removed the obsolete element, the border now shows. (That’s a partial hint as to what you need to use in CSS. A little research should help you resolve it)