Cara Membuat Website Responsive Dengan HTML dan CSS

Pada artikel kali ini, saya akan membahas cara membuat website responsive dengan HTML dan CSS. Sebelum mengikuti tutorial ini, setidaknya kamu sudah memahami dasar HTML dan CSS agar lebih mudah. Tapi tenang, bagi kamu yang baru belajar membuat website dengan HTML dan CSS akan saya jelaskan sedetail mungkin.

Cara Membuat Website Responsive Dengan HTML dan CSS

Dalam membuat website yang responsive, setidaknya dibutuhkan HTML dan CSS dalam pembuatannya. Tentu website yang akan saya buat sudah support diberbagai perangkat mulai dari Mobile, Tablet dan Desktop. Berikut tampilan website yang akan saya buat.

Nah bagaimana menurut kamu mengenai project yang akan kita buat bersama - sama ? menarik bukan ? Pastikan kamu mengikuti tutuorial membuat website responsive dengan HTML dan CSS ini sampai akhir ya. Tak perlu berlama - lama lagi, langsung aja masuk ke persiapan membuat website responsivenya.

Apa yang harus saya persiapkan ?

Sebelum mulai membuat bottom navbarnya, ada beberapa persiapan yang harus kamu lakukan, diantaranya berikut ini :

  • Siapkan Text Editor (Saya sendiri menggunakan Sublime Text)
  • Siapakan Browser (Saya menyarankan Chrome atau Firefox)
  • Buat folder project dengan nama website-responsive / bebas
  • Buat file HTML dengan nama file index.html atau sesuai keinginan kamu
  • Buat file CSS dengan nama file style.css atau sesuai keinginan kamu
  • Buat file Javascript dengan nama file main.css atau sesuai keinginan kamu

Jika semua persiapan sudah dilakukan, kamu bisa mengikuti langkah selanjutnya.

Cara Membuat Website Responsive

Jika semua persiapan sudah kamu lakukan. Langkah selanjutnya, kamu bisa mendekalarasikan tag HTML pada file index.html.


Mendeklarasikan Tag HTML

Sebagai permulaan, silahkan deklarasikan tag html seperti dibawah ini.


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Website Responsive</title>
</head>
<body>
	
</body>
</html>


Koneksikan File CSS

Selanjutnya, yang harus kamu lakukan adalah mengkoneksikan file css ke file index.html. Hal ini dilakukan agar bisa melakukan styling pada file html nya nanti.



<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Website Responsive</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	
</body>
</html>


Koneksikan File Javascript

Selanjutnya, kamu harus mengkoneksikan file Javasript agar bisa diakses oleh index.html. Berikut cara untuk mengkoneksikan file js ke html.



<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Website Responsive</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	

	<script src="main.js"></script>
</body>
</html>


Struktur HTML dasar Website Responsive

Sebenarnya untuk struktur HTML website responsive sangat beragam. Setiap orang memiliki cara masing - masing agar websitenya bisa responsive Bagi yang baru pertama kali membuat website responsive, kamu bisa mengikuti cara yang akan saya bagikan nanti.



<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Website Responsive</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="wrapper">

	  <nav class="nav"></nav>

	  <main class="content"></main>

	  <section class="sidebar"></section>

	  <footer></footer>

	</div>

	<script src="main.js"></script>
</body>
</html>


Struktur HTML Navbar

Setelah berhasil membuat struktur dasar untuk pembuatan website responsive. Langkah selanjutnya, kamu bisa membuat bagian navbarnya terlebih dahulu.



		<nav class="nav">
			<div class="brand">
				<a href="">Infokuy</a>
			</div>
			<svg class="burger" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
			<div class="menu">
				<a href="#">About</a>
				<a href="#">Contact</a>
				<a href="#">Privacy Policy</a>
				<a href="#">Disclaimer</a>
			</div>
		</nav>


Struktur HTML Content

Lanjut kebagian content, silahkan copy struktur html dibawah ini.


<main class="content">
			<div class="content-area">
				<div class="card">
					<div class="card-img">
						<img src="./assets/dogs.jpg" alt="">
					</div>

					<div class="card-content">
						<h3>Love Dog's</h3>
						<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima fugit nam dicta autem eos, iure ex, dolor tenetur voluptas...</p>
					</div>
				</div>
				<div class="card">
					<div class="card-img">
						<img src="./assets/snow.jpg" alt="">
					</div>

					<div class="card-content">
						<h3>Winter Love</h3>
						<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima fugit nam dicta autem eos, iure ex, dolor tenetur voluptas...</p>
					</div>
				</div>

				<div class="card">
					<div class="card-img">
						<img src="./assets/duck.jpg" alt="">
					</div>

					<div class="card-content">
						<h3>Duck Party</h3>
						<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima fugit nam dicta autem eos, iure ex, dolor tenetur voluptas...</p>
					</div>
				</div>
				<div class="card">
					<div class="card-img">
						<img src="./assets/love.jpg" alt="">
					</div>

					<div class="card-content">
						<h3>Love you so much</h3>
						<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima fugit nam dicta autem eos, iure ex, dolor tenetur voluptas...</p>
					</div>
				</div>
			</div>
		</main>


