PERTEMUAN 04 · BOX MODEL DAN FLEXBOX

Ruang dan layout halaman profil

Lanjutkan index.html dan style.css hasil Pertemuan 03. Nama, isi, foto, dan ID tetap dipertahankan.

Cara mengikuti: kerjakan 8 tahap secara berurutan. Setiap blok kode lengkap menunjukkan isi file pada tahap tersebut. HTML hanya ditampilkan ketika berubah.

Gunakan kode lengkap untuk membandingkan. Jika menyalin, ganti seluruh isi file terkait dan personalisasi kembali. Komentar menandai bagian yang ditambahkan atau ditata ulang. Foto tetap pada assets/images/foto.jpg di proyek mahasiswa.

Panduan ini memecah target praktik slide menjadi tahap kecil. Nomor tahap bukan nomor slide.

TAHAP 01 · EDIT HTML DAN CSS

Lebar Halaman dan Border Box

Langkah kerja

Lanjutkan index.html dan style.css hasil tahap 10 P03. Semua ID, isi, class sorotan, dan foto tetap dipakai.
Tambahkan class halaman pada main yang sudah ada.
Tambahkan aturan universal box-sizing: border-box; dan hapus margin bawaan body dengan margin: 0.
Atur .halaman dengan width: 92%, max-width: 960px, serta margin: 24px auto.

Aturan CSS yang ditambahkan / diubah

body {
  color: #192a54;
  background-color: #fffaf0;
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
}

* {
  box-sizing: border-box;
}

.halaman {
  width: 92%;
  max-width: 960px;
  margin: 24px auto;
}

width: 92% mengikuti ruang induk. max-width membatasi lebarnya. Pada border-box, width sudah mencakup padding dan border.

Cek hasil: Konten utama terpusat dan tidak memenuhi seluruh lebar browser.

Sudah selesai? Coba max-width 720px lalu 960px. Kembalikan ke 960px.

index.html — kode lengkap tahap 01

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Profil Nama Mahasiswa</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header id="beranda">
    <h1>Nama Mahasiswa</h1>
    <h2>Mahasiswa Bisnis Digital</h2>
    <h3>Institut Bisnis dan Teknologi Indonesia</h3>

    <nav aria-label="Navigasi utama">
      <a href="#profil">Profil</a> |
      <a href="#minat">Minat</a> |
      <a href="#target">Target Belajar</a> |
      <a href="#tautan">Tautan</a>
    </nav>
  </header>

  <!-- DIUBAH PADA TAHAP 01: gunakan main yang sudah ada -->
  <main class="halaman">
    <section id="profil">
      <h2>Tentang Saya</h2>
      <img
        src="assets/images/foto.jpg"
        alt="Foto profil Nama Mahasiswa"
        width="220"
      >
      <p class="sorotan">
        Saya mahasiswa <strong>Bisnis Digital</strong> yang tertarik
        mempelajari pengembangan web.
      </p>
      <p>
        Saya ingin membuat halaman yang
        <em>rapi dan mudah dipahami</em>.
      </p>

    </section>

    <section id="minat">
      <h2>Minat Saya</h2>
      <ul>
        <li>Desain web</li>
        <li>Digital marketing</li>
        <li>Fotografi produk</li>
      </ul>
    </section>

    <section id="target">
      <h2>Target Belajar</h2>
      <ol>
        <li class="sorotan">Memahami struktur HTML</li>
        <li>Menguasai CSS dasar</li>
        <li>Membuat website pribadi</li>
      </ol>
    </section>

    <section id="tautan">
      <h2>Tautan</h2>
      <p>
        <a href="https://instiki.ac.id">
          Kunjungi website INSTIKI
        </a>
      </p>

      <p><a href="#beranda">Kembali ke bagian atas</a></p>
    </section>
  </main>

  <footer>
    <p>
      &copy; 2026 Nama Mahasiswa.
      Dibuat untuk praktikum Web Programming.
    </p>
  </footer>
</body>
</html>

style.css — kode lengkap tahap 01

/* DITAMBAHKAN / DIUBAH PADA TAHAP 01 */
body {
  color: #192a54;
  background-color: #fffaf0;
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
}

h1 {
  color: maroon;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
}

h2 {
  font-size: 26px;
  font-weight: 700;
}

h3 {
  font-size: 20px;
  font-weight: 400;
}

p {
  color: navy;
  text-align: left;
}

a {
  color: #0056b3;
}

header {
  text-align: center;
}

footer {
  text-align: center;
}

.sorotan {
  color: #7a2300;
  background-color: #fff1cf;
  font-weight: 700;
}

#beranda {
  background-color: #e9eef7;
}

