Hello, I was just wondering how I did on this third web design project. Thanks.
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
bodyelement in the HTML editor. (No need to include thebodytags). 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.- Reference MDN Docs
- 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 
Like this
#submit {
cursor: pointer;
display: block;
margin: auto;
}
Yeah that works 
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.
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)