Untuk membuat website responsive dengan HTML, CSS, dan JavaScript, Anda bisa mengikuti langkah-langkah berikut:
Persiapkan semua assett dan file design yang sudah Anda siapkan. Anda bisa menyimpan file-file tersebut dalam folder yang terpisah untuk setiap halaman website.
Buat struktur HTML untuk semua halaman website. Anda bisa mulai dengan membuat file HTML untuk setiap halaman, kemudian tambahkan tag-tag HTML yang diperlukan seperti
<html>,<head>, dan<body>.Tambahkan elemen-elemen yang diperlukan pada setiap halaman, seperti judul, navigasi, konten, dan footer.
Tambahkan CSS untuk mengatur tampilan elemen-elemen pada website. Anda bisa menambahkan file CSS dengan menggunakan tag
<link>di dalam<head>HTML, atau menambahkan style secara inline dengan menggunakan atributstylepada elemen HTML yang diinginkan.Tambahkan JavaScript jika diperlukan untuk menambahkan fitur interaktif pada website. Anda bisa menambahkan file JavaScript dengan menggunakan tag
<script>di dalam<head>atau<body>HTML.Test website Anda di berbagai ukuran layar untuk memastikan bahwa website terlihat baik di kedua desktop dan mobile. Anda bisa menggunakan fitur “Responsive Design Mode” pada browser atau dengan menggunakan perangkat mobile untuk menguji tampilan website.
Selesai! Anda sudah berhasil membuat website responsive dengan HTML, CSS, dan JavaScript. Selamat mencoba!
Berikut ini adalah contoh struktur HTML dan CSS untuk website yang responsive:
Silahkan copy code berikut dengan nama index.html (Homepage)
<title>Homepage - Website Donasi</title>
<header>
<div class="container">
<h1>Website Donasi</h1>
<nav>
<ul>
<li><a href="#">Tentang Kami</a></li>
<li><a href="#">Pelayanan</a></li>
<li><a href="#">Publikasi</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</nav>
<a href="#" class="btn btn-primary">Login</a>
<a href="#" class="btn btn-secondary">Daftar</a>
</div>
</header>
<main>
<div class="container">
<h2>Selamat Datang di Website Donasi</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ornare, dui in consectetur elementum, lacus quam aliquet erat, eu malesuada neque magna et lectus. Cras maximus, sem a tincidunt aliquam, orci metus placerat lorem, a faucibus purus felis ac diam. Sed luctus, magna non pellentesque pretium, nulla nibh maximus dui, in dapibus elit mauris nec turpis. Sed dictum felis non enim tempus, ut ullamcorper ligula porttitor. Vivamus sollicitudin, justo non auctor faucibus, lacus nulla vestibulum diam, id luctus eros purus quis lorem. In euismod congue dictum. Duis porta cursus tellus, at tincidunt leo. Nam eu porta ligula.</p>
<a href="#" class="btn btn-secondary">Baca Selengkapnya</a>
</div>
</main>
<footer>
<div class="container">
<p>Copyright © 2021 Website Donasi</p>
</div>
</footer>
Silahkan copy code berikut dengan nama style.css
/* Reset Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Typography */
body {
font-family: "Helvetica Neue", sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
}
h1, h2, h3, h4, h5, h6 {
font-family:"Montserrat", sans-serif;
font-weight: bold;
}
/* Layout */
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 20px;
}
/* Header */
header {
background-color: #eee;
}
header .container {
display: flex;
align-items: center;
justify-content: space-between;
}
header h1 {
font-size: 24px;
}
header nav {
display: flex;
}
header nav ul {
display: flex;
list-style: none;
}
header nav ul li {
margin-right: 20px;
}
header nav ul li a {
text-decoration: none;
color: #333;
font-size: 14px;
}
header .btn {
display: inline-block;
padding: 8px 16px;
border: none;
border-radius: 4px;
font-size: 14px;
text-decoration: none;
color: #fff;
}
header .btn.btn-primary {
background-color: #333;
}
header .btn.btn-secondary {
background-color: #eee;
color: #333;
}
/* Main */
main {
padding: 80px 0;
}
main h2 {
font-size: 36px;
margin-bottom: 20px;
}
main p {
font-size: 16px;
line-height: 1.5;
margin-bottom: 20px;
}
main .btn {
display: inline-block;
padding: 8px 16px;
border: none;
border-radius: 4px;
font-size: 14px;
text-decoration: none;
color: #fff;
background-color: #333;
}
/* Footer */
footer {
background-color: #333;
color: #fff;
}
footer .container {
display: flex;
align-items: center;
justify-content: center;
height: 80px;
}
footer p {
font-size: 14px;
}
/* Responsive Styles */
@media (max-width: 992px) {
header nav {
display: none;
}
header .btn {
display: block;
margin-top: 20px;
}
}