/* DITAMBAHKAN / DIUBAH PADA TAHAP 01 */
* {
  box-sizing: border-box;
}

/* DITAMBAHKAN / DIUBAH PADA TAHAP 01 */
.halaman {
  width: 92%;
  max-width: 960px;
  margin: 24px auto;
}

Tahap 02 →

TAHAP 02 · EDIT HTML DAN CSS

Padding pada Kartu Profil

Langkah kerja

Tambahkan class kartu-profil pada section id profil yang sudah ada.
Berikan padding: 24px dan background-color: white pada .kartu-profil.
Amati jarak judul, foto, dan teks terhadap tepi kartu.
Coba padding 8px, lalu 24px. Simpan dan refresh.

Aturan CSS yang ditambahkan / diubah

.kartu-profil {
  padding: 24px;
  background-color: white;
}

Padding merupakan ruang di dalam kotak. Tahap ini tidak mengubah isi atau urutan profil.

Cek hasil: Isi profil memiliki ruang di dalam kartu.

Sudah selesai? Coba padding: 16px 24px; lalu kembalikan ke contoh.

index.html — kode lengkap tahap 02

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Profil Nama Mahasiswa</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header id="beranda">
    <h1>Nama Mahasiswa</h1>
    <h2>Mahasiswa Bisnis Digital</h2>
    <h3>Institut Bisnis dan Teknologi Indonesia</h3>

    <nav aria-label="Navigasi utama">
      <a href="#profil">Profil</a> |
      <a href="#minat">Minat</a> |
      <a href="#target">Target Belajar</a> |
      <a href="#tautan">Tautan</a>
    </nav>
  </header>

  <main class="halaman">
    <!-- DIUBAH PADA TAHAP 02: tambahkan class, pertahankan ID -->
    <section id="profil" class="kartu-profil">
      <h2>Tentang Saya</h2>
      <img
        src="assets/images/foto.jpg"
        alt="Foto profil Nama Mahasiswa"
        width="220"
      >
      <p class="sorotan">
        Saya mahasiswa <strong>Bisnis Digital</strong> yang tertarik
        mempelajari pengembangan web.
      </p>
      <p>
        Saya ingin membuat halaman yang
        <em>rapi dan mudah dipahami</em>.
      </p>

    </section>

    <section id="minat">
      <h2>Minat Saya</h2>
      <ul>
        <li>Desain web</li>
        <li>Digital marketing</li>
        <li>Fotografi produk</li>
      </ul>
    </section>

    <section id="target">
      <h2>Target Belajar</h2>
      <ol>
        <li class="sorotan">Memahami struktur HTML</li>
        <li>Menguasai CSS dasar</li>
        <li>Membuat website pribadi</li>
      </ol>
    </section>

    <section id="tautan">
      <h2>Tautan</h2>
      <p>
        <a href="https://instiki.ac.id">
          Kunjungi website INSTIKI
        </a>
      </p>

      <p><a href="#beranda">Kembali ke bagian atas</a></p>
    </section>
  </main>

  <footer>
    <p>
      &copy; 2026 Nama Mahasiswa.
      Dibuat untuk praktikum Web Programming.
    </p>
  </footer>
</body>
</html>

style.css — kode lengkap tahap 02

body {
  color: #192a54;
  background-color: #fffaf0;
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
}

h1 {
  color: maroon;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
}

h2 {
  font-size: 26px;
  font-weight: 700;
}

h3 {
  font-size: 20px;
  font-weight: 400;
}

p {
  color: navy;
  text-align: left;
}

a {
  color: #0056b3;
}

header {
  text-align: center;
}

footer {
  text-align: center;
}

.sorotan {
  color: #7a2300;
  background-color: #fff1cf;
  font-weight: 700;
}

#beranda {
  background-color: #e9eef7;
}

* {
  box-sizing: border-box;
}

.halaman {
  width: 92%;
  max-width: 960px;
  margin: 24px auto;
}

/* DITAMBAHKAN / DIUBAH PADA TAHAP 02 */
.kartu-profil {
  padding: 24px;
  background-color: white;
}

← Tahap 01 Tahap 03 →

TAHAP 03 · LANJUTKAN STYLE.CSS

Border, Margin, dan Footer

Langkah kerja

Pada .kartu-profil, tambahkan border dan border-radius.
Tambahkan margin-bottom: 24px pada section agar bagian terpisah.
Beri ruang dalam pada sorotan serta footer. Gunakan footer p untuk meratakan paragraf footer ke tengah.
Tambahkan border atas pada footer sebagai pembatas, lalu periksa lewat DevTools.

Aturan CSS yang ditambahkan / diubah

footer {
  text-align: center;
  padding: 20px 4%;
  border-top: 1px solid #d7dce7;
}

