cara membuat layout website sekaligus penjelasannya

Assalamualaikum Wr. Wb.

A.Pendahuluan
Salam sejahtera bagi kita semua .
B.Pengertian
    Layout Website adalah roses penataan tata letak atau pengaturan objek-objek yang terdapat dalam suatu halaman, sedangkan desain merupakan proses imaginasi dan kreasi seseorang di dalam mengekpresikan dan menciptakan suatu keindahan, ini tentunya memerlukan estetika dan cita seni yang tinggi.
Layout meliputi penyusunan dan pembagian tempat dalam suatu halaman. Tata letak dan susunan yang baik dapat membuat tampilan halaman lebih menarik, rapid an seimbang, sehingga enak di lihat dan mudah di baca
C.Latar belakang
    ingin meluruskan kepada semua ,karena banyak yang mengartikan dalam pembuatan layout website.
D.Pembahasan

Elemen Header
    Seperti namanya, merupakan elemen yang berisi judul dan penjelasan lain dokumen. Biasanya elemen ini diisikan dengan logo website, menu-menu global (seperti login dan logout), maupun nama halaman yang sedang ditampilkan.
Elemen Navbar
    Elemen navigasi, yang memberikan akses navigasi ke halaman-halaman lain dalam web.
Elemen Sidebar
    Elemen pendukung konten, dapat berupa pembantu navigasi konten, ataupun berbagai hal lain seperti daftar konten lain, iklan, atau menu tambahan. Sidebar dapat berada di kiri atau kanan konten, atau bahkan di kiri dan kanan konten, sesuai dengan kreatifitas perancangnya.
Elemen Konten
    Isi utama dari dokumen web. Pengguna biasanya datang ke web untuk melihat teks yang berada pada bagian ini.
Elemen Footer
    Bagian penutup dari website, yang dapat saja berisi informasi lain tentang website, seperti lisensi pengunaan, sitemap, ataupun link ke website lain.

berikut source kodenya

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Layout</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="wrapper">
   <div class="header">
    <h1>Header</h1>
   </div>
   <div class="navbar">
    <h1>Navbar</h1>
   </div>
   <div class="konten">
    <h1>Konten</h1>
   </div>
   <div class="sidebar">
    <h1>Sidebar</h1>
   </div>
   <div class="footer">
    <h1>Footer</h1>
   </div>
</div>
</div>
</body>
</html>

dan berikut source css

* {
padding: 0;
margin: 0;
}
body {
background: #D9D9D9FF;
}
.wrapper {
width: 1010px;
height: 600px;
background: red;
margin:auto;
}
.header {
width: 1000px;
height: 100px;
background: blue;
margin: 5px;
}
.navbar {
width: 1000px;
height: 45px;
background: grey;
margin: 5px;
}
.konten {
width: 690px;
height: 390px;
background: green;
margin:0 5px;
float: left;
}
.sidebar {
width: 300px;
height: 390px;
background: yellow;
float: left;
margin:0 5px;
}
.footer {
width: 1010px;
height: 51px;
background: #4CACFFFF;
margin-top: 400px;
}

dan al hasil berada diatas.

E.Waktu
30 menit
F.Hasil yang diharapkan
   paham akan kegunaan dan cara layout website
G.Refensi
w3school
H.penutup
Sekian dan terima kasih

Wassalamualaikum Wr. Wb.