# Upper section of a vertical single-page website

This is my very first attempt to write HTML and CSS. I designed this website for a friend. I'm not sure if I used the best practices or maybe I did something wrong but I just started my learning process so I would love a review to point bad practices and things I could have done better or I did wrong.

This is meant to be the first section (above the fold) of a vertical single-page website.

* {
font-family: Open Sans;
margin: 0px
}

background-color: rgb(236, 100, 62);
height: 615px;
}
/* logo and nav look aligned on the original file :c */
#logo {
position: relative;
margin-left: 40px;
top: 30px;
}

text-decoration: none;
font-size: 12px;
font-weight: bold;
color: white;
text-transform: uppercase;
margin-right: 40px;
float: right;
}

a.nav:hover{
border-width: 0px 0px 3px 0px;
border-style: solid;
}

color: white;
text-align: center;
line-height: 1.2;
margin-top: 150px;
}

h1{
font-size: 60px;
margin-bottom: 30px;
}
<html lang="pt-br">
<title>Empreendi na Rede</title>
<meta charset="utf-8">
<meta name="author" content="Luciano Infanti">

<body>
<div id="logo">
<img src="https://s31.postimg.org/4esz43xaj/empreendipngwhite.png" height="35">

<nav>
<a class="nav" href="#">Solucoes</a>
<a class="nav" href="#">Metodologia</a>
<a class="nav"  href="#">Sobre nos</a>
<a class="nav"  href="#">Depoimentos</a>
<a class="nav"  href="#">Clientes</a>
<a class="nav"  href="#">Contato</a>
</nav>

<h1>A consultoria empresarial<br> acaba de ser redefinida</h1>
<p id="kicker">Aliquam et placerat lacus. Donec pharetra nibh a placerat tincidunt.<br>
Integer viverra nisl dolor, in viverra enim sollicitudin nec.</p>
</div>
</body>
</html>

## HTML validation

Always include a doctype declaration. These days, HTML 5 is recommended, so the document should start with <!DOCTYPE html>.

The <div id="logo"> is unclosed. That would likely explain your vertical alignment issues.

The <meta charset="utf-8"> declaration should occur as early as possible, preferably immediately after the opening <head> tag, because the charset affects how all text in the document is interpreted. It would be better not to make the browser re-parse the <title>.

The <img> tag must have an alt attribute. The omission of the alt attribute is unacceptable here, especially since the image contains text. It is odd that the logo has a height attribute but no width.

## HTML semantics

The <br> inside the <h1> is not appropriate, since it is there for styling. I would go with a width rule in CSS, using em as the measurement unit so that it scales with the font size.

Writing class="nav" in every navigation link, though harmless, seems excessive. These elements could be selected in CSS using nav > a instead.

It's unclear which of the <nav> links, if any, takes you back to the "home" page.

## CSS

The * selector is excessive. If you want to set a font for the page, a body rule should suffice.

In #PageHeader, you set a background-color. It would be a good idea to also set the color at the same time. A comment saying /* white text on orange */ would be nice. You should specify color: white on the links too, in such a way that applies even to visited links.

When you float each nav link to the right, the visual order ends up backwards relative to the DOM order. I would rather float the entire <nav>. It would be a good idea to specify a margin-left on the nav so that it will not overlap the logo if the page is too narrow.

body {
font-family: Open Sans;
margin: 0px
}

background-color: rgb(236, 100, 62);
color: white;
height: 615px;
}
/* logo and nav look aligned on the original file :c */
#logo {
position: relative;
margin-left: 40px;
top: 30px;
}

nav {
float: right;
margin-left: 200px;
}

nav > a {
text-decoration: none;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
margin-right: 40px;
color: white;
}

nav > a:hover {
border-width: 0px 0px 3px 0px;
border-style: solid;
}

color: white;
text-align: center;
line-height: 1.2;
margin-top: 150px;
}

font-size: 60px;
margin-bottom: 30px;
margin-left: auto;
margin-right: auto;
width: 15em;
}
<html lang="pt-br">
<title>Empreendi na Rede</title>
<meta charset="utf-8">
<meta name="author" content="Luciano Infanti">

<body>
<div id="logo">
<img src="https://s31.postimg.org/4esz43xaj/empreendipngwhite.png" height="35">
</div>
<nav>
<a href="#">Solucoes</a>
<a href="#">Metodologia</a>
<a href="#">Sobre nos</a>
<a href="#">Depoimentos</a>
<a href="#">Clientes</a>
<a href="#">Contato</a>
</nav>

<h1>A consultoria empresarial acaba de ser redefinida</h1>
<p id="kicker">Aliquam et placerat lacus. Donec pharetra nibh a placerat tincidunt.<br>
Integer viverra nisl dolor, in viverra enim sollicitudin nec.</p>
</div>
</body>
</html>

Just passing by, most of the modifications have been highlighted by other reviewers but there are few things I will like to mention here -

1. You can improve on the css for the h1 tag. When specifying the font-size use em rather pixels.

“Em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. The advantage of using em's in web documents are due to scalability and their mobile-device-friendly nature.

Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). Although, it is popularly used because it produces a pixel-perfect representation of most websites as it is rendered in the browser. the disadvantage of this is that pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.

This are things you want to take into consideration

PS: this nice explanation was gotten from CSS Font Size

I have copied the default css for h1 tag from w3schools H1 element is

h1 {
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}


can be extended to

    h1 {
font-size: 3.75em;
margin-bottom: 1.875em;
}


based on the conversion 1em gives 16px , so 60px is 3.75 em.

1. Using the asterisk for specifying a font-family for the document is not the best way to go champ!! be selective
p {
font-family: Open Sans;
margin: 0px
}


except you want all the fonts in your webpage to look like this.

1. When using a Google font, best practice is to always have a fallback font in case your browser can not interpret it . For instance
p{font-family:"Open Sans", Times, serif;}

1. Please refrain from using names like "kicker" for an id. In general it's best to have a more meaningful name
2. Media Queries : It's sad that your beautiful website lacks media queries. The catch is when the dimension reduces your header is messed up. It will be nice to have them in your code.
• Thank you for your help! I just barley started learning HTML/CSS but I promise I'll do my best to apply what you guys are teaching me! If you don't mind, I have a few questions: 1. I heard about em but I wasn't really sure of how to use it. I'll read your link and learn about it 'cause it seems to be super awesome! 2. I do want all my fonts to be Open Sans. I thought using * would be a smart move 'cause that would require less coding. 3. Thanks for the advice! 4. What if the meaningful name is a big one? Would that be a problem? 5. I still have to learn Media Queries. – Mr. Uselessrobot Jul 21 '16 at 14:29

Few best practices

• Don't use css ID to define style-sheets rather have classes. ID's are used to locate elements
• use css pre-parsers like Sass/Less that can give you control in writing css in efficient manner
• organise your code / css into multiple files for e.g have a global.css & define all your global classes in that file & have module specific css in respective file

• Better go for Responsive web design using mobile-first approach. Adapt any framework like bootstrap/foundation to accomplish.

• Use HTML5 semantics which you seems to be followed

• provide alternative ( alt ) tag for images. see if you can use it as a background image by defining a class.

• For navigation , use list structure ( ul & li )

Hope this helps to improve your code upto some extent.

• Thanks for your answer. If you don't mind I would like to ask a few questions about what you just said. * You said I should use classes instead of ID's, right? But shouldn't I be using ID's to apply very specific style-sheets? Or I got that part wrong? * I just started learning HTML/CSS. Should I start learning Sass/Less? Or do you think it would be better to master those two first? * I tried to do so but I failed. I do not have a Mac so I can't use Jekyll to do that and I have no idea how to do that on Windows (specially 'cause I barley know HTML/CSS) – Mr. Uselessrobot Jul 21 '16 at 4:59