.sorotan {
  color: #7a2300;
  background-color: #fff1cf;
  font-weight: 700;
  padding: 8px 12px;
}

.kartu-profil {
  padding: 24px;
  background-color: white;
  border: 1px solid #d7dce7;
  border-radius: 16px;
}

section {
  margin-bottom: 24px;
}

footer p {
  text-align: center;
  margin: 0;
}

footer p memilih paragraf di dalam footer. Ini memperbaiki aturan p dari P03 yang sebelumnya membuat teks footer rata kiri.

Cek hasil: Batas kartu jelas, bagian terpisah, dan paragraf footer rata tengah.

Sudah selesai? Ubah sementara warna border untuk menemukan batas kartu, kemudian kembalikan.

style.css — kode lengkap tahap 03

body {
  color: #192a54;
  background-color: #fffaf0;
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
}

h1 {
  color: maroon;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
}

h2 {
  font-size: 26px;
  font-weight: 700;
}

h3 {
  font-size: 20px;
  font-weight: 400;
}

p {
  color: navy;
  text-align: left;
}

a {
  color: #0056b3;
}

header {
  text-align: center;
}

/* DITAMBAHKAN / DIUBAH PADA TAHAP 03 */
footer {
  text-align: center;
  padding: 20px 4%;
  border-top: 1px solid #d7dce7;
}

/* DITAMBAHKAN / DIUBAH PADA TAHAP 03 */
.sorotan {
  color: #7a2300;
  background-color: #fff1cf;
  font-weight: 700;
  padding: 8px 12px;
}

#beranda {
  background-color: #e9eef7;
}

* {
  box-sizing: border-box;
}

.halaman {
  width: 92%;
  max-width: 960px;
  margin: 24px auto;
}

/* DITAMBAHKAN / DIUBAH PADA TAHAP 03 */
.kartu-profil {
  padding: 24px;
  background-color: white;
  border: 1px solid #d7dce7;
  border-radius: 16px;
}

/* DITAMBAHKAN / DIUBAH PADA TAHAP 03 */
section {
  margin-bottom: 24px;
}

/* DITAMBAHKAN / DIUBAH PADA TAHAP 03 */
footer p {
  text-align: center;
  margin: 0;
}

← Tahap 02 Tahap 04 →

TAHAP 04 · EDIT HTML DAN CSS

Ukuran Gambar dan Display Link

Langkah kerja

Tambahkan class foto-profil pada img yang sudah ada. Path foto tetap assets/images/foto.jpg.
Atur width 180px, max-width 100%, height auto, dan sudut gambar.
Gunakan nav a untuk mencoba display: inline-block serta padding pada link navigasi.
Amati ruang link yang bertambah. Bandingkan dengan display: inline, lalu kembalikan ke inline-block.

Aturan CSS yang ditambahkan / diubah

.foto-profil {
  width: 180px;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

nav a {
  display: inline-block;
  padding: 8px 12px;
}

height: auto menjaga proporsi gambar. Hindari tinggi tetap untuk kartu berisi teks.

Cek hasil: Gambar proporsional, dan link memiliki ruang klik yang jelas.

Sudah selesai? Coba lebar gambar 140px dan 180px; amati perubahan tinggi otomatis.

index.html — kode lengkap tahap 04

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Profil Nama Mahasiswa</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header id="beranda">
    <h1>Nama Mahasiswa</h1>
    <h2>Mahasiswa Bisnis Digital</h2>
    <h3>Institut Bisnis dan Teknologi Indonesia</h3>

    <nav aria-label="Navigasi utama">
      <a href="#profil">Profil</a> |
      <a href="#minat">Minat</a> |
      <a href="#target">Target Belajar</a> |
      <a href="#tautan">Tautan</a>
    </nav>
  </header>

  <main class="halaman">
    <section id="profil" class="kartu-profil">
      <h2>Tentang Saya</h2>
      <!-- DIUBAH PADA TAHAP 04: tambahkan class pada foto yang sudah ada -->
      <img
        class="foto-profil"
        src="assets/images/foto.jpg"
        alt="Foto profil Nama Mahasiswa"
        width="220"
      >
      <p class="sorotan">
        Saya mahasiswa <strong>Bisnis Digital</strong> yang tertarik
        mempelajari pengembangan web.
      </p>
      <p>
        Saya ingin membuat halaman yang
        <em>rapi dan mudah dipahami</em>.
      </p>

    </section>

    <section id="minat">
      <h2>Minat Saya</h2>
      <ul>
        <li>Desain web</li>
        <li>Digital marketing</li>
        <li>Fotografi produk</li>
      </ul>
    </section>

    <section id="target">
      <h2>Target Belajar</h2>
      <ol>
        <li class="sorotan">Memahami struktur HTML</li>
        <li>Menguasai CSS dasar</li>
        <li>Membuat website pribadi</li>
      </ol>
    </section>

    <section id="tautan">
      <h2>Tautan</h2>
      <p>
        <a href="https://instiki.ac.id">
          Kunjungi website INSTIKI
        </a>
      </p>

      <p><a href="#beranda">Kembali ke bagian atas</a></p>
    </section>
  </main>

  <footer>
    <p>
      &copy; 2026 Nama Mahasiswa.
      Dibuat untuk praktikum Web Programming.
    </p>
  </footer>
</body>
</html>

style.css — kode lengkap tahap 04

body {
  color: #192a54;
  background-color: #fffaf0;
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
}

h1 {
  color: maroon;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
}

h2 {
  font-size: 26px;
  font-weight: 700;
}

h3 {
  font-size: 20px;
  font-weight: 400;
}

p {
  color: navy;
  text-align: left;
}

a {
  color: #0056b3;
}

header {
  text-align: center;
}

footer {
  text-align: center;
  padding: 20px 4%;
  border-top: 1px solid #d7dce7;
}

.sorotan {
  color: #7a2300;
  background-color: #fff1cf;
  font-weight: 700;
  padding: 8px 12px;
}

#beranda {
  background-color: #e9eef7;
}

