(+62) 8970 127 001 [email protected]
#JadilahGenerasiTeknologi
Beranda Artikel Detail
Programming

Membangun Layout Web Modern: Flexbox, Navbar, Card, dan Responsive Design

Diterbitkan15 Sep 2026
Statistik Pembaca5 dibaca
Membangun Layout Web Modern: Flexbox, Navbar, Card, dan Responsive Design

Pada Pertemuan 3 kita sudah mulai mempercantik halaman menggunakan CSS. Kita sudah mengenal selector, warna, typography, margin, padding, border, dan box model. Namun halaman yang kita buat masih lebih banyak tersusun dari atas ke bawah.

Di Pertemuan 4 kita akan belajar membuat layout web modern. Kita akan menggunakan Flexbox untuk mengatur posisi elemen, membuat navbar horizontal, menyusun card, dan membuat tampilan yang dapat menyesuaikan ukuran layar.

Materi tetap dibagi menjadi 5 bagian utama dan setiap bagian ditutup dengan praktik coding. Pada akhir pertemuan, mahasiswa akan membuat Landing Page Responsif.

Target Pembelajaran

Setelah menyelesaikan pertemuan ini, mahasiswa diharapkan mampu:

  • Memahami konsep dasar layout pada website.
  • Memahami fungsi property display.
  • Menggunakan Flexbox untuk menyusun elemen.
  • Menggunakan flex-direction, justify-content, align-items, gap, dan flex-wrap.
  • Membuat navbar horizontal.
  • Membuat hero section dua kolom.
  • Membuat kumpulan card.
  • Menggunakan container dan max-width.
  • Memahami responsive design.
  • Menggunakan media query.
  • Menguji tampilan website pada ukuran layar yang berbeda.
  • Membuat Landing Page Responsif sebagai mini project.

Materi 1 — Mengenal Layout, Display, dan Container

Layout adalah cara kita mengatur posisi dan susunan elemen di dalam halaman web. Jika elemen hanya mengikuti perilaku bawaan HTML, halaman memang tetap bisa digunakan, tetapi tampilannya belum tentu rapi.

Kita bisa membayangkan layout seperti menata isi sebuah ruangan. Bukan hanya memilih warna dinding, tetapi juga menentukan posisi meja, kursi, lemari, dan jarak di antaranya.

Property display

Property display menentukan bagaimana sebuah elemen ditampilkan. Beberapa nilai yang perlu kita kenal adalah:

  • block — elemen cenderung mengambil satu baris penuh.
  • inline — elemen berada dalam satu baris dengan elemen lain.
  • inline-block — dapat berjajar tetapi ukuran dan padding tetap mudah diatur.
  • flex — mengaktifkan Flexbox.

Container

Container digunakan agar isi website tidak terlalu melebar ketika dibuka pada layar besar.

Contoh Container

.container {
    width: 90%;
    max-width: 1100px;

    margin: 0 auto;
    padding: 40px 0;
}

width: 90% membuat lebar container mengikuti ukuran layar, sedangkan max-width: 1100px memberikan batas maksimal agar konten tetap nyaman dibaca.

Nilai margin: 0 auto; digunakan agar container berada di tengah secara horizontal.

Coding 1 — Membuat Layout Dasar dengan Container

Buat struktur folder berikut:

Struktur Folder Project

pertemuan-04/
|
+-- index.html
|
+-- css/
    |
    +-- style.css

index.html

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Layout Dasar</title>

    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <div class="container">
        <h1>Belajar Layout Web</h1>

        <p>
            Konten ini berada di dalam container agar
            lebih rapi pada berbagai ukuran layar.
        </p>

        <a class="tombol" href="#">
            Mulai Belajar
        </a>
    </div>

</body>
</html>

css/style.css

* {
    box-sizing: border-box;
}

body {
    margin: 0;

    font-family: Arial, sans-serif;

    background-color: #f3f4f6;
}

