Tutorial belajar css # Mendesain web html dengan css

Zainu.developer Css , Programming , Tutorial ,

Pada tutorial-tutorial sebelumnya kita sudah belajar mebuat kode css untuk mengatur style elemen, membuat animasi, membuat efek transisi serta membuat responsive layout.

Pada tutorial kali ini kita akan mencoba mengimplementasikan css untuk mendesain halaman web html.

Kita pernah membuat web html sederhana pada tutorial lengkap belajar html.

Sekarang kita akan coba membuatnya menjadi terlihat menarik dan modern dengan css.

Yuk kita mulai tutorialnya.

Penting: Sebelum membaca tutorial ini pastikan kalian sudah membaca tutorial mendesain web dengan html.

Membuat desain web dengan software painting

Sebagai acuan ketika kita mulai menulis code css, kita bisa membuat desain web kita terlebih dahulu menggunakan software painting seperti corel draw, adobe ilustrator atau bahkan photoshop.

Disini kita akan membuat web single page dengan struktur yang sudah kita buat sebelumnya pada tutorial membuat web html.

Desain web yang akan kita buat kurang lebih seperti gambar berikut,

Mendesain web dengan css

Disini kita akan menulis code cssnya bagain per bagian dari halaman web.

Kita analisa apa yang harus kita atur dari elemen, kemudian kita tulis kode cssnya sesuai desain yang menjadi acuan tadi.

Kita mulai dari elemen headernya,

Kode css header

Berikut kode css untuk elemen header

#header{padding:3px;margin-bottom:9px;background-color:#006d68;color:white;font-family: sans-serif;}
#header img {vertical-align:middle;margin:3px}
#header h1 {margin:0}

Kode css navigasi menu

Berikut kode css untuk elemen menu