* {
  box-sizing: border-box;
}

.halaman {
  width: 92%;
  max-width: 960px;
  margin: 24px auto;
}

.kartu-profil {
  padding: 24px;
  background-color: white;
  border: 1px solid #d7dce7;
  border-radius: 16px;
}

section {
  margin-bottom: 24px;
}

footer p {
  text-align: center;
  margin: 0;
}

/* DITAMBAHKAN / DIUBAH PADA TAHAP 04 */
.foto-profil {
  width: 180px;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

/* DITAMBAHKAN / DIUBAH PADA TAHAP 04 */
nav a {
  display: inline-block;
  padding: 8px 12px;
}

← Tahap 03 Tahap 05 →

TAHAP 05 · EDIT HTML DAN CSS

Navigasi dengan Flexbox

Langkah kerja

Di header id beranda, tambahkan class navigasi. Bungkus h1, h2, h3 yang sudah ada dengan div class identitas.
Tambahkan class menu pada nav. Hapus karakter | antartautan; gap akan mengatur jaraknya.
Jadikan .navigasi flex container dengan space-between, align-items center, dan gap.
Jadikan .menu flex container juga. Aktifkan wrap agar menu dapat pindah baris bila ruangnya sempit.
Pertahankan seluruh href dan ID navigasi dari P02/P03.

Aturan CSS yang ditambahkan / diubah

.navigasi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  width: 92%;
  max-width: 960px;
  margin: 24px auto;
  padding: 20px 24px;
  border-radius: 16px;
  text-align: left;
}

.identitas h1 {
  margin: 0 0 8px;
}

.identitas h2 {
  margin: 0 0 4px;
  font-size: 20px;
}