.container {
    width: 90%;
    max-width: 1100px;

    margin: 0 auto;
    padding: 40px 0;
}

.tombol {
    display: inline-block;

    padding: 10px 18px;

    background-color: #2563eb;
    color: white;

    text-decoration: none;

    border-radius: 8px;
}

Jika Layout Terlihat Terlalu Lebar
Periksa apakah container sudah menggunakan max-width. Jangan langsung menggunakan width tetap yang terlalu besar karena dapat bermasalah pada layar kecil.

Target Coding 1: mahasiswa mampu membuat container dan memahami fungsi dasar property display.

Materi 2 — Menyusun Elemen dengan Flexbox

Flexbox adalah sistem layout CSS yang membantu kita menyusun elemen dengan lebih mudah. Flexbox sangat cocok untuk navbar, hero section, card, tombol, dan berbagai layout satu dimensi.

Mengaktifkan Flexbox

Mengaktifkan Flexbox

.container-flex {
    display: flex;
}

flex-direction

Property flex-direction menentukan arah susunan item.

Arah Flexbox

.container-flex {
    display: flex;
    flex-direction: row;
}

Nilai row membuat elemen berjajar ke samping, sedangkan column membuat elemen tersusun dari atas ke bawah.

justify-content

Property justify-content digunakan untuk mengatur posisi item pada sumbu utama.

Mengatur Posisi Item

.container-flex {
    display: flex;
    justify-content: space-between;
}

align-items

Property align-items membantu menyelaraskan posisi item pada sumbu lainnya.

Menyelaraskan Item

.container-flex {
    display: flex;
    align-items: center;
}

gap

Property gap memberikan jarak antaritem tanpa perlu memberi margin satu per satu.

Memberi Jarak Antaritem

.container-flex {
    display: flex;
    gap: 20px;
}

flex-wrap

Jika ruang tidak cukup, flex-wrap memungkinkan item turun ke baris berikutnya.

Mengizinkan Item Turun Baris

.container-flex {
    display: flex;
    flex-wrap: wrap;
}

Coding 2 — Membuat Hero Section Dua Kolom

Hero section biasanya menjadi bagian pertama yang dilihat pengguna setelah navbar. Kita akan membuat bagian teks di kiri dan gambar di kanan.

HTML Hero Section

<section class="hero">
    <div class="hero-text">
        <h1>Belajar Web Development</h1>

        <p>
            Mulai dari HTML, CSS, JavaScript,
            PHP, hingga MySQL.
        </p>

        <a class="tombol" href="#">
            Mulai Sekarang
        </a>
    </div>

    <div class="hero-image">
        <img
            src="images/web-development.jpg"
            alt="Ilustrasi belajar web development"
        >
    </div>
</section>

CSS Flexbox Hero

.hero {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 40px;
}

.hero-text {
    flex: 1;
}

.hero-image {
    flex: 1;
}

.hero-image img {
    width: 100%;
    display: block;

    border-radius: 16px;
}

Coba Eksperimen
Ubah flex-direction menjadi column, ubah nilai gap, atau hapus align-items lalu perhatikan perubahan tampilan di browser.

Target Coding 2: mahasiswa mampu membuat layout dua kolom menggunakan Flexbox.

Materi 3 — Membuat Navbar Horizontal

Pada Pertemuan 2 kita sudah membuat navigasi menggunakan list dan hyperlink. Sekarang kita akan mengubah menu tersebut menjadi navbar horizontal menggunakan Flexbox.

Coding 3 — Membuat Navbar Modern

HTML Navbar

<header class="navbar">
    <div class="container nav-content">

        <a class="brand" href="#">
            WebClass
        </a>

        <nav>
            <ul class="nav-menu">
                <li><a href="#beranda">Beranda</a></li>
                <li><a href="#fitur">Materi</a></li>
                <li><a href="#tentang">Tentang</a></li>
                <li><a href="#kontak">Kontak</a></li>
            </ul>
        </nav>

    </div>
