Materi Design Web: Membuat layout sederhana dengan HTML dan CSS

Assalamu'alaikum Wr Wb

pada kesempatan hari ini saya akan menjelaskan tentang cara membuat layout sederhana dengan HTML dan CSS. langsung saja untuk yang pertama silahkan buat Folder untuk menyimpan projectnya agar tidak terpencar.
Ketikkan program di bawah ini lalu simpan dengan nama style.css

body{
 background-color:magenta;
 padding:0px;
 margin:0px;
}

.wrap{
 background: blue;
 width: 900px;
 margin: auto;
}

/*bagian header*/
.wrap .header{
 background-color:black;
 height: 150px;
 padding: 5px 10px;
 color:red;
}

/*akhir header*/

/*bagian navigasi*/
.wrap .nav{
 background: yellow;
}

.wrap .nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #77f442;
}

.wrap .nav li {
    float: left;
}

.wrap .nav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.wrap .nav li a:hover:not(.active) {
    background-color: #111;
}

.wrap .active {
    background-color: #4CAF50;
}
/*akhir menu*/

.clear{
 clear: both;
}

.badan{
 height: 450px;
}
/*bagian sidebar*/
.wrap .badan .sidebar{
 background: orange;
 float: left; 
 width: 20%;
 height: 100%;
 padding:10px;
}

/*akhir sidebar*/

.wrap .badan .content{
 background: white;
 float: left;
 height: 100%;
 width: 75.5%;
    padding:10px; 
}

.wrap .footer{
 width: 100%;
 padding: 10px;
}

Untuk scrip HTMLnya, ketikkan skrip di bawah ini, lalu simpan dengan nama index.html

 
 

 





MY WEB KU


ini hanya latihan



Home
Profil
foto saya
About





Sidebar
anggap aja ada isinya





Selamat Datang di My Web
semoga sukses






copyright@2017 annur

untuk tampilan awalnya adalah sebagai berikut

silahkan tinggal di edit tampilannnya, untuk mengedit warna, background bisa di edit di bagian style.css.
oke sampai sini dulu,,, tinggal di edit edit isi contentnya terserah kalian
Trimakasih
Wassalamu'alaikum Wr Wb