.identitas h3 {
  margin: 0;
  font-size: 16px;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.menu a {
  border-radius: 8px;
  background-color: white;
}

Flex item adalah anak langsung container: identitas dan nav. Link di dalam nav diatur oleh flex container kedua, yaitu .menu.

Cek hasil: Identitas dan menu berjajar ketika ruang cukup; tautan tetap bekerja.

Sudah selesai? Bandingkan justify-content: center dan space-between, kemudian kembalikan.

index.html — kode lengkap tahap 05

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Profil Nama Mahasiswa</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- DIUBAH PADA TAHAP 05: pertahankan ID dan bungkus identitas -->
  <header id="beranda" class="navigasi">
    <div class="identitas">
    <h1>Nama Mahasiswa</h1>
    <h2>Mahasiswa Bisnis Digital</h2>
    <h3>Institut Bisnis dan Teknologi Indonesia</h3>

    </div>
    <nav class="menu" aria-label="Navigasi utama">
      <a href="#profil">Profil</a>
      <a href="#minat">Minat</a>
      <a href="#target">Target Belajar</a>
      <a href="#tautan">Tautan</a>
    </nav>
  </header>

  <main class="halaman">
    <section id="profil" class="kartu-profil">
      <h2>Tentang Saya</h2>
      <img
        class="foto-profil"
        src="assets/images/foto.jpg"
        alt="Foto profil Nama Mahasiswa"
        width="220"
      >
      <p class="sorotan">
        Saya mahasiswa <strong>Bisnis Digital</strong> yang tertarik
        mempelajari pengembangan web.
      </p>
      <p>
        Saya ingin membuat halaman yang
        <em>rapi dan mudah dipahami</em>.
      </p>

    </section>

    <section id="minat">
      <h2>Minat Saya</h2>
      <ul>
        <li>Desain web</li>
        <li>Digital marketing</li>
        <li>Fotografi produk</li>
      </ul>
    </section>

    <section id="target">
      <h2>Target Belajar</h2>
      <ol>
        <li class="sorotan">Memahami struktur HTML</li>
        <li>Menguasai CSS dasar</li>
        <li>Membuat website pribadi</li>
      </ol>
    </section>

    <section id="tautan">
      <h2>Tautan</h2>
      <p>
        <a href="https://instiki.ac.id">
          Kunjungi website INSTIKI
        </a>
      </p>

      <p><a href="#beranda">Kembali ke bagian atas</a></p>
    </section>
  </main>

  <footer>
    <p>
      &copy; 2026 Nama Mahasiswa.
      Dibuat untuk praktikum Web Programming.
    </p>
  </footer>
</body>
</html>

style.css — kode lengkap tahap 05

body {
  color: #192a54;
  background-color: #fffaf0;
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
}

h1 {
  color: maroon;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
}

h2 {
  font-size: 26px;
  font-weight: 700;
}

h3 {
  font-size: 20px;
  font-weight: 400;
}

p {
  color: navy;
  text-align: left;
}

a {
  color: #0056b3;
}

header {
  text-align: center;
}

footer {
  text-align: center;
  padding: 20px 4%;
  border-top: 1px solid #d7dce7;
}

.sorotan {
  color: #7a2300;
  background-color: #fff1cf;
  font-weight: 700;
  padding: 8px 12px;
}

#beranda {
  background-color: #e9eef7;
}

* {
  box-sizing: border-box;
}

.halaman {
  width: 92%;
  max-width: 960px;
  margin: 24px auto;
}

.kartu-profil {
  padding: 24px;
  background-color: white;
  border: 1px solid #d7dce7;
  border-radius: 16px;
}

section {
  margin-bottom: 24px;
}

footer p {
  text-align: center;
  margin: 0;
}

.foto-profil {
  width: 180px;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

nav a {
  display: inline-block;
  padding: 8px 12px;
}

/* DITAMBAHKAN / DIUBAH PADA TAHAP 05 */
.navigasi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  width: 92%;
  max-width: 960px;
  margin: 24px auto;
  padding: 20px 24px;
  border-radius: 16px;
  text-align: left;
}

/* DITAMBAHKAN / DIUBAH PADA TAHAP 05 */
.identitas h1 {
  margin: 0 0 8px;
}

/* DITAMBAHKAN / DIUBAH PADA TAHAP 05 */
.identitas h2 {
  margin: 0 0 4px;
  font-size: 20px;
}

/* DITAMBAHKAN / DIUBAH PADA TAHAP 05 */
.identitas h3 {
  margin: 0;
  font-size: 16px;
}

/* DITAMBAHKAN / DIUBAH PADA TAHAP 05 */
.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* DITAMBAHKAN / DIUBAH PADA TAHAP 05 */
.menu a {
  border-radius: 8px;
  background-color: white;
}

← Tahap 04 Tahap 06 →

TAHAP 06 · EDIT HTML DAN CSS

Foto dan Informasi Berdampingan

Langkah kerja

Di dalam section profil, pertahankan h2 Tentang Saya sebagai judul di atas.
Tambahkan div class profil-layout setelah h2 untuk membungkus foto dan dua paragraf yang sudah ada.
Bungkus hanya dua paragraf dengan div class profil-info. Jangan menggandakan paragraf sorotan.
Atur .profil-layout menggunakan flex-direction row, align-items center, dan gap 24px.
Atur .profil-info menggunakan flex: 1 dan min-width: 0.

Aturan CSS yang ditambahkan / diubah

.profil-layout {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
}

.profil-info {
  flex: 1;
  min-width: 0;
}

.kartu-profil h2 {
  margin: 0 0 20px;
}

Tambahan div hanya mengelompokkan konten untuk layout. Foto tetap sebelum paragraf, dan ID profil tetap di section.

Cek hasil: Foto dan informasi tampil berdampingan pada layar lebar.

Sudah selesai? Coba flex-direction: column untuk membandingkan, lalu kembalikan ke row.

