Inilah Rahasianya! Cara Membuat Web Responsive Dengan HTML dan CSS

Restu Kersana
18 Mar, 2023

Pada artikel kali ini, saya akan membahas cara membuat web 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.

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.

Oh iya, saya juga telah menuliskan cara membuat form login html yang bisa kamu ikuti dengan mudah. 

Disana kamu akan diberitahu cara membuat form login yang responsive itu seperti apa.

Nah bagaimana menurut kamu mengenai project yang akan kita buat bersama - sama ? menarik bukan ? 

Pastikan kamu mengikuti cara membuat web 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>

Baca Juga : Cara Membuat Card Responsive Dengan HTML & CSS

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>

Baca Juga : Cara Membuat Bottom Navbar Dengan HTML dan CSS

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;
  }
}

Baca Juga : Cara Hosting Ke Netlify, Gak Pake Lama

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.




Ketika memanfaatkan grid css, membuat web responsive akan sangat mudah dilakukan. Selain menggunakan grid, kita juga membutuhkan Media Query untuk mengatur layout yang spesifik untuk setiap device. 

Baca Juga : 10 Hosting Web Statis Terbaik dan Gratis

Setelah mengetahui ini, cara membuat web responsive bukan perkara yang sulit lagi. Teknik di atas sering saya lakukan ketika melakukan slicing desain ke coding.

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.

Baca Juga : Kelebihan dan Kekurangan Hosting Gratis yang Perlu Diketahui

Restu Kersana

Restu Kersana

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

Next Post Previous Post
No Comment
Add Comment
comment url