Membuat Kolom Responsive Dengan HTML dan CSS

Membuat Kolom Responsive Dengan HTML dan CSS - Blogger Agus Tutorial

Kali ini saya ingin sharing tutorial tentang bagaimana cara membuat kolom yang responsive pada website.

Apa itu Website Responsive ?

Website responsive adalah sebuah situs atau sebuah halaman website yang dimana kita bisa mengaksesnya di berbagai device dan situs itu bisa menyesuaikan bentuk halaman sesuai dengan device mulai dari komputer, laptop sampai smartphone. Sebagai contoh saja bisa dilihat gambar dibawah ini :

Membuat Kolom Responsive Dengan HTML dan CSS - Blogger Agus Tutorial

Contoh diatas saya membuka lewat smartphone saya, maka bisa dilihat perbedaan tampilan pada saat di kita membuka di laptop dan melalui smartphone. Untuk membuatnya kita membutuhkan 2 tahap, yang pertama sebuah meta tag yang nantinya berfungsi sebagai pengontrol agar dapat mendeteksi ukuran device yang kita pakai dan tampilan situs kita akan menyesuaikannya. Meta tag yang kita pakai ialah :
<meta name="viewport" content="width=device-width, initial-scale=1">
Cara pakai meta tag diatas ialah cukup letakan tepat ditengah <head> dan diatas <title>Judul</title>.
Tahap kedua, silahkan buat html dan cssnya dulu. Sintak html dan css bisa kamu lihat dibawah ini :

Sintak HTML dan CSS 

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!-- letakan meta viewport disini -->
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Judul Situs</title>
 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"/>
 <style type="text/css">
  *{
   margin: 0 auto;
   box-sizing: border-box;
   font-family: 'Roboto';
  }
  .container{
   width: 90%;
  }
  .text-center{text-align: center;}
  .card {
   background: url('https://onextrapixel.com/wp-content/uploads/2017/05/pattern.jpg') center center;
   height: 20em;
   box-shadow: 0px 0px 5px silver;
  }
  /* membuat pengaturan untuk setiap class col- */
  [class*="col-"]{
   float: left;
   padding: 10px 15px;
  }
  /* @media untuk mengatur saat mendekteksi ukuran browser atau device
  (min-width: 900px) ini artinya pada saat browser ukuran 900px ketas maka .col-4 akan berukuran 33.33%
  bergitu juga lainnya*/
  @media screen and (min-width: 280px) {
   .col-4{width: 100%}
  }   
  @media screen and (min-width: 500px) {
   .col-4{width: 50%}
  }  
  @media screen and (min-width: 900px) {
   .col-4{width: 33.33%}
  }
 </style>
</head>
<body>
 <div class="container">
  <br>
  <br>
  <h1 class="text-center">Membuat Kolom Responsive Dengan HTML dan CSS</h1>
  <br>
  <br>
  <div class="col-4">
   <div class="card"></div>
  </div>
  <div class="col-4">
   <div class="card"></div>
  </div>
  <div class="col-4">
   <div class="card"></div>
  </div>
 </div>
</body>
</html>
Perlu diingat jika kamu ingin copas code diatas maka wajib konek internet, karena disini saya mengambil gambar dan fontgoogle dari internet langsung alias ONLINE. 
Untuk demo dan download silahkan klik dibawah ini :

Ok, sekian dulu sharing ilmu dari saya. Terima kasih sudah membaca artikel ini, jika ada pertanyaan yang ingin teman-teman tanyakan silahkan berkomentar di bawah ini. Happy Coding :)

Comments

Post a Comment

Popular posts from this blog

Membuat Palindrome Checker

Image
Tutorial kali ini saya ingin sharing tentang bagaimana membuat palindrome checker atau bahasa lainnya mendeteksi palindrome itu sendiri, mungkin dari kita belum mengetahui apa itu palindrome checker bukan ? sebelum melihat codenya saya akan membahas sedikit apa itu palindrome. Apa itu Palindrome ? Palindrom adalah sebuah kata, frasa, angka maupun susunan lainnya yang dapat dibaca dengan sama baik dari depan maupun belakang (spasi antara huruf-huruf biasanya diperbolehkan). dikutip dari  :  https://id.wikipedia.org/wiki/Palindrom Logika dari pembuatan program sederhana ini adalah : Kata pertama yang dimasukan disimpan di dalam sebuah variabel A. Lalu variabel A ini kita jadikan sebuah array dan membalikannya dari urutan nilai array terbesar ke terkecil. Hasil pengurutan itu kita simpan di sebuah variabel bernama B. Nah, sekarang kita samakan kata B dan A tersebut dengan menggunakan Kondisi IF. Jika variabel A sama dengan B maka itu disebut Palindrome, jika tidak maka bukan pali...
Read more

Menampilkan Bilangan Genap dan Ganjil dengan PHP

Image
Kali ini masih dengan tutorial yang sama yaitu php, nah pada kesempatan ini saya ingin sharing mengenai cara untuk  Menampilkan Bilangan Genap dan Ganjil dengan PHP . Disini logikanya untuk bilangan genap dan ganjil adalah bilangan genap ialah bilangan yang habis dibagi 2  dan bilangan ganjil ialah bilangan yang tidak  habis dibagi 2 maka akan menghasilkan sisa 1 atau lebih . Maka dari itu disini saya akan menggunakan fungsi Operator Aritmatika yaitu  Modulus ( Sisa Bagi ) yang dilambangkan dengan % . Ok langsung saja silahkan lihat sintaknya dibawah ini : Cara pertama menggunakan for : $genap = ""; $ganjil = ""; for($i=1;$i<=10;$i++){ $i%2==0 ? $genap .= $i." " : $ganjil .= $i." "; } echo "Bilangan Genap adalah $genap<br/>"; echo "Bilangan Ganjil adalah $ganjil<br/>"; /* hasilnya : Bilangan Genap adalah 2 4 6 8 10 Bilangan Ganjil adalah 1 3 5 7 9 */ Penjelasan : Pada sintak diatas terlihat ter...
Read more

Menghitung Jumlah Digit Suatu Karakter PHP

Image
Kembali lagi membahas tutorial tentang php, kali ini saya ingin sharing bagaimana cara  Menghitung Jumlah Digit Suatu Karakter . Disini saya menggunakan fungsi strlen pada php. Apa itu strlen ? strlen adalah sebuah fungsi dari php yang mempermudahkan kita untuk menghitung sebuah deretan angka atau huruf. Sebagai penjelasan dan contoh bisa dilihat dibawah ini : Menghitung digit tipe data integer : $var = 1234567; echo is_numeric($var) ? "Jumlah digit dari bilangan ".$var." adalah ".strlen($var) : 'Bukan Termasuk Angka'; Penjelasan : $var = 1234567 adalah nama variable untuk menampung nilai is_numeric($var) adalah fungsi pada php untuk mengecek apakah data yang ada divariable $var bertipe integer atau bukan, jika bertipe integer maka akan menampilkan jumlah digit, jika bukan maka akan menampilkan Bukan Termasuk Angka . Menghitung digit tipe data string : $var = "ininamaku"; echo is_string($var) ? "Jumlah digit dari huruf $var adalah ".st...
Read more