index.html — kode lengkap tahap 06

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Profil Nama Mahasiswa</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header id="beranda" class="navigasi">
    <div class="identitas">
    <h1>Nama Mahasiswa</h1>
    <h2>Mahasiswa Bisnis Digital</h2>
    <h3>Institut Bisnis dan Teknologi Indonesia</h3>

    </div>
    <nav class="menu" aria-label="Navigasi utama">
      <a href="#profil">Profil</a>
      <a href="#minat">Minat</a>
      <a href="#target">Target Belajar</a>
      <a href="#tautan">Tautan</a>
    </nav>
  </header>

  <main class="halaman">
    <section id="profil" class="kartu-profil">
      <h2>Tentang Saya</h2>
      <!-- DIUBAH PADA TAHAP 06: kelompokkan foto dan informasi lama -->
      <div class="profil-layout">
      <img
        class="foto-profil"
        src="assets/images/foto.jpg"
        alt="Foto profil Nama Mahasiswa"
        width="220"
      >
      <div class="profil-info">
      <p class="sorotan">
        Saya mahasiswa <strong>Bisnis Digital</strong> yang tertarik
        mempelajari pengembangan web.
      </p>
      <p>
        Saya ingin membuat halaman yang
        <em>rapi dan mudah dipahami</em>.
      </p>
      </div>
      </div>
    </section>

    <section id="minat">
      <h2>Minat Saya</h2>
      <ul>
        <li>Desain web</li>
        <li>Digital marketing</li>
        <li>Fotografi produk</li>
      </ul>
    </section>

    <section id="target">
      <h2>Target Belajar</h2>
      <ol>
        <li class="sorotan">Memahami struktur HTML</li>
        <li>Menguasai CSS dasar</li>
        <li>Membuat website pribadi</li>
      </ol>
    </section>

    <section id="tautan">
      <h2>Tautan</h2>
      <p>
        <a href="https://instiki.ac.id">
          Kunjungi website INSTIKI
        </a>
      </p>

      <p><a href="#beranda">Kembali ke bagian atas</a></p>
    </section>
  </main>

  <footer>
    <p>
      &copy; 2026 Nama Mahasiswa.
      Dibuat untuk praktikum Web Programming.
    </p>
  </footer>
</body>
</html>

style.css — kode lengkap tahap 06

body {
  color: #192a54;
  background-color: #fffaf0;
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
}

h1 {
  color: maroon;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
}

h2 {
  font-size: 26px;
  font-weight: 700;
}

h3 {
  font-size: 20px;
  font-weight: 400;
}

p {
  color: navy;
  text-align: left;
}

a {
  color: #0056b3;
}

header {
  text-align: center;
}

footer {
  text-align: center;
  padding: 20px 4%;
  border-top: 1px solid #d7dce7;
}

.sorotan {
  color: #7a2300;
  background-color: #fff1cf;
  font-weight: 700;
  padding: 8px 12px;
}

#beranda {
  background-color: #e9eef7;
}

* {
  box-sizing: border-box;
}

.halaman {
  width: 92%;
  max-width: 960px;
  margin: 24px auto;
}

.kartu-profil {
  padding: 24px;
  background-color: white;
  border: 1px solid #d7dce7;
  border-radius: 16px;
}

section {
  margin-bottom: 24px;
}

footer p {
  text-align: center;
  margin: 0;
}

.foto-profil {
  width: 180px;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

nav a {
  display: inline-block;
  padding: 8px 12px;
}

.navigasi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  width: 92%;
  max-width: 960px;
  margin: 24px auto;
  padding: 20px 24px;
  border-radius: 16px;
  text-align: left;
}

.identitas h1 {
  margin: 0 0 8px;
}

.identitas h2 {
  margin: 0 0 4px;
  font-size: 20px;
}

