Cara Membuat Responsive WEB dengan HTML CSS

Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini saya akan membahas tentang Cara Membuat Responsive WEB dengan HTML CSS.
Kalau biasanya kita membuat responsive web menggunakan framework seperti bootstrap, bulma, lessframework.com, cssgrid.net dan lain sebagainya maka pada tutorial kali ini saya akan membuat responsive design menggunakan natif HTML + CSS.  Untuk membuat responsive design menggunakan natif HTML + CSS yang pertama kali kita lakukan adalah membuat struktur html seperti script dibawah ini.

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script type="text/javascript">
	
	/* JavaScript Media Queries */
if (matchMedia) {
    const mq = window.matchMedia("(min-width: 500px)");
    mq.addListener(WidthChange);
    WidthChange(mq);
}

// media query change
function WidthChange(mq) {

    const msg = (mq.matches ? "more" : "less") + " than 500 pixels";
    document.getElementById("current").firstChild.nodeValue = msg;

}
</script>
	<div id="page">
		<h1>JavaScript Media Queries</h1>

		<p>Current design: <strong id="current">unknown</strong></p>

		<section>
		  <div class="element">element one</div>
		  <div class="element">element two</div>
		  <div class="element">element three</div>
		</section>

	</div>
</body>
</html>

Oke kita telah berhasil membuat struktur HTML untuk membuat Responsive WEB dengan HTML CSS. Nantinya kita akan membuat responsive seperti menggunakan framework, jadi web yang akan kita buat ini bakal menyesuaikan tampilannya di dalam layar tampilan seperti smartphone, tablet, dan dekstop.  Oke sekarang kita akan membuat CSS dari struktur HTML di atas:

	body
{
    font-family: arial, sans-serif;
    font-size: 100%;
    margin: 10px;
    color: #222;
    background-color: #dfd;
}

#page
{
    min-width: 200px;
  height: 100%;
    padding: 20px 30px;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid #999;
}

section
{
    width: 100%;
    margin-bottom: 3em;
}

div.element
{
    text-align: center;
    padding: 10px 0;
    margin: 4px;
    background-color: #dfd;
    border: 2px solid #666;
}

h1
{
    font-weight: normal;
    margin: 0 0 1em 0;
}

strong
{
    color: #c00;
}

@media all and (min-width: 500px) {
  body
{
    background-color: #ddf;
}

#page
{
    max-width: 600px;
}
  
section:after {
  content: "";
  display: table;
  clear: both;
}

div.element
{
    float: left;
    width: 30%;
    padding: 30px 0;
    background-color: #ddf;
}
}

Oke kita telah berhasil membuat css dari Cara Membuat Responsive WEB dengan HTML CSS. Untuk melihat hasilnya silahkan teman – teman lihat sendiri di dalam browsernya.