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

Topik: CSS Layout, Flexbox, Navbar, Product Card, Media Query, dan Responsive Web Design

Pada Pertemuan 3 kita sudah menggunakan CSS untuk mengatur warna, typography, dan Box Model. Pada Pertemuan 4 website kita mulai memiliki logika menggunakan JavaScript melalui Kalkulator Transaksi Penjualan. Sekarang kita memperkuat sisi tampilan agar halaman tidak hanya terlihat rapi, tetapi juga memiliki layout yang nyaman pada berbagai ukuran layar.

Di pertemuan ini kita akan mempelajari container, property display, Flexbox, navbar horizontal, Product Card, flex-wrap, serta media query. Semua konsep diterapkan pada project Sistem Penjualan Sederhana.

Output akhirnya adalah Responsive Store Landing Page yang menampilkan identitas usaha, navigasi, hero section, katalog produk, dan informasi singkat dengan tampilan yang menyesuaikan ukuran layar.

Fokus Pertemuan 5
Responsive design bukan berarti membuat dua website berbeda untuk desktop dan smartphone. Kita membuat satu halaman yang mampu menyesuaikan susunan, ukuran, dan ruang berdasarkan layar pengguna.

Materi dibagi menjadi 5 bagian utama. Setiap bagian ditutup dengan praktik coding yang berkembang dari layout sederhana sampai mini project.

Target Pembelajaran

Memahami pengertian layout pada halaman web.
Memahami perilaku dasar block dan inline secara sederhana.
Menggunakan container untuk membatasi lebar konten.
Memahami fungsi property display.
Mengaktifkan Flexbox menggunakan display: flex.
Menggunakan flex-direction, justify-content, align-items, gap, dan flex-wrap.
Membuat layout dua kolom.
Membuat navbar horizontal menggunakan Flexbox.
Menggunakan pseudo-class :hover.
Membuat beberapa Product Card dalam satu container.
Memahami prinsip Responsive Web Design.
Menggunakan media query dan meta viewport.
Menguji website pada ukuran layar berbeda.
Membuat Responsive Store Landing Page.

Materi 1 — Mengenal Layout, Display, dan Container

Layout adalah cara kita mengatur posisi dan susunan elemen pada halaman web. Jika semua elemen hanya mengikuti perilaku bawaan HTML, halaman memang tetap bekerja, tetapi tampilan dapat terasa terlalu lebar atau kurang teratur.

Kita dapat membayangkan layout seperti menata sebuah toko. Produk, kasir, rak, dan papan informasi tidak diletakkan secara acak. Website juga membutuhkan susunan yang jelas agar pengguna mudah memahami isinya.

Block dan Inline Secara Sederhana

Elemen seperti div, section, dan p secara umum menggunakan ruang satu baris, sedangkan elemen seperti a dan span biasanya mengikuti aliran teks. CSS memiliki property display untuk mengubah cara elemen ditampilkan.

Mengapa Membutuhkan Container?

Pada layar laptop yang lebar, teks tidak nyaman dibaca jika memanjang dari kiri sampai kanan layar. Container membantu membatasi lebar konten dan menjaga halaman berada di area yang nyaman.

Contoh Container

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

    margin: 0 auto;
}

width: 90% memberi ruang di sisi kiri dan kanan. max-width membatasi konten agar tidak terlalu lebar. margin: 0 auto menempatkan container di tengah secara horizontal.

Coding 1 — Membuat Layout Container untuk Toko

index.html

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NusaTech Store</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <main class="container">
        <h1>NusaTech Store</h1>
        <p>Perlengkapan digital untuk belajar, bekerja, dan berkembang.</p>
        <h2>Produk Pilihan</h2>
        <p>Keyboard Mechanical</p>
        <p>Mouse Wireless</p>
        <p>Headset Gaming</p>
    </main>
</body>
</html>

css/style.css

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f3f4f6;
    color: #1f2937;
}

.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 0;
}

h1 {
    color: #1d4ed8;
}

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

Target Coding 1: mahasiswa mampu membuat container dan memahami alasan pembatasan lebar konten.

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, kelompok tombol, card, dan berbagai layout satu dimensi.

Mengaktifkan Flexbox

.hero {
    display: flex;
}

Setelah display: flex diberikan pada parent, elemen anaknya menjadi flex items. Kita kemudian dapat mengatur arah, jarak, dan posisinya.

Property Penting Flexbox