.identitas h3 {
  margin: 0;
  font-size: 16px;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.menu a {
  border-radius: 8px;
  background-color: white;
}

/* DITAMBAHKAN / DIUBAH PADA TAHAP 06 */
.profil-layout {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
}

/* DITAMBAHKAN / DIUBAH PADA TAHAP 06 */
.profil-info {
  flex: 1;
  min-width: 0;
}

/* DITAMBAHKAN / DIUBAH PADA TAHAP 06 */
.kartu-profil h2 {
  margin: 0 0 20px;
}

← Tahap 05 Tahap 07 →

TAHAP 07 · EDIT HTML DAN CSS

Kartu Minat dengan Wrap dan Gap

Langkah kerja

Pada ul Minat Saya yang sudah ada, tambahkan class daftar-kartu.
Pada tiga li yang sudah ada, tambahkan class kartu-minat. Isinya tetap minat sendiri.
Atur .daftar-kartu menggunakan display flex, flex-wrap wrap, dan gap 16px.
Atur .kartu-minat dengan flex: 1 1 220px, padding, border, dan latar terang.
Kecilkan browser dan periksa kartu berpindah baris.

Aturan CSS yang ditambahkan / diubah

.daftar-kartu {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding-left: 0;
  list-style-position: inside;
}

.kartu-minat {
  flex: 1 1 220px;
  padding: 16px;
  border: 1px solid #d7dce7;
  border-radius: 12px;
  background-color: #e9eef7;
  min-width: 0;
}

flex: 1 1 220px berarti item dapat membesar, mengecil, dengan ukuran dasar 220px. Padding-left 0 menghapus indentasi daftar; list-style-position inside mempertahankan penanda daftar di dalam kartu.

Cek hasil: Tiga minat menjadi kartu dengan jarak konsisten tanpa menghapus struktur ul/li.

Sudah selesai? Tambahkan satu minat pada daftar lalu periksa wrapping otomatis.

index.html — kode lengkap tahap 07

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Profil Nama Mahasiswa</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header id="beranda" class="navigasi">
    <div class="identitas">
    <h1>Nama Mahasiswa</h1>
    <h2>Mahasiswa Bisnis Digital</h2>
    <h3>Institut Bisnis dan Teknologi Indonesia</h3>

    </div>
    <nav class="menu" aria-label="Navigasi utama">
      <a href="#profil">Profil</a>
      <a href="#minat">Minat</a>
      <a href="#target">Target Belajar</a>
      <a href="#tautan">Tautan</a>
    </nav>
  </header>

  <main class="halaman">
    <section id="profil" class="kartu-profil">
      <h2>Tentang Saya</h2>
      <div class="profil-layout">
      <img
        class="foto-profil"
        src="assets/images/foto.jpg"
        alt="Foto profil Nama Mahasiswa"
        width="220"
      >
      <div class="profil-info">
      <p class="sorotan">
        Saya mahasiswa <strong>Bisnis Digital</strong> yang tertarik
        mempelajari pengembangan web.
      </p>
      <p>
        Saya ingin membuat halaman yang
        <em>rapi dan mudah dipahami</em>.
      </p>
      </div>
      </div>
    </section>

    <section id="minat">
      <h2>Minat Saya</h2>
      <!-- DIUBAH PADA TAHAP 07: beri class pada ul/li yang sudah ada -->
      <ul class="daftar-kartu">
        <li class="kartu-minat">Desain web</li>
        <li class="kartu-minat">Digital marketing</li>
        <li class="kartu-minat">Fotografi produk</li>
      </ul>
    </section>

    <section id="target">
      <h2>Target Belajar</h2>
      <ol>
        <li class="sorotan">Memahami struktur HTML</li>
        <li>Menguasai CSS dasar</li>
        <li>Membuat website pribadi</li>
      </ol>
    </section>

    <section id="tautan">
      <h2>Tautan</h2>
      <p>
        <a href="https://instiki.ac.id">
          Kunjungi website INSTIKI
        </a>
      </p>

      <p><a href="#beranda">Kembali ke bagian atas</a></p>
    </section>
  </main>

  <footer>
    <p>
      &copy; 2026 Nama Mahasiswa.
      Dibuat untuk praktikum Web Programming.
    </p>
  </footer>
</body>
</html>

style.css — kode lengkap tahap 07

body {
  color: #192a54;
  background-color: #fffaf0;
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
}

h1 {
  color: maroon;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
}

h2 {
  font-size: 26px;
  font-weight: 700;
}

h3 {
  font-size: 20px;
  font-weight: 400;
}

p {
  color: navy;
  text-align: left;
}

a {
  color: #0056b3;
}

header {
  text-align: center;
}

footer {
  text-align: center;
  padding: 20px 4%;
  border-top: 1px solid #d7dce7;
}

.sorotan {
  color: #7a2300;
  background-color: #fff1cf;
  font-weight: 700;
  padding: 8px 12px;
}

#beranda {
  background-color: #e9eef7;
}

* {
  box-sizing: border-box;
}

.halaman {
  width: 92%;
  max-width: 960px;
  margin: 24px auto;
}

.kartu-profil {
  padding: 24px;
  background-color: white;
  border: 1px solid #d7dce7;
  border-radius: 16px;
}

section {
  margin-bottom: 24px;
}

footer p {
  text-align: center;
  margin: 0;
}

.foto-profil {
  width: 180px;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

nav a {
  display: inline-block;
  padding: 8px 12px;
}

.navigasi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  width: 92%;
  max-width: 960px;
  margin: 24px auto;
  padding: 20px 24px;
  border-radius: 16px;
  text-align: left;
}

.identitas h1 {
  margin: 0 0 8px;
}

.identitas h2 {
  margin: 0 0 4px;
  font-size: 20px;
}