nav{text-align:center;}
nav a{font-family: sans-serif;text-decoration: none;font-weight: bold;color:#006d68;text-align:center;}

Kode css about

Berikut kode css untuk elemen about us

#about{text-align:center;padding:37px;margin:9px 0 9px 0;background-color:#006d68;color:white;font-family: sans-serif;}
#about strong {font-size:28px;}
#about p {line-height:2}

Kode css service

Berikut kode css untuk elemen our service

#service{padding:3px;margin-bottom:9px;font-family: sans-serif;text-align:center;}
#service strong {font-size:28px;color:#006d68;}
.container{display:flex;flex-wrap:wrap;}
.card{margin:3px;text-align:center;padding-top:57px;padding-bottom:57px;background-color:#4f9065;color:white;font-family: sans-serif;border-radius:9px;width:calc(33.333333% - 9px)}
@media screen and (max-width: 600px) {
   .card{width:100%}
}

Kode css contact

Berikut kode css untuk elemen contact us

#contact{text-align:center;padding:37px;margin:9px 0 9px 0;background-color:#006d68;color:white;font-family: sans-serif;justify}
#contact strong {font-size:28px;color:white;}
form{display: grid;grid-template-columns: 93px 250px;display: grid;justify-content: center;align-content: center;gap: 3px;}
input{border-radius:3px;height:24px;border:none}

Kode css footer

Berikut kode css untuk elemen footer

footer{text-align:center;padding:37px;background-color:black;color:white;font-family: sans-serif;}

Dan berikut kode lengkap html dan css yang sudah kita buat tadi

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
      <style>
         #header{padding:3px;margin-bottom:9px;background-color:#006d68;color:white;font-family:sans-serif;text-align:center;}
	 #header img {vertical-align:middle;margin:3px}
	 #header h1 {margin:0}
	 nav{text-align:center;}
	 nav a{font-family:sans-serif;text-decoration:none;font-weight:bold;color:#006d68;text-align:center;}
	 #about{text-align:center;padding:37px;margin:9px 0 9px 0;background-color:#006d68;color:white;font-family:sans-serif;}
	 #about strong {font-size:28px;}
	 #about p {line-height:2}
	 #service{padding:3px;margin-bottom:9px;font-family:sans-serif;text-align:center;}
	 #service strong {font-size:28px;color:#006d68;}
	 .container{display:flex;flex-wrap:wrap;}
	 .card{margin:3px;text-align:center;padding-top:57px;padding-bottom:57px;background-color:#4f9065;color:white;font-family:sans-serif;border-radius:9px;width:calc(33.333333% - 9px)}
	 @media screen and (max-width: 600px) {
	 .card{width:100%}
	 }
	 #contact{text-align:center;padding:37px;margin:9px 0 9px 0;background-color:#006d68;color:white;font-family:sans-serif;justify}
	 #contact strong {font-size:28px;color:white;}
	 form{display:grid;grid-template-columns:93px 250px;display:grid;justify-content:center;align-content:center;gap:3px;}
	 input{border-radius:3px;height:24px;border:none}
	 footer{text-align:center;padding:37px;background-color:black;color:white;font-family:sans-serif;}
      </style>
   </head>
   <body>
      <header id="header">
         <h1><img src="DeretCode.png"  width="49px" /> Deretcode.com</h1>
      </header>
      <nav><a href="#service">About Us</a> | <a href="#about">Our Service</a> | <a href="#contact">Contact Us</a></nav>
      <div id="about">
         <strong>About Us</strong>
         <p>Deretcode adalah blog berisi tutorial pemrograman <br/>dan semua yang berkaitan dengan teknologi informasi.</p>
      </div>
      <div id="service">
         <strong>Our Service</strong>
         <div class="container">
            <div class="card">
               Jasa desain web
            </div>
            <div class="card">
               Jasa Seo
            </div>
            <div class="card">
               Jasa Mencintaimu
            </div>
         </div>
      </div>
      <div id="contact">
         <strong>Contact Us</strong><br/><br/>
         <form>
            <label>Nama</label><input type="text"/>
            <label>Email</label><input type="text"/>
            <label>Pesan</label><textarea></textarea>
            <br/><input type="submit" value="kirim">
         </form>
      </div>
      <footer>
         Copyright © 2020<br/>Template by deretcode.com<br/>
      </footer>
   </body>
</html>

Jika kita perhatikan, kode css yang sudah kita buat, tidak efektif karena banyak properti dengan nilai yang sama ditulis berulang-ulang, jadi kita bisa mengoptimalkannya dengan membuat selector tersendiri.

Contohnya seperti berikut

*{margin:0}
body{margin:0;font-family: sans-serif;text-align:center;}
body > *{padding:3px;margin-bottom:9px;}
#header{background-color:#006d68;color:white;}
#header img {vertical-align:middle;margin:3px}
nav a{text-decoration: none;font-weight: bold;color:#006d68;}
#about{padding:37px;background-color:#006d68;color:white;}
#about strong {font-size:28px;}
#about p {line-height:2}
#service strong {font-size:28px;color:#006d68;}
.container{display:flex;flex-wrap:wrap;}
.card{margin:3px;padding-top:57px;padding-bottom:57px;background-color:#4f9065;color:white;border-radius:9px;width:calc(33.333333% - 9px)}
@media screen and (max-width: 600px) {
.card{width:100%}
}
#contact{padding:37px;background-color:#006d68;color:white;}
#contact strong {font-size:28px;color:white;}
form{display: grid;grid-template-columns: 93px 250px;display: grid;justify-content: center;align-content: center;gap: 3px;}
input{border-radius:3px;height:24px;border:none}
footer{padding:37px;margin:0px;background-color:black;color:white;}

Dan hasil desain web kita akan seperti berikut

Sampai disini tutorial mendesain halaman web dengan css. Silahkan buat desain web kalian sendiri semenarik mungkin.

Jika kalian merasa artikel ini bermanfaat siahkan kalian bagikan.

Jika ada pertanyaan atau ada hal yang ingin disampaikan, tulis di kolom komentar.

Good luck!