flex-direction — arah susunan item.
justify-content — posisi item pada main axis.
align-items — posisi item pada cross axis.
gap — jarak antaritem.
flex-wrap — mengizinkan item turun ke baris berikutnya.

Contoh Property Flexbox

.hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}

Coding 2 — Membuat Hero Section Dua Kolom

HTML Hero Section

<section class="hero">
    <div class="hero-text">
        <p class="label">NusaTech Store</p>
        <h1>Perlengkapan Digital untuk Aktivitas Modern</h1>
        <p>Temukan produk pilihan untuk mendukung kegiatan belajar, bekerja, dan berkreasi.</p>
        <a class="button" href="#produk">Lihat Produk</a>
    </div>

    <div class="hero-image">
        <img src="images/hero-store.jpg" alt="Produk pilihan NusaTech Store">
    </div>
</section>

CSS Hero Section

.hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    min-height: 420px;
}

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

.hero-image img {
    width: 100%;
    border-radius: 16px;
}

.label {
    color: #2563eb;
    font-weight: bold;
}

.button {
    display: inline-block;
    margin-top: 12px;
    padding: 12px 20px;
    background-color: #2563eb;
    color: white;
    text-decoration: none;
    border-radius: 8px;
}

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

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 struktur tersebut kita ubah menjadi navbar horizontal menggunakan Flexbox.

Coding 3 — Membuat Navbar NusaTech Store

HTML Navbar

<header class="site-header">
    <div class="container navbar">
        <a class="brand" href="#beranda">NusaTech Store</a>

        <nav>
            <ul class="nav-menu">
                <li><a href="#beranda">Beranda</a></li>
                <li><a href="#produk">Produk</a></li>
                <li><a href="#tentang">Tentang</a></li>
                <li><a href="#kontak">Kontak</a></li>
            </ul>
        </nav>
    </div>
</header>

CSS Navbar

.site-header {
    background-color: white;
    border-bottom: 1px solid #e5e7eb;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 72px;
}

.brand {
    color: #1d4ed8;
    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: #374151;
    text-decoration: none;
}

.nav-menu a:hover {
    color: #2563eb;
}

list-style: none menghilangkan bullet. display: flex membuat menu berjajar horizontal. Pseudo-class :hover memberi perubahan tampilan ketika pointer berada di atas link.

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

Materi 4 — Product Card, Flex-Wrap, dan Responsive Design

Pada Pertemuan 3 kita sudah membuat satu Product Card. Sekarang beberapa Product Card akan disusun dalam satu area menggunakan Flexbox.

Card Container dan flex-wrap

Flexbox untuk Product Card