.identitas h3 {
  margin: 0;
  font-size: 16px;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.menu a {
  border-radius: 8px;
  background-color: white;
}

.profil-layout {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
}

.profil-info {
  flex: 1;
  min-width: 0;
}

.kartu-profil h2 {
  margin: 0 0 20px;
}

/* DITAMBAHKAN / DIUBAH PADA TAHAP 07 */
.daftar-kartu {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding-left: 0;
  list-style-position: inside;
}

/* DITAMBAHKAN / DIUBAH PADA TAHAP 07 */
.kartu-minat {
  flex: 1 1 220px;
  padding: 16px;
  border: 1px solid #d7dce7;
  border-radius: 12px;
  background-color: #e9eef7;
  min-width: 0;
}

← Tahap 06 Tahap 08 →

TAHAP 08 · LANJUTKAN STYLE.CSS

Responsivitas dan Pemeriksaan Akhir

Langkah kerja

Tambahkan media query max-width 600px pada bagian paling bawah style.css.
Di layar kecil, ubah .navigasi dan .profil-layout menjadi column. Identitas dan menu tetap rata kiri.
Uji pada lebar browser 390px dan 320px. Pastikan tidak ada scroll horizontal atau objek terpotong.
Periksa Box Model di Computed serta overlay Flexbox pada header, profil, dan daftar minat.
Klik seluruh navigasi internal. Simpan semua perubahan yang ingin dipertahankan di file, bukan hanya DevTools.

Aturan CSS yang ditambahkan / diubah

@media (max-width: 600px) {
  .navigasi {
    flex-direction: column;
    align-items: flex-start;
  }

  .profil-layout {
    flex-direction: column;
    align-items: flex-start;
  }
}

Perubahan layout tidak membuat proyek baru. Berkas yang sama akan dilanjutkan pada pertemuan berikutnya.

Cek hasil: Layout terbaca pada desktop dan HP; foto tetap proporsional, isi utuh, dan navigasi berfungsi.

Sudah selesai? Uji pada lebar 600px dan 601px untuk melihat kapan aturan media query berlaku.

style.css — kode lengkap tahap 08

body {
  color: #192a54;
  background-color: #fffaf0;
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
}

h1 {
  color: maroon;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
}

h2 {
  font-size: 26px;
  font-weight: 700;
}

h3 {
  font-size: 20px;
  font-weight: 400;
}

p {
  color: navy;
  text-align: left;
}

a {
  color: #0056b3;
}

header {
  text-align: center;
}

footer {
  text-align: center;
  padding: 20px 4%;
  border-top: 1px solid #d7dce7;
}

.sorotan {
  color: #7a2300;
  background-color: #fff1cf;
  font-weight: 700;
  padding: 8px 12px;
}

#beranda {
  background-color: #e9eef7;
}

* {
  box-sizing: border-box;
}

.halaman {
  width: 92%;
  max-width: 960px;
  margin: 24px auto;
}

.kartu-profil {
  padding: 24px;
  background-color: white;
  border: 1px solid #d7dce7;
  border-radius: 16px;
}

section {
  margin-bottom: 24px;
}

footer p {
  text-align: center;
  margin: 0;
}

.foto-profil {
  width: 180px;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

nav a {
  display: inline-block;
  padding: 8px 12px;
}

.navigasi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  width: 92%;
  max-width: 960px;
  margin: 24px auto;
  padding: 20px 24px;
  border-radius: 16px;
  text-align: left;
}

.identitas h1 {
  margin: 0 0 8px;
}

.identitas h2 {
  margin: 0 0 4px;
  font-size: 20px;
}

.identitas h3 {
  margin: 0;
  font-size: 16px;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.menu a {
  border-radius: 8px;
  background-color: white;
}

.profil-layout {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
}

.profil-info {
  flex: 1;
  min-width: 0;
}

.kartu-profil h2 {
  margin: 0 0 20px;
}

.daftar-kartu {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding-left: 0;
  list-style-position: inside;
}

.kartu-minat {
  flex: 1 1 220px;
  padding: 16px;
  border: 1px solid #d7dce7;
  border-radius: 12px;
  background-color: #e9eef7;
  min-width: 0;
}

/* DITAMBAHKAN PADA TAHAP 08: aturan khusus layar kecil */
@media (max-width: 600px) {
  .navigasi {
    flex-direction: column;
    align-items: flex-start;
  }

  .profil-layout {
    flex-direction: column;
    align-items: flex-start;
  }
}

← Tahap 07 Lihat hasil akhir P04

Checklist akhir

Isi dan identitas P03 tetap lengkap.
Box Model dan Flexbox mengatur layout.
Seluruh navigasi internal berfungsi.
Tidak ada scroll horizontal pada lebar 320px dan 390px.
Perubahan sudah disimpan ke file HTML/CSS.