Struktur HTML Sidebar

Lanjut kebagian sidebar, silahkan copy struktur html dibawah ini.



	<section class="sidebar">
			<div class="sidebar-area">
				<div class="about-me">
				  <img src="./assets/restu.jpg" alt="">
				  <h4>Restu Kersana</h4>
				  <span>Pengen hidup enak.</span>
				</div>
			</div>
		</section>


Struktur HTML Footer

Lanjut kebagian footer, silahkan copy struktur html dibawah ini.



	<footer>
			<h4>Infokuy Blog's</h4>
			<span>Dibuat oleh Restu Kersana</span>
		</footer>


Tambahkan Style pada Websitenya

Setelah berhasil membuat struktur HTML website responsivenya, langkah selanjutnya yang harus kamu lakukan adalah memberikan styling pada website tersebut agar bisa reponsive untuk semua device. Nah berikut kode css yang harus kamu tambahkan ke file style.css.



* {
  padding: 0px;
  margin: 0px;
  list-style: none;
  quotes: none;
  text-decoration: unset;
  outline: none;
  border: none;
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
  scroll-behavior: smooth;
}

body {
  height: 100%;
  width: 100%;
  max-width: 1200px;
  position: relative;
  margin: 0px auto;
  overflow-x: hidden;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.nav {
  grid-column: span 12;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  box-shadow: 0 1px 10px rgba(0,0,0,0.1);
}

.nav .brand {
  font-size: 1.2rem;
  font-weight: bold;

}

.nav .burger {
  width: 30px;
  cursor: pointer;
}

.nav .menu {
  width: 100%;
  padding-top: 10px;
  max-height: 0;
  visibility: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  transition: all .3s ease;
  opacity: 0;
}

.nav .menu.active {
  max-height: 30rem;
  visibility: visible;
  opacity: 1;
}

.nav .menu a {
  padding: 10px 0;
}

.content {
  padding: 20px;
  grid-column: span 12;
}

.content-area {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap:10px;
  place-items:center;
}

.content-area .card {
  grid-column: span 12;
  width: 100%;
  height: auto;
  display: flex;
  margin: 10px 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.1);
  cursor: pointer;
}

.card-img {
  width: 100%;
  height: 100%;
}

.card-img img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-content {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  padding: 0 10px;
}

.card-content h3 {
  padding: 10px 0;
  font-size: 1.2rem;
  font-weight: bold;
}

.card-content p {
  padding: 10px 15px 15px 0;
  font-size: .9rem;
  font-weight: normal;
}

.sidebar {

  grid-column: span 12;
  padding: 20px;
}

.sidebar-area {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
  place-items:center;
}

.about-me {
  grid-column: span 12;
  width: 300px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.1);
  text-align: center;
    margin: 10px 0;
}

.about-me img {
  width: 100px;
  height: 100px;
  border-radius: 1000px;
  object-fit: cover;
}

.about-me h4 {
  padding: 10px 0;
}

.about-me span {
  padding: 5px 0;
}

footer {
  grid-column: span 12;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

footer h4 {
  font-size: 1.5rem;
  padding: 10px 0;
}

footer span {
  color: grey;
  font-size: .95rem;
  padding: 5px 0;
}

@media screen and (min-width: 620px) {
  .content-area .card {
    grid-column: span 6;
  }
}

@media screen and (min-width: 768px) {
 .wrapper {
  padding: 0 10px;
 }
}

@media screen and (min-width: 1024px) {
  .content-area .card {
    grid-column: span 6;
  }


  .content {
    grid-column: span 9;
    padding: 20px 20px 20px 0;
  }
  .sidebar {
    grid-column: span 3;
  }

  .about-me {
    width: 250px;
  }
}


Tambahkan Javascript untuk Menjalankan Navbar

Agar burger pada website yang kita buat bisa berjalan, kamu harus menambahkan sedikit javascript agar burger bisa menampilkan menu pada website.



const burger = document.querySelector('.burger')
const menu = document.querySelector('.menu')

burger.addEventListener('click', function() {
 menu.classList.toggle('active')
})


Berikut Hasilnya

Berikut adalah hasil website responsivenya telah kita buat bersama - sama. Bisa kamu lihat sendiri bahwa website ini sudah responsive di semua device baik mobile, table, dan dekstop.

Website Responsive Mobile
Mobile

Website Responsive Tablet
Tablet

Website Responsive Dekstop
Desktop


Penutup

Berikut pembahasan mengenai cara membuat website responsive dengan html dan css. Bagaiman menurut kamu megenai tutorial diatas, apakah cukup membantu kamu dalam membuat website yang responsive ? Silahkan berikan tanggapan di kolom komentar ya.

Terimakasih telah berkunjung ke infokuy, nantikan artikel menarik lainnya seputar css hanya di infokuy.

Restu Kersana Calon Jenazah, pengen hidup enak tapi gini - gini aja.

Belum ada Komentar untuk "Cara Membuat Website Responsive Dengan HTML dan CSS"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel