I'm getting into CSS/HTML by myself. I'm already familiar with many programming languages (C, Java, etc.), but I don't know much about web development, especially about good programming practices when it comes to CSS/HTML. Could you guys please give me some tips and point out what I did wrong? I did kind of a small portfolio just for practicing:main.css/*main css*/html,body,h1,h2,h3,h4,p,div{    padding: 0;    margin: 0;    border: 0;    font: inherit;    font-size: 100%;}body{    background-color: #FFFFFF;}h1{    font-size:3em;    text-align: center;    font-weight: bold;    font-family: Palatino Linotype, Book Antiqua, Palatino, serif;    color: #FFFFFF;    padding: 20px 0 20px 0;}p{    font-family: HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;     color: #222222;     margin: 20px auto 20px auto;    text-align: justify;    max-width: 700px;}.horizontalblack{    background-color: #222222;    padding: 40px 0 40px 0;    max-height: 100px;}.header{    min-height: 150px;    text-align: center;    vertical-align: middle;}.header h1{    font-size: 4em;    color: #000000;}.menu {    min-height: 100px;}.menu h2{    font-size:1.4em;    font-weight: 400;    font-family: HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif; }.menu ul{    padding: 40px 0 40px 0;    max-width: 600px;    text-align: center;    margin: 0 auto 0 auto;    list-style-type: none;}.menu li{    display: inline-block;    padding: 0 5px 0 5px;}.menu li:first-child{    padding: 0 5px 0 0;}.menu li:last-child{    padding: 0 0 0 5px;}main.html<!DOCTYPE html><html>    <head>        <link rel=stylesheet href=normalize.css>        <link rel=stylesheet href=main.css>    </head>    <body>        <div class=header>            <h1>Manoel Ribeiro</h1>        </div>        <div class=menu>            <ul>                <li><h2>About</h2></li>                <li><h2>Projects</h2></li>                <li><h2>Articles</h2></li>                <li><h2>Skills</h2></li>                <li><h2>Contact</h2></li>            </ul>        </div>        <div class=about>            <div class=horizontalblack>                <h1>about</h1>            </div>            <p>                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum vitae dui a elementum. Praesent sed dictum felis. Pellentesque convallis lectus sit amet luctus iaculis. Maecenas euismod felis nisi, eget laoreet lectus aliquet condimentum. Donec dapibus lectus at vehicula sagittis. Sed in fermentum risus, ut finibus dolor. Quisque ut facilisis eros, quis placerat dui. Maecenas posuere tristique nisl, sit amet finibus mauris consequat et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque sapien urna, porta quis ipsum pretium, sodales gravida mi. Integer ultricies, orci luctus dictum tincidunt, dui ipsum finibus turpis, eget gravida dolor velit varius lorem. Donec id turpis vitae tellus elementum viverra a eget tellus. Integer nunc dolor, congue vel velit nec, elementum sollicitudin neque.            </p>            <p>                Etiam lorem nisi, rutrum eu ultricies vitae, consectetur et nulla. Suspendisse at augue vitae ipsum ultrices convallis. Quisque laoreet rutrum augue et rutrum. Sed sit amet purus sollicitudin, ultricies ligula sed, ultricies justo. Curabitur in lacus eleifend leo finibus sagittis vitae vitae lectus. Fusce et felis nisl. Nulla dignissim dolor interdum quam molestie, a auctor ipsum aliquet. Suspendisse accumsan orci urna, vitae facilisis sem luctus ut. Quisque fermentum purus et blandit laoreet. Ut vel fermentum quam, vel pretium justo. Praesent nulla lacus, consequat quis consectetur a, finibus vel ex.            <p>        </div>        <div class=projects>            <div class=horizontalblack>                <h1>projects</h1>            </div>            <p>                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum vitae dui a elementum. Praesent sed dictum felis. Pellentesque convallis lectus sit amet luctus iaculis. Maecenas euismod felis nisi, eget laoreet lectus aliquet condimentum. Donec dapibus lectus at vehicula sagittis. Sed in fermentum risus, ut finibus dolor. Quisque ut facilisis eros, quis placerat dui. Maecenas posuere tristique nisl, sit amet finibus mauris consequat et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque sapien urna, porta quis ipsum pretium, sodales gravida mi. Integer ultricies, orci luctus dictum tincidunt, dui ipsum finibus turpis, eget gravida dolor velit varius lorem. Donec id turpis vitae tellus elementum viverra a eget tellus. Integer nunc dolor, congue vel velit nec, elementum sollicitudin neque.            </p>            <p>                Etiam lorem nisi, rutrum eu ultricies vitae, consectetur et nulla. Suspendisse at augue vitae ipsum ultrices convallis. Quisque laoreet rutrum augue et rutrum. Sed sit amet purus sollicitudin, ultricies ligula sed, ultricies justo. Curabitur in lacus eleifend leo finibus sagittis vitae vitae lectus. Fusce et felis nisl. Nulla dignissim dolor interdum quam molestie, a auctor ipsum aliquet. Suspendisse accumsan orci urna, vitae facilisis sem luctus ut. Quisque fermentum purus et blandit laoreet. Ut vel fermentum quam, vel pretium justo. Praesent nulla lacus, consequat quis consectetur a, finibus vel ex.            <p>                 </div>        <div class=articles>            <div class=horizontalblack>                <h1>articles</h1>            </div>            <p>                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum vitae dui a elementum. Praesent sed dictum felis. Pellentesque convallis lectus sit amet luctus iaculis. Maecenas euismod felis nisi, eget laoreet lectus aliquet condimentum. Donec dapibus lectus at vehicula sagittis. Sed in fermentum risus, ut finibus dolor. Quisque ut facilisis eros, quis placerat dui. Maecenas posuere tristique nisl, sit amet finibus mauris consequat et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque sapien urna, porta quis ipsum pretium, sodales gravida mi. Integer ultricies, orci luctus dictum tincidunt, dui ipsum finibus turpis, eget gravida dolor velit varius lorem. Donec id turpis vitae tellus elementum viverra a eget tellus. Integer nunc dolor, congue vel velit nec, elementum sollicitudin neque.            </p>            <p>                Etiam lorem nisi, rutrum eu ultricies vitae, consectetur et nulla. Suspendisse at augue vitae ipsum ultrices convallis. Quisque laoreet rutrum augue et rutrum. Sed sit amet purus sollicitudin, ultricies ligula sed, ultricies justo. Curabitur in lacus eleifend leo finibus sagittis vitae vitae lectus. Fusce et felis nisl. Nulla dignissim dolor interdum quam molestie, a auctor ipsum aliquet. Suspendisse accumsan orci urna, vitae facilisis sem luctus ut. Quisque fermentum purus et blandit laoreet. Ut vel fermentum quam, vel pretium justo. Praesent nulla lacus, consequat quis consectetur a, finibus vel ex.            <p>             </div>        <div class=skills>            <div class=horizontalblack>                <h1>skills</h1>            </div>            <p>                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum vitae dui a elementum. Praesent sed dictum felis. Pellentesque convallis lectus sit amet luctus iaculis. Maecenas euismod felis nisi, eget laoreet lectus aliquet condimentum. Donec dapibus lectus at vehicula sagittis. Sed in fermentum risus, ut finibus dolor. Quisque ut facilisis eros, quis placerat dui. Maecenas posuere tristique nisl, sit amet finibus mauris consequat et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque sapien urna, porta quis ipsum pretium, sodales gravida mi. Integer ultricies, orci luctus dictum tincidunt, dui ipsum finibus turpis, eget gravida dolor velit varius lorem. Donec id turpis vitae tellus elementum viverra a eget tellus. Integer nunc dolor, congue vel velit nec, elementum sollicitudin neque.            </p>            <p>                Etiam lorem nisi, rutrum eu ultricies vitae, consectetur et nulla. Suspendisse at augue vitae ipsum ultrices convallis. Quisque laoreet rutrum augue et rutrum. Sed sit amet purus sollicitudin, ultricies ligula sed, ultricies justo. Curabitur in lacus eleifend leo finibus sagittis vitae vitae lectus. Fusce et felis nisl. Nulla dignissim dolor interdum quam molestie, a auctor ipsum aliquet. Suspendisse accumsan orci urna, vitae facilisis sem luctus ut. Quisque fermentum purus et blandit laoreet. Ut vel fermentum quam, vel pretium justo. Praesent nulla lacus, consequat quis consectetur a, finibus vel ex.            <p>                         </div>              <div class=contact>            <div class=horizontalblack>            </div>        </div>              </div>    </body></html>
HTML/CSS simple website
html;css
HTMLValidityYou can validate your HTML code here. It found these issues:head must contain a titleyou have one too many closing div tagsHTML5As you are using HTML5, you should think about using the newly available structuring elements (section, nav, article, aside, header and footer), instead of using generic divs.So for example:<div class=header> could be <header><div class=menu> could be <nav>the various subsections could use <section>, with each of them containing a <header>The definitions of article and section are still a little vague as I understand them, so your document could also look like this:<head></head><body>    <header>        [header]    </header>    <nav>        [menu]    </nav>    <section>        <article>            <header>                <h1>about</h1>            </header>            <p>                [content]            </p>        </article>        [...]    </section></body>CSSValidityYou can validate your CSS here. It found no formal issues with your CSS code at all. Congrats :)Formattingsometimes, your spacing is off (eg font-size:3em; is missing a space).you have some newlines that don't make so much sense.Miscpadding: X Y X Y; could be simplified to padding: X Y;StyleI like the style of the website. It might be a bit too simplistic, but the general direction is good.But if the screen of the user is too wide, the black bars that span all the way across the screen might be a bit heavy on the eye.