</header>

CSS Navbar

.navbar {
    background-color: #111827;
}

.nav-content {
    display: flex;

    align-items: center;
    justify-content: space-between;

    min-height: 70px;
}

.brand {
    color: white;

    font-size: 22px;
    font-weight: bold;

    text-decoration: none;
}

.nav-menu {
    display: flex;

    gap: 24px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.nav-menu a {
    color: white;

    text-decoration: none;
}

.nav-menu a:hover {
    color: #60a5fa;
}

Property list-style: none; digunakan untuk menghilangkan bullet pada list. Kemudian display: flex membuat item menu berjajar ke samping.

Selector :hover digunakan untuk memberikan perubahan tampilan ketika pointer mouse berada di atas link.

Target Coding 3: mahasiswa mampu membuat navbar horizontal menggunakan Flexbox.

Materi 4 — Membuat Card dan Responsive Design

Card sering digunakan untuk menampilkan layanan, materi, produk, artikel, atau informasi singkat. Kita akan membuat beberapa card yang dapat berjajar dan turun ke baris berikutnya jika ruang tidak cukup.

Card Container

Flexbox untuk Card

.card-container {
    display: flex;

    gap: 20px;

    flex-wrap: wrap;
}

Responsive Design

Responsive design adalah cara membuat tampilan website tetap nyaman pada ukuran layar yang berbeda. Website yang baik tidak hanya terlihat rapi di laptop, tetapi juga dapat digunakan dengan baik di smartphone.

Media Query

Media query digunakan untuk menerapkan CSS tertentu berdasarkan ukuran layar.

Contoh Media Query

@media (max-width: 768px) {
    .hero {
        flex-direction: column;
    }
}

Kode tersebut berarti: jika lebar layar 768px atau lebih kecil, hero akan berubah dari susunan ke samping menjadi susunan ke bawah.

Coding 4 — Membuat Feature Cards Responsif

HTML Feature Cards

<section id="fitur" class="fitur">
    <div class="container">

        <h2>Materi yang Akan Dipelajari</h2>

        <div class="card-container">

            <article class="card">
                <h3>HTML</h3>
                <p>
                    Belajar menyusun struktur halaman web.
                </p>
            </article>

            <article class="card">
                <h3>CSS</h3>
                <p>
                    Belajar mengatur tampilan dan layout.
                </p>
            </article>

            <article class="card">
                <h3>JavaScript</h3>
                <p>
                    Belajar membuat halaman menjadi interaktif.
                </p>
            </article>

        </div>

    </div>
</section>

CSS Responsive Cards

.fitur {
    padding: 60px 0;
}

.card-container {
    display: flex;

    gap: 20px;

    flex-wrap: wrap;
}

.card {
    flex: 1 1 250px;

    padding: 24px;

    background-color: white;

    border: 1px solid #e5e7eb;
    border-radius: 12px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

@media (max-width: 768px) {
    .card-container {
        flex-direction: column;
    }
}

Konsep Penting
Responsive design bukan sekadar memperkecil tampilan desktop. Yang paling penting adalah susunan konten tetap nyaman dibaca dan digunakan pada layar kecil.

Target Coding 4: mahasiswa mampu membuat beberapa card yang fleksibel dan menyesuaikan tampilannya pada layar kecil.

Materi 5 — Mini Project: Landing Page Responsif

Pada bagian terakhir kita akan menggabungkan semua materi hari ini:

  • Container.
  • Display.
  • Flexbox.
  • Navbar.
  • Hero section.
  • Card.
  • flex-wrap.
  • Media query.
  • Responsive design.

Kita akan membuat sebuah Landing Page Responsif yang dapat dibuka dengan nyaman dari laptop maupun smartphone.

Struktur Project

Struktur Folder

landing-page/
|
+-- index.html
|
+-- css/
|   |
|   +-- style.css
|
+-- images/
    |
    +-- hero.jpg

Coding 5 — Landing Page Responsif Lengkap

index.html

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>WebClass - Belajar Web Development</title>

    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <header class="navbar">
        <div class="container nav-content">

            <a class="brand" href="#">
                WebClass
            </a>

            <nav>
                <ul class="nav-menu">
                    <li><a href="#beranda">Beranda</a></li>
                    <li><a href="#fitur">Materi</a></li>
                    <li><a href="#tentang">Tentang</a></li>
                </ul>
            </nav>

        </div>
    </header>

    <main>

        <section id="beranda" class="hero">
            <div class="container hero-content">

                <div class="hero-text">
                    <p class="label">
                        Web Development Dasar
                    </p>

                    <h1>
                        Belajar Membuat Website
                        dari Nol sampai Bisa
                    </h1>

                    <p>
                        Mulai dari HTML, CSS, JavaScript,
                        PHP, hingga MySQL dengan latihan
                        bertahap dan project sederhana.
                    </p>

                    <a class="btn-primary" href="#fitur">
                        Lihat Materi
                    </a>
                </div>

                <div class="hero-image">
                    <img
                        src="images/hero.jpg"
                        alt="Ilustrasi belajar web development"
                    >
                </div>

            </div>
        </section>

        <section id="fitur" class="features">
            <div class="container">

                <div class="section-heading">
                    <p class="label">Materi</p>
                    <h2>Apa yang Akan Dipelajari?</h2>
                </div>

                <div class="card-container">

                    <article class="card">
                        <h3>HTML</h3>
                        <p>
                            Menyusun struktur halaman web
                            dengan elemen HTML yang tepat.
                        </p>
                    </article>

                    <article class="card">
                        <h3>CSS</h3>
                        <p>
                            Mengatur warna, typography,
                            layout, dan responsive design.
                        </p>
                    </article>

                    <article class="card">
                        <h3>JavaScript</h3>
                        <p>
                            Membuat halaman web menjadi
                            lebih interaktif.
                        </p>
                    </article>

                </div>

            </div>
        </section>

        <section id="tentang" class="about">
            <div class="container">

                <h2>Belajar Bertahap</h2>

                <p>
                    Materi disusun dari dasar hingga mahasiswa
                    mampu membangun aplikasi web CRUD sederhana.
                </p>

            </div>
        </section>

    </main>

    <footer class="footer">
        <div class="container">
            <p>
                &copy; 2026 WebClass.
                Praktikum Perancangan dan Pemrograman Website.
            </p>
        </div>
    </footer>

</body>
</html>

css/style.css

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    font-family: Arial, sans-serif;

    background-color: #f8fafc;
    color: #1f2937;
}

.container {
    width: 90%;
    max-width: 1100px;

    margin: 0 auto;
}

/* Navbar */
.navbar {
    background-color: #111827;
}

.nav-content {
    display: flex;

    align-items: center;
    justify-content: space-between;

    min-height: 70px;
}

.brand {
    color: white;

    font-size: 22px;
    font-weight: bold;

    text-decoration: none;
}

.nav-menu {
    display: flex;

    gap: 24px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.nav-menu a {
    color: white;

    text-decoration: none;
}

.nav-menu a:hover {
    color: #60a5fa;
}

/* Hero */
.hero {
    padding: 70px 0;

    background-color: #eff6ff;
}

.hero-content {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 50px;
}

.hero-text,
.hero-image {
    flex: 1;
}

.hero-text h1 {
    margin-top: 10px;
    margin-bottom: 18px;

    font-size: 46px;
    line-height: 1.15;

    color: #111827;
}

.hero-text p {
    line-height: 1.7;
}

.label {
    color: #2563eb;

    font-size: 14px;
    font-weight: bold;

    text-transform: uppercase;
}

.hero-image img {
    width: 100%;
    display: block;

    border-radius: 18px;
}

.btn-primary {
    display: inline-block;

    margin-top: 14px;
    padding: 12px 20px;

    background-color: #2563eb;
    color: white;

    text-decoration: none;

    border-radius: 8px;
}

/* Features */
.features {
    padding: 70px 0;
}

.section-heading {
    margin-bottom: 30px;

    text-align: center;
}

.card-container {
    display: flex;

    gap: 20px;

    flex-wrap: wrap;
}

.card {
    flex: 1 1 250px;

    padding: 26px;

    background-color: white;

    border: 1px solid #e5e7eb;
    border-radius: 14px;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
}

.card h3 {
    margin-top: 0;

    color: #2563eb;
}

.card p {
    line-height: 1.7;
}

/* About */
.about {
    padding: 60px 0;

    background-color: white;

    text-align: center;
}

.about p {
    max-width: 650px;

    margin: 0 auto;

    line-height: 1.7;
}

/* Footer */
.footer {
    padding: 22px 0;

    background-color: #111827;
    color: white;

    text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
    .nav-content {
        flex-direction: column;

        gap: 14px;

        padding: 18px 0;
    }

    .nav-menu {
        flex-wrap: wrap;
        justify-content: center;
    }

    .hero-content {
        flex-direction: column;
    }

    .hero-text {
        text-align: center;
    }

    .hero-text h1 {
        font-size: 34px;
    }

    .card-container {
        flex-direction: column;
    }
}

Uji Responsive Design
Setelah project selesai, buka Developer Tools kemudian aktifkan tampilan mobile. Coba beberapa ukuran layar dan perhatikan perubahan navbar, hero section, serta card.

Target Coding 5: mahasiswa mampu membuat landing page sederhana yang responsif dan tetap nyaman digunakan pada desktop maupun smartphone.

Debugging Challenge

Perhatikan CSS berikut. Source code sengaja dibuat memiliki beberapa masalah.

CSS yang Harus Diperbaiki

.nav-menu {
    display flex;
    gap: 20px;
}

hero {
    display: flex;
    justify-content: space-between;
}

.card-container {
    display: flex;
    flex-wrap: rap;
}

@media max-width: 768px {
    .hero {
        flex-direction: column;
    }
}

.hero-image img {
    width: 100;
}

Tugas mahasiswa:

  1. Perbaiki penulisan property display.
  2. Perbaiki selector class hero.
  3. Perbaiki nilai flex-wrap.
  4. Perbaiki penulisan media query.
  5. Perbaiki nilai width gambar.

Salah Satu Hasil Perbaikannya

CSS Setelah Diperbaiki

.nav-menu {
    display: flex;
    gap: 20px;
}

.hero {
    display: flex;
    justify-content: space-between;
}

.card-container {
    display: flex;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .hero {
        flex-direction: column;
    }
}

.hero-image img {
    width: 100%;
}

Challenge Pertemuan 4

Buat sebuah Landing Page untuk Program Studi, Organisasi, UKM, atau Produk Digital menggunakan konsep yang sudah dipelajari. Jangan hanya mengganti teks dari contoh. Gunakan kreativitas masing-masing.

Minimal memiliki:

  • Navbar.
  • Nama brand atau logo.
  • Hero section.
  • Judul utama dan deskripsi.
  • Tombol call-to-action.
  • Minimal tiga card.
  • Section tentang atau keunggulan.
  • Footer.

CSS minimal menggunakan:

  • display: flex.
  • justify-content.
  • align-items.
  • gap.
  • flex-wrap.
  • max-width.
  • Minimal satu media query.
  • Layout berubah menjadi satu kolom pada layar kecil.

Evaluasi Pemahaman

  1. Apa yang dimaksud layout dalam halaman web?
  2. Apa fungsi property display?
  3. Apa fungsi display: flex?
  4. Apa fungsi flex-direction?
  5. Apa perbedaan row dan column?
  6. Apa fungsi justify-content?
  7. Apa fungsi align-items?
  8. Apa fungsi gap?
  9. Apa fungsi flex-wrap?
  10. Mengapa container menggunakan max-width?
  11. Apa fungsi margin: 0 auto?
  12. Mengapa navbar cocok dibuat menggunakan Flexbox?
  13. Apa yang dimaksud responsive design?
  14. Apa fungsi media query?
  15. Apa arti @media (max-width: 768px)?
  16. Mengapa gambar sering menggunakan width: 100%?
  17. Mengapa meta viewport penting untuk responsive design?
  18. Apa keuntungan menggunakan flex-wrap pada card?
  19. Mengapa website perlu diuji pada beberapa ukuran layar?
  20. Apa fungsi Developer Tools untuk menguji responsive design?

Checklist Kompetensi Pertemuan 4

Sebelum melanjutkan ke Pertemuan 5, mahasiswa seharusnya sudah mampu:

  • Membuat container yang fleksibel.
  • Menggunakan property display.
  • Menggunakan Flexbox.
  • Mengatur flex-direction.
  • Menggunakan justify-content.
  • Menggunakan align-items.
  • Menggunakan gap.
  • Menggunakan flex-wrap.
  • Membuat navbar horizontal.
  • Membuat hero section dua kolom.
  • Membuat beberapa card.
  • Menggunakan media query.
  • Membuat layout satu kolom pada layar kecil.
  • Menguji responsive design melalui Developer Tools.
  • Membuat Landing Page Responsif.

Rangkuman Pertemuan 4

Di Pertemuan 4 kita mulai mengatur susunan elemen pada halaman. CSS tidak hanya digunakan untuk warna dan typography, tetapi juga untuk membentuk layout yang lebih modern dan responsif.

Lima praktik yang sudah dilakukan:

  1. Coding 1: membuat layout dasar menggunakan container.
  2. Coding 2: membuat hero section dua kolom menggunakan Flexbox.
  3. Coding 3: membuat navbar horizontal.
  4. Coding 4: membuat feature cards yang responsif.
  5. Coding 5: membuat Landing Page Responsif.

Perkembangan kemampuan kita sekarang:

Perkembangan Kompetensi

Pertemuan 1
HTML Dasar
    |
    v
Pertemuan 2
Semantic HTML, List, Table, Form
    |
    v
Pertemuan 3
CSS Dasar dan Box Model
    |
    v
Pertemuan 4
Layout Modern
    |
    +-- Flexbox
    +-- Navbar
    +-- Card
    +-- Responsive Design
    |
    v
Landing Page Responsif

Menuju Pertemuan 5

Saat ini website kita sudah memiliki struktur HTML yang baik dan layout CSS yang responsif. Namun halaman tersebut masih belum memiliki logika pemrograman.

Bagaimana jika kita ingin menghitung nilai? Bagaimana membuat program mengambil keputusan? Bagaimana menjalankan perintah berulang kali?

Untuk menjawab pertanyaan tersebut, pada pertemuan berikutnya kita akan mulai masuk ke:

Pertemuan 5 — Membuat Web Mulai Berpikir: Dasar JavaScript, Variabel, Operator, Kondisi, dan Perulangan

Artikel Lainnya

Lihat Semua Artikel
Saatnya Mempercantik Web: Mengenal CSS, Selector, Warna, Typography, dan Box Model
Programming

Saatnya Mempercantik Web: Mengenal CSS, Selector, Warna, Typography, dan Box Model
Dari Halaman Statis ke Form Interaktif: Semantic HTML, List, Table, dan Form
Programming

Dari Halaman Statis ke Form Interaktif: Semantic HTML, List, Table, dan Form
Dari Nol ke Halaman Web Pertama: Memahami Cara Kerja Web dan Dasar HTML
Programming

Dari Nol ke Halaman Web Pertama: Memahami Cara Kerja Web dan Dasar HTML
© 2026 STTI NIIT I-Tech. All Rights Reserved.
Sekolah Tinggi Teknologi Informasi NIIT