asrul.devPengantar
Hari terakhir series 7 Hari HTML5. Gabungkan materi dari Hari 1 sampai Hari 6 menjadi halaman profil — edit namamu di playground di bawah, lihat hasilnya langsung.
Salin & personalisasi
Ganti nama, bio, dan daftar keahlian.
Playground proyek akhir
Halaman profil — proyek akhir
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Profil — Nama Kamu</title>
<style>
body { font-family: system-ui, sans-serif; margin: 0; line-height: 1.5; color: #111; }
header, footer { background: #0f766e; color: #fff; padding: 1rem 1.25rem; }
header a, footer a { color: #ccfbf1; }
nav ul { display: flex; flex-wrap: wrap; gap: 0.75rem; list-style: none; padding: 0; }
main { padding: 1.25rem; max-width: 40rem; }
section, article { margin-bottom: 1.75rem; }
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #ccc; padding: 0.4rem 0.6rem; text-align: left; }
img { max-width: 100%; height: auto; border-radius: 0.75rem; }
label { display: inline-block; margin-top: 0.5rem; }
input, textarea, select, button { font: inherit; }
input, textarea, select { width: min(100%, 20rem); }
button { margin-top: 0.75rem; padding: 0.4rem 0.9rem; cursor: pointer; }
</style>
</head>
<body>
<a href="#konten-utama">Loncat ke konten</a>
<header>
<h1>Nama Kamu</h1>
<p>Calon web developer · Belajar HTML5</p>
<nav>
<ul>
<li><a href="#tentang">Tentang</a></li>
<li><a href="#keahlian">Keahlian</a></li>
<li><a href="#jadwal">Jadwal</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="#kontak">Kontak</a></li>
</ul>
</nav>
</header>
<main id="konten-utama">
<article id="tentang">
<h2>Tentang saya</h2>
<figure>
<img
src="https://placehold.co/200x200/png?text=Profil"
alt="Foto profil Nama Kamu"
width="200"
height="200"
/>
<figcaption>Foto profil, September 2026</figcaption>
</figure>
<p>
Halo! Saya menyelesaikan series <strong>7 Hari HTML5</strong>.
Halaman ini adalah proyek akhir saya.
</p>
<p>
Dipublikasikan pada
<time datetime="2026-09-07">7 September 2026</time>.
</p>
</article>
<section id="keahlian">
<h2>Yang sedang saya pelajari</h2>
<ul>
<li>HTML5 semantik</li>
<li>Form & tabel</li>
<li>Audio & video</li>
<li>Aksesibilitas dasar</li>
</ul>
</section>
<section id="jadwal">
<h2>Jadwal series</h2>
<table>
<caption>Progress 7 Hari HTML5</caption>
<thead>
<tr>
<th scope="col">Hari</th>
<th scope="col">Topik</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr><th scope="row">1</th><td>Pengantar</td><td>Selesai</td></tr>
<tr><th scope="row">2</th><td>Semantik</td><td>Selesai</td></tr>
<tr><th scope="row">3</th><td>Teks & media</td><td>Selesai</td></tr>
<tr><th scope="row">4</th><td>Tabel & form</td><td>Selesai</td></tr>
<tr><th scope="row">5</th><td>Audio & video</td><td>Selesai</td></tr>
<tr><th scope="row">6</th><td>Aksesibilitas</td><td>Selesai</td></tr>
<tr><th scope="row">7</th><td>Mini proyek</td><td>Selesai</td></tr>
</tbody>
</table>
</section>
<section id="faq">
<h2>FAQ</h2>
<details>
<summary>Apakah halaman ini wajib pakai CSS?</summary>
<p>Tidak. CSS di sini hanya supaya preview lebih nyaman.</p>
</details>
<details>
<summary>Langkah berikutnya?</summary>
<p>Belajar CSS layout, lalu JavaScript untuk interaksi.</p>
</details>
</section>
<section id="kontak">
<h2>Kontak</h2>
<form action="#" method="get">
<label for="nama">Nama</label><br />
<input id="nama" name="nama" type="text" required /><br />
<label for="email">Email</label><br />
<input id="email" name="email" type="email" required /><br />
<label for="pesan">Pesan</label><br />
<textarea id="pesan" name="pesan" rows="3" required></textarea><br />
<button type="submit">Kirim pesan</button>
</form>
<address>
Email: <a href="mailto:me@asrul.dev">me@asrul.dev</a>
</address>
</section>
</main>
<footer>
<p>Proyek akhir 7 Hari HTML5 · © 2026</p>
</footer>
</body>
</html>
Preview
Kriteria selesai
0/7 selesai
Kuis penutup
Urutan landmark yang paling masuk akal untuk halaman profil?
Apa langkah belajar yang paling natural setelah HTML5 solid?
Penutup
Selamat — kamu sudah menempuh series interaktif dari dokumen kosong sampai halaman profil. Fondasi ini memudahkan langkah berikutnya ke CSS dan JavaScript.
Feedback atau share proyek: me@asrul.dev.