Tutorial Cara Membuat Aplikasi Dari Handphone l bang ikhwan tutorial
 |
| Kode pemrograman |
Selain itu, kami juga menyediakan tautan untuk mengunduh seluruh file proyek dalam satu paket, sehingga Anda dapat langsung mencobanya di perangkat Anda. Artikel ini cocok bagi pemula yang ingin belajar pengembangan web maupun pengembang yang ingin memiliki referensi kode siap pakai.
Fitur yang Dibahas dalam Artikel:
✅ Struktur dasar HTML untuk membangun tampilan aplikasi
✅ Gaya visual menarik dengan CSS
✅ Interaksi pengguna dengan JavaScript
✅ Link download untuk mendapatkan seluruh kode proyek
Artikel ini akan memandu Anda langkah demi langkah dengan contoh kode yang jelas dan dapat digunakan langsung. Jangan lewatkan kesempatan untuk mulai membangun aplikasi web pertama Anda dengan mudah!
🔗 Link Download Kode Proyek: ada di bagian bawah: artikel 👇👇
{ index.html }
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aplikasi</title>
<link rel="stylesheet" href="style.css">
<script defer src="script.js"></script>
<link rel="icon" href="icon.png">
</head>
<body>
<!-- Header -->
<header>
<div class="menu-icon" onclick="toggleMenu()">☰</div>
<h1>Aplikasi</h1>
</header>
<!-- Sidebar Menu -->
<nav id="sidebar">
<a href="#" class="close-btn" onclick="toggleMenu()">×</a>
<ul>
<li><a href="index.html"><img src="img/home.png" alt="Home"> Home</a></li>
<li><a href="mailto:email@example.com"><img src="img/email.png" alt="Email"> Email</a></li>
<li><a href="privacy.html"><img src="img/privacy.png" alt="Privacy"> Privacy Policy</a></li>
<li><a href="about.html"><img src="img/about.png" alt="About"> About</a></li>
</ul>
</nav>
<!-- Container Fitur -->
<main>
<div class="features">
<div class="feature">
<a href="fitur1.html"><img src="img/fitur1.png" alt="Fitur 1"></a>
<p>Fitur 1</p>
</div>
<div class="feature">
<a href="fitur2.html"><img src="img/fitur2.png" alt="Fitur 2"></a>
<p>Fitur 2</p>
</div>
<div class="feature">
<a href="fitur3.html"><img src="img/fitur3.png" alt="Fitur 3"></a>
<p>Fitur 3</p>
</div>
<div class="feature">
<a href="fitur4.html"><img src="img/fitur4.png" alt="Fitur 4"></a>
<p>Fitur 4</p>
</div>
<div class="feature">
<a href="fitur5.html"><img src="img/fitur5.png" alt="Fitur 5"></a>
<p>Fitur 5</p>
</div>
<div class="feature">
<a href="fitur6.html"><img src="img/fitur6.png" alt="Fitur 6"></a>
<p>Fitur 6</p>
</div>
</div>
</main>
<!-- Footer -->
<footer>
<a href="https://www.facebook.com/ahmadi.ikhwanandesta/" target="_blank">Facebook</a>
<a href="https://www.instagram.com/ahmadi_ikhwan07/" target="_blank">Instagram</a>
<a href="https://youtube.com/@info_qu_id?si=CSVA8ngF7zZHu
T9S" target="_blank">YouTube</a>
</footer>
</body>
</html>
{ style.css }
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
/* Body */
body {
background: #f4f4f4;
text-align: center;
}
/* Header */
header {
background: #007bff;
color: white;
display: flex;
align-items: center;
justify-content: flex-start; /* Mengatur posisi konten ke kiri */
padding: 15px;
gap: 170px; /* Menambahkan jarak antara ikon menu dan teks */
}
.menu-icon {
font-size: 24px;
cursor: pointer;
}
header h1 {
font-size: 35px; /* Sesuaikan ukuran font */
margin: 0; /* Hapus margin default */
}
.menu-icon {
font-size: 24px;
cursor: pointer;
}
/* Sidebar */
#sidebar {
width: 250px;
background: #333;
color: white;
position: fixed;
top: 0;
left: -250px;
height: 100%;
padding-top: 20px;
transition: 0.3s;
}
#sidebar ul {
list-style: none;
padding: 0;
}
#sidebar ul li {
padding: 15px;
text-align: left;
}
#sidebar ul li a {
color: white;
text-decoration: none;
display: flex;
align-items: center;
}
#sidebar ul li a img {
width: 20px;
margin-right: 10px;
}
.close-btn {
display: block;
text-align: right;
font-size: 25px;
padding: 10px;
cursor: pointer;
color: white;
}
/* Fitur */
.features {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
padding: 20px;
max-width: 400px;
margin: auto;
}
.feature {
background: white;
padding: 15px;
border-radius: 8px;
text-align: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.feature img {
width: 80px;
height: 80px;
}
.feature p {
margin-top: 10px;
font-size: 16px;
}
/* Footer */
footer {
background: #007bff;
color: white;
padding: 10px;
position: fixed;
bottom: 0;
width: 1
00%;
display: flex;
justify-content: space-around;
}
footer a {
color: white;
text-decoration: none;
}
{ script.js }
// Fungsi untuk menampilkan dan menyembunyikan menu sidebar
function toggleMenu() {
var sidebar = document.getElementById("sidebar");
if (sidebar.style.left === "0px") {
sidebar.style.left = "-250px";
} else {
sidebar.style.left = "0px";
}
}
- Link download file google drive
0 Response to "Tutorial Cara Membuat Aplikasi Dari Handphone l bang ikhwan tutorial "
Posting Komentar