.product-list {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

Ukuran Product Card

.product-card {
    flex: 1 1 280px;
    padding: 20px;
    background-color: white;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
}

flex-wrap: wrap memungkinkan card turun ke baris berikutnya ketika ruang horizontal tidak cukup. Pada flex: 1 1 280px, nilai 280px menjadi ukuran dasar card yang masih dapat menyesuaikan ruang.

Apa Itu Responsive Web Design?

Responsive Web Design adalah pendekatan agar halaman dapat menyesuaikan tampilan berdasarkan ukuran layar. Tujuannya bukan hanya mengecilkan elemen, tetapi menjaga konten tetap mudah dibaca dan digunakan.

Media Query

Media Query Dasar

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

    .navbar {
        flex-direction: column;
        padding: 18px 0;
    }

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

Meta Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Coding 4 — Membuat Katalog Produk Responsif

HTML Katalog

<section class="products" id="produk">
    <div class="container">
        <div class="section-heading">
            <p class="label">Katalog</p>
            <h2>Produk Pilihan</h2>
            <p>Pilih perlengkapan digital sesuai kebutuhan Anda.</p>
        </div>

        <div class="product-list">
            <article class="product-card">
                <img src="images/keyboard.jpg" alt="Keyboard Mechanical">
                <h3>Keyboard Mechanical</h3>
                <p class="price">Rp350.000</p>
                <p>Stok: 10</p>
            </article>

            <article class="product-card">
                <img src="images/mouse.jpg" alt="Mouse Wireless">
                <h3>Mouse Wireless</h3>
                <p class="price">Rp150.000</p>
                <p>Stok: 15</p>
            </article>

            <article class="product-card">
                <img src="images/headset.jpg" alt="Headset Gaming">
                <h3>Headset Gaming</h3>
                <p class="price">Rp275.000</p>
                <p>Stok: 8</p>
            </article>
        </div>
    </div>
</section>

CSS Katalog Responsif

.products {
    padding: 70px 0;
}

.section-heading {
    margin-bottom: 32px;
    text-align: center;
}

.product-list {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.product-card {
    flex: 1 1 280px;
    padding: 20px;
    background-color: white;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
}

.product-card img {
    width: 100%;
    border-radius: 10px;
}

.price {
    color: #047857;
    font-size: 20px;
    font-weight: bold;
}

@media (max-width: 600px) {
    .products {
        padding: 45px 0;
    }
}

Konsep Penting
Responsive design bukan sekadar memperkecil website desktop. Susunan konten, ukuran elemen, jarak, dan navigasi harus tetap nyaman digunakan pada layar kecil.

Target Coding 4: mahasiswa mampu membuat Product Card yang fleksibel dan memahami media query dasar.

Materi 5 — Mini Project: Responsive Store Landing Page

Pada bagian terakhir kita menggabungkan container, Flexbox, navbar, hero section, Product Card, flex-wrap, dan media query. Landing page ini masih menggunakan data produk statis. Pada Pertemuan 6 kita mulai masuk ke PHP agar halaman dapat memproses data di server.

Struktur Project

Struktur Folder Project

responsive-store/
|
+-- index.html
|
+-- css/
|   |
|   +-- style.css
|
+-- images/
    |
    +-- hero-store.jpg
    +-- keyboard.jpg
    +-- mouse.jpg
    +-- headset.jpg

Coding 5 — Responsive Store Landing Page

index.html

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NusaTech Store</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header class="site-header">
        <div class="container navbar">
            <a class="brand" href="#beranda">NusaTech Store</a>
            <nav>
                <ul class="nav-menu">
                    <li><a href="#beranda">Beranda</a></li>
                    <li><a href="#produk">Produk</a></li>
                    <li><a href="#tentang">Tentang</a></li>
                    <li><a href="#kontak">Kontak</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <section class="hero" id="beranda">
            <div class="container hero-inner">
                <div class="hero-text">
                    <p class="label">Toko Digital Sederhana</p>
                    <h1>Perlengkapan Digital untuk Belajar dan Bekerja</h1>
                    <p class="hero-description">Temukan produk pilihan dengan informasi harga dan stok yang mudah dibaca.</p>
                    <a class="button" href="#produk">Lihat Produk</a>
                </div>
                <div class="hero-image">
                    <img src="images/hero-store.jpg" alt="Perlengkapan digital NusaTech Store">
                </div>
            </div>
        </section>

        <section class="products" id="produk">
            <div class="container">
                <div class="section-heading">
                    <p class="label">Katalog</p>
                    <h2>Produk Pilihan</h2>
                    <p>Contoh produk yang nanti akan dikelola melalui Sistem Penjualan.</p>
                </div>

                <div class="product-list">
                    <article class="product-card">
                        <img src="images/keyboard.jpg" alt="Keyboard Mechanical">
                        <h3>Keyboard Mechanical</h3>
                        <p class="price">Rp350.000</p>
                        <p>Stok: 10</p>
                        <a class="product-link" href="#kontak">Tanya Produk</a>
                    </article>

                    <article class="product-card">
                        <img src="images/mouse.jpg" alt="Mouse Wireless">
                        <h3>Mouse Wireless</h3>
                        <p class="price">Rp150.000</p>
                        <p>Stok: 15</p>
                        <a class="product-link" href="#kontak">Tanya Produk</a>
                    </article>

                    <article class="product-card">
                        <img src="images/headset.jpg" alt="Headset Gaming">
                        <h3>Headset Gaming</h3>
                        <p class="price">Rp275.000</p>
                        <p>Stok: 8</p>
                        <a class="product-link" href="#kontak">Tanya Produk</a>
                    </article>
                </div>
            </div>
        </section>

        <section class="about" id="tentang">
            <div class="container about-inner">
                <div>
                    <p class="label">Tentang Project</p>
                    <h2>Dari Landing Page Menuju Sistem Penjualan</h2>
                </div>
                <p>Project ini akan berkembang dari HTML, CSS, JavaScript, PHP, MySQL, CRUD Native, hingga Laravel.</p>
            </div>
        </section>

        <section class="contact" id="kontak">
            <div class="container">
                <h2>Hubungi NusaTech Store</h2>
                <p>Email: [email protected]</p>
            </div>
        </section>
    </main>

    <footer class="site-footer">
        <div class="container">
            <p>&copy; 2026 NusaTech Store</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;
}

img {
    max-width: 100%;
}

.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
}

