Öncelikle hayırlı olsun. Menüleri <div> yerine <li> ile yapmalısın. Bunun için:

<div class="menu">
<ul>
<li><a hreF="#">Menü</a></li>
<li><a hreF="#">Menü</a></li>
</ul>
</div> ekleyeceksin. CSS 'e ise :

.menu{width:200px; height:auto;} /* 200px genişliğinde menü isimli bir div */
.menu ul{margin:0px; padding:0px;} /* <ul> kodumuz için boşlukları kaldırdık. Bunu li de belirteceğiz*/
.menu li{list-style:none; margin:0px: padding:5px;} /* Liste stili yok. Yani başındaki küçük nokta ve padding 5px */
.menu li:a{background-color:#000; color:#FFFFFF;} /* bu da menüdeki link yapın */
.menu a:hover{background-color:#fff; color:#000;} /* Üzerine gelince */

Bunların Yanında:

• En fazla 4 adet <div id=""></div> eklemelisin. Üst - İçerik - Sağ - Alt olarak 4 temel div id. Geri kalanı div class ile yapmalısın. Zaten aynı şey fakat w3 en fazla 4 kullanın diyor, ama kullanın diyor.

+ div class kullanmak yerine, yapacağın şeyi <p> kodu ile yapabilirsin. Örn:

<p class="sagustyazi"><h1>Yazıyı Buraya yaz.</h1><h2>Altına Geçip Bunu Yaz</h2><h3>Bi Alta Geç ve Bunu yaz.</h3></p>

ondan sonra başında # ya da " . " olmadan direk

p.sagustyazi{genişlik ve yükseklik ayarları} - Ardından:
p.sagustyazi h1 {margin:0px; padding: 2px; font-size:20px;}
p.sagustyazi h2 {margin:0px; padding: 2px; font-size:15px;}
p.sagustyazi h3 {margin:0px; padding: 2px; font-size:12px;}

h kullanmak yerine <span> <font> <hr> gibi şeyleride p.sagustyazi şeklinde yapabilirsin.

Kodların hiçbirini denemedim fakat çalışması lazım. Daha yolun başındasın. Çok güzel şeyler çıkartacaksın. Tekrar hayırlı olsun