[Tutorial] Membuat Website Responsive dengan CSS

5 min readSep 23, 2018

Hal yang pertama lo inget ketika design sebuah website yang lo mau bikin adalah pikirin dulu usernya, apakah dia nyaman dengan warna dari visual yang lo kasih, space atau ruang diantara bagian bagian content,fonts atau typography yang lo kasih, Dan yang terpenting adalah membuat website kita bisa dibuka diresolusi manapun, disini gw akan buat tutorial Membuat Website Responsive dengan CSS di lebar normal 100% web browser dan lebar maksimal 600px, lo bisa explore lagi tentunya dari tutorial ini.

Responsive disini berarti sebuah layout web akan mengikuti / menyesuaikan lebar web browser yang digunakan oleh si user

Normalnya akan seperti gambar diatas , Kemudian akan berubah jika tampilan web browser di PC/Laptop menjadi Lebar minimal 150 pixel dan lebar maximal 600 pixel

Tentunya, Sidebar akan berada dibawah Main-Contentnya,,begitu juga Footer

Langsung saja, Buka text editor lalu copy semua kode dibawah ini

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8"/>
 <title>Membuat Web Responsive</title>
 <link rel="stylesheet" href="style.css" type="text/css">
 <meta name="viewports" content="width=device-width, initial-scale="1">
</head>
<body class="body">
 <header class="mainheader">
  <nav>
   <ul>
    <li class="home" ><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Portfolio</a></li>
    <li><a href="">Contact</a></li>
   </ul>
  </nav>
 </header>
 <div class="maincontent">
  <div class="content">
   <article class="top-content">
    <header>
     <h2><a href="" title="firstpost">First Post</a></h2>
    </header>
    <footer>
     <p class="postinfo">this post written by arby</p>
    </footer>
    <content>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </content>
   </article>
   <article class="bottom-content">
    <header>
     <h2><a href="" title="Second-post">Second Post</a></h2>
    </header>
    <footer>
     <p class="postinfo">this post written by arby</p>
    </footer>
    <content>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </content>
   </article>
  </div>
 </div>
 <aside class="top-sidebar">
  <article>
   <h2>Top Sidebar</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </article>
 </aside>
 <aside class="middle-sidebar">
  <article>
   <h2>Middle Sidebar</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </article>
 </aside>
 <aside class="bottom-sidebar">
  <article>
   <h2>Bottom Sidebar</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </article>
 </aside>
 <footer class="mainfooter">
  <p>Copyright &copy; <a href="#">CYBERTEAM13.COM</a></p>
 </footer>
</body>
</html>

Save dengan nama “Home.html”

Kemudian Copy lagi kode CSS dibawah ini

body {
 background-color: #f5f5f5;
 font-size: 85%;
 font-family: verdana;
 line-height: 1.5;
 }

.body {
 margin:0 auto;
 width: 70%;
 clear: both;
 }

.mainheader nav{
 background-color: #666;
 height: 50px;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 }

.mainheader a {
 text-decoration: none;
 display: inline-block;
 }

.mainheader nav ul li {
 float: left;
 display: inline;
 }

.mainheader nav ul {
 margin:0 auto;
 list-style:none;
 }

.mainheader nav a:link, .mainheader nav a:visited {
 color: #FFF;
 padding: 15px 25px;
 }

.mainheader nav a:hover, .mainheader nav a:active{
 background-color: #383838;
 transition: 1s; 
 }
.mainheader nav .home a:link, .mainheader nav .home a:visited {
 background-color: #CF5C3F;
 }
 
.mainheader nav ul li a{
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 }

.maincontent {
  border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 }

.content a:link , a{
 text-decoration: none;
 color: #CF5C3F;
 }

.content {
 width: 70%;
 float: left;
 }

.top-content {
 background-color: #Fff;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 padding: 3% 5%;
 margin-top: 2%;
 }

.bottom-content {
 background-color: #Fff;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 padding: 3% 5%;
 margin-top: 2%;
 }

.top-sidebar {
 width: 24%;
 background-color: #FFF;
 float: left;
 margin-left: 2%;
 margin-top: 1.5%;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 padding: 2% 2%;
 margin-bottom: 2%;
 }

.middle-sidebar {
 width: 24%;
 background-color: #FFF;
 float: left;
 margin-left: 2%;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 padding: 2% 2%;
 margin-bottom: 2%;
 }

.bottom-sidebar {
 width: 24%;
 background-color: #FFF;
 float: left;
 margin-left:  2%;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 padding: 2% 2%;
 margin-bottom: 2%;
 }

.mainfooter {
 width: 100%;
 height: 50px;
 float:left ;
 margin: 2% 0;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 background-color: #666;
 }

.mainfooter p {
 color: #FFF;
 width: 92%;
 margin-left: 5%;
 }

@media only screen and (min-width: 150px) and (max-width: 600px) {

.body {
 width: 90%;
 } 

.mainheader nav{
 height: 200px;
 }

.mainheader a {
 text-decoration: none;
 }

.mainheader nav .home a:link, .mainheader nav .home a:visited {
  width: 88%;
 }

.mainheader nav a:hover, .mainheader nav a:active{
 width: 88%;
 transition: 1s;
 }

.mainheader nav ul li {
 width: 100%;
 text-align: center;
 } 

.mainheader nav ul {
 margin:0 auto;
 list-style:none;
 padding-left: 0px;
 }

.maincontent {
 overflow: hidden;

 }
.content {
 width: 100%;
 }

.top-sidebar {
 width: 95%;
 margin-left: 0px;
 }

.middle-sidebar {
 width: 95%;
 margin-left: 0px;
 }

.bottom-sidebar {
 width: 95%;
 margin-left: 0px;
 }
 }

Save dengan nama “Style.css” dan letakan keduanya dalam satu folder

Kemudian agan bisa langsung cek sendiri hasilnya

Lalu apa min yang buat sebuah web bisa Responsive??, Yaitu dengan menggunakan Query @media.

@media only screen and (min-width: 150px) and (max-width: 600px)

Perhatikan Kode dibawah ini jika masih bingung ya

body {
 //Tampilan normal web agan
 width: 70%;
 margin:0 auto;
 clear: both;
}

@media only screen and (min-width: 150px) and (max-width: 600px) {
 //Tampilan ketika web browser agan mempunyai  dari lebar 150px dan sampai panjang 600px 
 body {
 width: 100%;
 }
}

Sangat Mudah Bukan??

Oke..segitu saja mungkin dari gue..Jika gueada yang salah ,admin siap dikasih kritik di kolom komentar..dan jika masih ada yang bingung,,bisa bertanya juga

dirangkum dari : https://youtu.be/eOG90Q8EfRo (1stWebDesigner)

Sekian,dan Terimakasih

Semoga Bermanfaat :)

[Tutorial] Membuat Website Responsive dengan CSS

Written by Arby Azra