.site-header {
    background-color: white;
    border-bottom: 1px solid #e5e7eb;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 72px;
}

.brand {
    color: #1d4ed8;
    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: #374151;
    text-decoration: none;
}

.nav-menu a:hover {
    color: #2563eb;
}

.hero {
    padding: 70px 0;
    background-color: #eff6ff;
}

.hero-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 48px;
}

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

.hero-image img {
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}

.label {
    color: #2563eb;
    font-size: 14px;
    font-weight: bold;
}

.hero h1 {
    margin-top: 10px;
    margin-bottom: 16px;
    font-size: 44px;
    line-height: 1.15;
}

.hero-description {
    color: #4b5563;
    font-size: 18px;
    line-height: 1.7;
}

.button {
    display: inline-block;
    margin-top: 12px;
    padding: 12px 20px;
    background-color: #2563eb;
    color: white;
    text-decoration: none;
    border-radius: 8px;
}

.products {
    padding: 70px 0;
}

.section-heading {
    margin-bottom: 32px;
    text-align: center;
}

.section-heading h2 {
    margin-top: 8px;
    margin-bottom: 10px;
    font-size: 32px;
}

.product-list {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.product-card {
    flex: 1 1 280px;
    padding: 20px;
    background-color: white;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
}

.product-card img {
    width: 100%;
    border-radius: 10px;
}

.price {
    color: #047857;
    font-size: 20px;
    font-weight: bold;
}

.product-link {
    display: inline-block;
    margin-top: 8px;
    color: #2563eb;
    font-weight: bold;
    text-decoration: none;
}

.product-link:hover {
    text-decoration: underline;
}

.about {
    padding: 65px 0;
    background-color: white;
}

.about-inner {
    display: flex;
    align-items: center;
    gap: 50px;
}

.about-inner > div,
.about-inner > p {
    flex: 1;
}

.about-inner p {
    line-height: 1.8;
}

.contact {
    padding: 55px 0;
    text-align: center;
}

.site-footer {
    padding: 24px 0;
    background-color: #111827;
    color: white;
    text-align: center;
}

@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        gap: 14px;
        padding: 18px 0;
    }

    .nav-menu {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px 20px;
    }

    .hero {
        padding: 50px 0;
    }

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

    .hero h1 {
        font-size: 36px;
    }

    .about-inner {
        flex-direction: column;
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .container {
        width: 92%;
    }

    .hero h1 {
        font-size: 30px;
    }

    .hero-description {
        font-size: 16px;
    }

    .products {
        padding: 45px 0;
    }

    .product-card {
        flex-basis: 100%;
    }
}

Cara Menguji Responsive Design
Buka Developer Tools pada browser lalu aktifkan mode perangkat atau ubah lebar browser secara perlahan. Perhatikan perubahan navbar, hero section, Product Card, dan section Tentang saat layar semakin kecil.

Target Coding 5: mahasiswa mampu membuat Responsive Store Landing Page menggunakan HTML dan CSS.

Debugging Challenge

Perhatikan CSS berikut. Tampilan desktop mungkin terlihat normal, tetapi pada layar kecil layout bermasalah. Temukan dan perbaiki penyebabnya.

CSS yang Harus Diperbaiki

.container {
    width: 1200px;
    margin: 0 auto;
}

.hero {
    display: flex;
    gap: 40px;
}

.product-list {
    display: flex;
    gap: 24px;
}

.product-card {
    width: 350px;
}

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

Tugas mahasiswa:

Perbaiki container agar tidak menggunakan lebar tetap terlalu besar.
Tambahkan aturan agar hero berubah menjadi satu kolom pada layar kecil.
Tambahkan flex-wrap pada daftar produk.
Ubah card agar menyesuaikan ruang tersedia.
Uji pada lebar sekitar 1200px, 768px, dan 375px.

Challenge Pertemuan 5

Buat landing page responsif untuk ide usaha masing-masing. Project boleh berupa produk makanan, fashion, jasa, produk digital, atau ide bisnis lain.

Container dengan max-width.
Navbar.
Hero section dua kolom pada desktop.
Minimal tiga Product Card.
Flexbox, gap, dan flex-wrap.
Minimal satu penggunaan :hover.
Media query.
Tampilan desktop dan mobile yang nyaman digunakan.

Evaluasi Pemahaman

Apa yang dimaksud layout pada website?
Apa fungsi property display?
Apa manfaat container?
Apa fungsi max-width?
Mengapa margin: 0 auto dapat memusatkan container?
Apa yang dimaksud Flexbox?
Pada elemen mana display: flex diberikan?
Apa fungsi flex-direction?
Apa fungsi justify-content?
Apa fungsi align-items?
Apa fungsi gap?
Apa fungsi flex-wrap?
Apa kegunaan Flexbox pada navbar?
Apa fungsi list-style: none?
Apa fungsi :hover?
Apa yang dimaksud Responsive Web Design?
Apa fungsi meta viewport?
Apa yang dimaksud media query?
Mengapa width tetap yang terlalu besar dapat bermasalah?
Bagaimana cara menguji responsive design menggunakan browser?

Checklist Kompetensi Pertemuan 5

Membuat container.
Memahami display dasar.
Mengaktifkan Flexbox.
Menggunakan flex-direction.
Menggunakan justify-content.
Menggunakan align-items.
Menggunakan gap.
Menggunakan flex-wrap.
Membuat hero dua kolom.
Membuat navbar horizontal.
Menggunakan :hover.
Menyusun beberapa Product Card.
Menggunakan meta viewport.
Membuat media query.
Menguji website desktop dan mobile.
Membuat Responsive Store Landing Page.

Rangkuman Pertemuan 5

Di Pertemuan 5 kita mulai mengatur layout halaman secara lebih serius. Flexbox membantu menyusun elemen, sedangkan media query membantu halaman menyesuaikan diri dengan ukuran layar.

Coding 1: membuat container dan layout dasar.
Coding 2: membuat hero section dua kolom menggunakan Flexbox.
Coding 3: membuat navbar horizontal.
Coding 4: membuat katalog Product Card responsif.
Coding 5: membuat Responsive Store Landing Page.

Perkembangan Project

Pertemuan 1
Profil Usaha
    |
    v
Pertemuan 2
Katalog + Form Data Produk
    |
    v
Pertemuan 3
CSS + Product Card
    |
    v
Pertemuan 4
JavaScript + Kalkulator Penjualan
    |
    v
Pertemuan 5
Responsive Store Landing Page
    |
    v
Pertemuan 6
PHP + GET/POST + Form Processing
    |
    v
Pertemuan 7
MySQL + CRUD Native
    |
    v
UTS
    |
    v
Laravel

Menuju Pertemuan 6

Sampai Pertemuan 5 kita sudah memiliki fondasi front-end: HTML untuk struktur, CSS untuk tampilan dan layout, serta JavaScript untuk logika di browser.

Pada Pertemuan 6 kita mulai masuk ke back-end development menggunakan PHP. Kita akan memahami perbedaan proses di browser dan server, sintaks dasar PHP, variable, kondisi, perulangan, serta bagaimana data form dikirim menggunakan GET dan POST.

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

Target Pembelajaran

Materi 1 — Mengenal Layout, Display, dan Container

Block dan Inline Secara Sederhana

Mengapa Membutuhkan Container?

Coding 1 — Membuat Layout Container untuk Toko

Materi 2 — Menyusun Elemen dengan Flexbox

Mengaktifkan Flexbox

Property Penting Flexbox

Coding 2 — Membuat Hero Section Dua Kolom

Materi 3 — Membuat Navbar Horizontal

Coding 3 — Membuat Navbar NusaTech Store

Materi 4 — Product Card, Flex-Wrap, dan Responsive Design

Card Container dan flex-wrap

Apa Itu Responsive Web Design?

Media Query

Meta Viewport

Coding 4 — Membuat Katalog Produk Responsif

Materi 5 — Mini Project: Responsive Store Landing Page

Struktur Project

Coding 5 — Responsive Store Landing Page

Debugging Challenge

Challenge Pertemuan 5

Evaluasi Pemahaman

Checklist Kompetensi Pertemuan 5

Rangkuman Pertemuan 5

Menuju Pertemuan 6

Pertemuan 6 — Dari Browser ke Server: Dasar PHP, GET, POST, dan Form Processing

Bagikan Artikel

Artikel Lainnya

Evolusi Wi-Fi dari Wi-Fi 2 hingga Wi-Fi 7: Teknologi, Perangkat, Cara Kerja, dan Apakah Perlu Upgrade?

TypeScript Semakin Populer: Apakah JavaScript Mulai Tergeser?

10 Ide Proyek Laravel Anti-Mainstream Tugas Akhir 2026

10 Ide Proyek Aplikasi Berbasis Java NetBeans untuk Tema Tugas Akhir

Evolusi Penyimpanan Data: Dari Kartu Berlubang hingga Cloud Storage

Sejarah dan Evolusi Komputer: Dari Abacus hingga Era Artificial Intelligence

Rekomendasi Laptop dan PC untuk Mahasiswa IT dengan Anggaran Rp6–8 Juta

Auto Naik Level! Sertifikasi IT untuk Mahasiswa dan Fresh Graduate

Tutorial Lengkap Mengintegrasikan OpenAI Codex ke Visual Studio Code

Manajemen Dependensi Modern: Panduan Lengkap Composer dari Instalasi hingga Inisiasi Proyek Laravel (Studi Kasus: Sistem Kasir Toko Kelontong)

Pilar Produktivitas Developer: Memahami Peran Git dan Composer dalam Manajemen Proyek Perangkat Lunak

Di Balik Kolaborasi UI/UX: Membedah Sisi Teknis dan Spesifikasi Sistem (System Requirements) Figma

Revolusi Pengalamatan Internet: Memahami Konsep CIDR sebagai Solusi Kelangkaan IP Address Global

Optimalisasi Arsitektur Jaringan: Menguasai Konsep IP Address dan Metode VLSM untuk Efisiensi Alokasi Kontainer Data

Seni Berkomunikasi dengan AI: Mengapa Prompt Engineering Menjadi Soft Skill Baru yang Wajib Dikuasai Mahasiswa

Strategi Pemilihan Tech Stack: Bagaimana Menentukan Teknologi yang Tepat untuk Proyek Akhir dan Skripsi TI

Akselerasi Data Science: Mengapa Python Menjadi Bahasa Primadona dalam Pengolahan Data dan Machine Learning

Figma dan Era Baru Desain Digital: Menggeser Dominasi Software Desktop Melalui Kolaborasi Cloud

Revolusi Kontainerisasi: Bagaimana Docker Menyelesaikan Masalah Konflik Infrastruktur IT

Kecepatan dan Efisiensi: Memaksimalkan Notepad++ sebagai Editor Pendukung dalam Workflow Mahasiswa IT

Navigasi Lingkungan Lokal: Komparasi Strategis Antara XAMPP dan Laragon untuk Developer Mahasiswa

Membuat Web Mulai Berpikir: Dasar JavaScript, DOM, Event, dan Logika Penjualan

Saatnya Mempercantik Web: Mengenal CSS, Selector, Warna, Typography, dan Box Model

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

Roadmap Full-Stack Developer 2026: Belajar HTML, CSS, JavaScript, Laravel hingga Cloud

Pre-Setup Pemrograman Java Menggunakan NetBeans dan XAMPP

Mengamankan Gerbang Utama: Panduan Taktis Hardening Perangkat Routerboard MikroTik

Mengamankan Gerbang Digital: Panduan Taktis Hardening dan Proteksi Jaringan Wi-Fi Rumah

Membedah Kurikulum: Perbedaan dan Perbandingan Strategis Antara Jurusan Teknik Informatika dan Sistem Informasi

Benteng Digital: Mengidentifikasi Ancaman Keamanan Jaringan dan Solusi Strategisnya di Era Siber

Kembali ke Fondasi: Memahami Konsep PHP Native dalam Pengembangan Website Pemula

Fondasi Manajemen Data: Menguasai Perintah Dasar SQL untuk Strukturisasi Basis Data Relasional

Paradigma Baru Rekayasa Perangkat Lunak: Menavigasi Tren 'Vibecoding' dalam Ekosistem Mahasiswa IT

Akselerasi Web Modern: Mengapa Laravel Menjadi Framework PHP Wajib untuk Mahasiswa IT

Fondasi Utama Teknologi Modern: Mengapa Bahasa Pemrograman Java Menjadi Pilar Wajib Mahasiswa IT

Gamifikasi Pemrograman: Menggunakan Greenfoot sebagai Media Kreatif Menguasai Logika Javai

Visualisasi Paradigma: Mengapa BlueJ Menjadi Instrumen Terbaik untuk Mengonkritkan Konsep Abstrak OOP

Fondasi Pemrograman Kokoh: Mengapa NetBeans Menjadi IDE Ideal untuk Menguasai Java dan Paradigma OOP

Lebih dari Sekadar Editor: Mengoptimalkan Visual Studio Code sebagai Pusat Kerja Developer Mahasiswa

Menembus Standar Industri: Mengapa GitHub Menjadi Portofolio Wajib Mahasiswa IT Masa Kini