HTML Dasar #37 - Proyek Akhir: Membuat Layout Website Responsif (Header, Sidebar, Konten, Footer)

Selamat! Kita telah sampai di proyek akhir dari seri HTML Dasar ini. Sekarang saatnya menggabungkan semua materi yang telah dipelajari: HTML struktur, CSS (Flexbox, Grid, Media Query), dan JavaScript untuk membuat layout website responsif lengkap dengan header, sidebar, konten utama, dan footer.

Website ini akan beradaptasi dengan berbagai ukuran layar: desktop, tablet, dan HP.

Apa yang Akan Kita Buat?

Sebuah website blog/news portal sederhana dengan struktur:

Header → Logo, tagline, dan navigasi (dengan hamburger menu di HP)
Sidebar Kiri → Profil penulis, kategori artikel, dan iklan/promo
Konten Utama → Daftar artikel (grid card)
Footer → Informasi kontak, link sosial media, copyright

Responsive Behavior:

Desktop (> 1024px) → Sidebar di kiri, konten di kanan (2 kolom)
Tablet (768px - 1024px) → Sidebar di bawah konten (1 kolom)
HP (< 768px) → Semua 1 kolom, font lebih kecil, navbar jadi hamburger

Teknologi yang Digunakan:
- HTML5 → struktur semantik (header, nav, main, aside, article, footer)
- CSS3 → Flexbox, Grid, Media Query, animasi
- JavaScript → Hamburger menu toggle

Struktur Folder Proyek

website/
│
├── index.html
├── style.css
└── script.js

File index.html (Struktur Lengkap)

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BeritaKita - Portal Berita Modern</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <!-- ========== HEADER & NAVBAR ========== -->
    <header>
        <div class="logo-area">
            <h1>BeritaKita</h1>
            <p>Informasi Terpercaya untuk Anda</p>
        </div>
        <nav>
            <ul class="nav-links" id="navLinks">
                <li><a href="#" class="active">Beranda</a></li>
                <li><a href="#">Politik</a></li>
                <li><a href="#">Teknologi</a></li>
                <li><a href="#">Olahraga</a></li>
                <li><a href="#">Hiburan</a></li>
                <li><a href="#">Kontak</a></li>
            </ul>
            <div class="hamburger" id="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </nav>
    </header>

    <!-- ========== MAIN CONTENT & SIDEBAR ========== -->
    <div class="container">
        <!-- SIDEBAR KIRI -->
        <aside class="sidebar">
            <div class="profile-card">
                <img src="https://via.placeholder.com/100x100?text=Avatar" alt="Avatar">
                <h3>Admin BeritaKita</h3>
                <p>Jurnalis & Content Writer</p>
                <div class="social-icons">
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                </div>
            </div>
            
            <div class="category-list">
                <h3>Kategori Populer</h3>
                <ul>
                    <li><a href="#">Teknologi (12)</a></li>
                    <li><a href="#">Bisnis (8)</a></li>
                    <li><a href="#">Lifestyle (15)</a></li>
                    <li><a href="#">Pendidikan (6)</a></li>
                </ul>
            </div>
            
            <div class="ad-card">
                <h3>Promo Spesial</h3>
                <p>Diskon 50% untuk kursus online!</p>
                <button>Daftar Sekarang</button>
            </div>
        </aside>

        <!-- KONTEN UTAMA (ARTICLE GRID) -->
        <main class="main-content">
            <h2>Berita Terbaru</h2>
            <div class="article-grid">
                
                <article class="card">
                    <div class="card-img"></div>
                    <div class="card-content">
                        <h3>iPhone 15 Pro Resmi Dirilis</h3>
                        <p class="meta">15 April 2024 | Teknologi</p>
                        <p>Apple resmi meluncurkan iPhone 15 Pro dengan fitur kamera canggih dan chip A17 Bionic...</p>
                        <a href="#" class="read-more">Baca Selengkapnya →</a>
                    </div>
                </article>

                <article class="card">
                    <div class="card-img"></div>
                    <div class="card-content">
                        <h3>Windows 12: Bocoran Fitur Terbaru</h3>
                        <p class="meta">14 April 2024 | Teknologi</p>
                        <p>Microsoft dikabarkan akan merilis Windows 12 dengan integrasi AI yang lebih dalam...</p>
                        <a href="#" class="read-more">Baca Selengkapnya →</a>
                    </div>
                </article>

                <article class="card">
                    <div class="card-img"></div>
                    <div class="card-content">
                        <h3>Timnas Indonesia Lolos Semifinal</h3>
                        <p class="meta">13 April 2024 | Olahraga</p>
                        <p>Prestasi membanggakan datang dari Timnas Indonesia yang berhasil lolos ke babak semifinal...</p>
                        <a href="#" class="read-more">Baca Selengkapnya →</a>
                    </div>
                </article>

                <article class="card">
                    <div class="card-img"></div>
                    <div class="card-content">
                        <h3>Film Indonesia Tembus Pasar Global</h3>
                        <p class="meta">12 April 2024 | Hiburan</p>
                        <p>Film horor Indonesia berhasil menembus pasar internasional dan mendapat sambutan positif...</p>
                        <a href="#" class="read-more">Baca Selengkapnya →</a>
                    </div>
                </article>

                <article class="card">
                    <div class="card-img"></div>
                    <div class="card-content">
                        <h3>AI Generatif Mengubah Dunia Kerja</h3>
                        <p class="meta">11 April 2024 | Teknologi</p>
                        <p>Perkembangan AI generatif seperti ChatGPT mulai mengubah cara kita bekerja dan belajar...</p>
                        <a href="#" class="read-more">Baca Selengkapnya →</a>
                    </div>
                </article>

                <article class="card">
                    <div class="card-img"></div>
                    <div class="card-content">
                        <h3>Ekonomi Digital Tumbuh 15%</h3>
                        <p class="meta">10 April 2024 | Bisnis</p>
                        <p>Pertumbuhan ekonomi digital di Indonesia mencapai 15% sepanjang tahun ini...</p>
                        <a href="#" class="read-more">Baca Selengkapnya →</a>
                    </div>
                </article>

            </div>
        </main>
    </div>

    <!-- ========== FOOTER ========== -->
    <footer>
        <div class="footer-content">
            <div class="footer-section">
                <h3>Tentang Kami</h3>
                <p>BeritaKita adalah portal berita terpercaya yang menyajikan informasi terkini dan akurat.</p>
            </div>
            <div class="footer-section">
                <h3>Kontak</h3>
                <p> info@beritakita.com</p>
                <p> (021) 1234-5678</p>
                <p> Jl. Merdeka No. 123, Jakarta</p>
            </div>
            <div class="footer-section">
                <h3>Ikuti Kami</h3>
                <div class="social-links">
                    <a href="#">Facebook</a>
                    <a href="#">Twitter</a>
                    <a href="#">Instagram</a>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2024 BeritaKita. All rights reserved. | Dibuat dengan HTML, CSS, JavaScript</p>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>

File style.css (Styling Lengkap)

/* ========== RESET & VARIABLES ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #3b82f6;
    --primary-dark: #2563eb;
    --secondary: #1e293b;
    --dark: #0f172a;
    --gray: #64748b;
    --light-gray: #f1f5f9;
    --white: #ffffff;
    --shadow: 0 4px 6px rgba(0,0,0,0.05);
    --shadow-hover: 0 10px 20px rgba(0,0,0,0.1);
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background: var(--light-gray);
}

/* ========== HEADER & NAVBAR ========== */
header {
    background: var(--white);
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 100;
}

.logo-area {
    text-align: center;
    padding: 20px 20px 10px;
}

.logo-area h1 {
    color: var(--primary);
    font-size: 32px;
}

.logo-area p {
    color: var(--gray);
    font-size: 14px;
}

nav {
    background: var(--secondary);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    position: relative;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 5px;
}

.nav-links li a {
    color: white;
    text-decoration: none;
    padding: 12px 20px;
    display: block;
    transition: background 0.3s;
    border-radius: 8px;
}

.nav-links li a:hover,
.nav-links li a.active {
    background: var(--primary);
}

/* Hamburger Menu (sembunyi di desktop) */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 10px;
}

.hamburger span {
    width: 28px;
    height: 3px;
    background: white;
    margin: 3px 0;
    transition: 0.3s;
    border-radius: 3px;
}

/* ========== LAYOUT UTAMA (GRID) ========== */
.container {
    max-width: 1280px;
    margin: 40px auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 30px;
}

/* ========== SIDEBAR ========== */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.profile-card {
    background: var(--white);
    border-radius: 16px;
    padding: 25px;
    text-align: center;
    box-shadow: var(--shadow);
}

.profile-card img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
    border: 3px solid var(--primary);
}

.profile-card h3 {
    margin-bottom: 5px;
}

.profile-card p {
    color: var(--gray);
    font-size: 14px;
}

.social-icons {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.social-icons a {
    text-decoration: none;
    font-size: 20px;
}

.category-list {
    background: var(--white);
    border-radius: 16px;
    padding: 20px;
    box-shadow: var(--shadow);
}

.category-list h3 {
    margin-bottom: 15px;
    border-left: 4px solid var(--primary);
    padding-left: 12px;
}

.category-list ul {
    list-style: none;
}

.category-list li {
    margin-bottom: 10px;
}

.category-list a {
    text-decoration: none;
    color: var(--gray);
    transition: color 0.3s;
}

.category-list a:hover {
    color: var(--primary);
}

.ad-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 16px;
    padding: 25px;
    text-align: center;
}

.ad-card h3 {
    margin-bottom: 10px;
}

.ad-card button {
    background: white;
    color: #764ba2;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    margin-top: 15px;
    cursor: pointer;
    font-weight: bold;
}

/* ========== MAIN CONTENT (ARTICLE GRID) ========== */
.main-content h2 {
    margin-bottom: 25px;
    border-left: 4px solid var(--primary);
    padding-left: 15px;
}

.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
}

.card {
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.card-img {
    height: 160px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
}

.card-content {
    padding: 20px;
}

.card-content h3 {
    margin-bottom: 8px;
    font-size: 18px;
}

.meta {
    font-size: 12px;
    color: var(--gray);
    margin-bottom: 12px;
}

.card-content p {
    font-size: 14px;
    color: #555;
    margin-bottom: 15px;
}

.read-more {
    color: var(--primary);
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
}

.read-more:hover {
    text-decoration: underline;
}

/* ========== FOOTER ========== */
footer {
    background: var(--secondary);
    color: #94a3b8;
    margin-top: 40px;
}

.footer-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 40px 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.footer-section h3 {
    color: white;
    margin-bottom: 15px;
    font-size: 18px;
}

.footer-section p {
    font-size: 14px;
    line-height: 1.8;
}

.social-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.social-links a {
    color: #94a3b8;
    text-decoration: none;
}

.social-links a:hover {
    color: var(--primary);
}

.footer-bottom {
    text-align: center;
    padding: 20px;
    border-top: 1px solid #334155;
    font-size: 12px;
}

/* ========== MEDIA QUERIES ========== */

/* Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
    .container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .sidebar {
        order: 2;
    }
    
    .main-content {
        order: 1;
    }
}

/* HP (max-width: 768px) */
@media (max-width: 768px) {
    .logo-area h1 {
        font-size: 28px;
    }
    
    nav {
        justify-content: space-between;
    }
    
    .hamburger {
        display: flex;
    }
    
    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 52px;
        left: 0;
        width: 100%;
        background: var(--secondary);
        padding: 15px 0;
        gap: 0;
    }
    
    .nav-links.active {
        display: flex;
    }
    
    .nav-links li a {
        padding: 12px 20px;
        text-align: center;
    }
    
    /* Animasi hamburger ke X */
    .hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(8px, 6px);
    }
    
    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }
    
    .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(8px, -6px);
    }
    
    .article-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .social-links {
        align-items: center;
    }
}

/* HP kecil (max-width: 480px) */
@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }
    
    .card-content {
        padding: 15px;
    }
    
    .profile-card {
        padding: 20px;
    }
}

File script.js (JavaScript untuk Hamburger)

// ========== HAMBURGER MENU TOGGLE ==========
const hamburger = document.getElementById('hamburger');
const navLinks = document.getElementById('navLinks');

if (hamburger && navLinks) {
    hamburger.addEventListener('click', () => {
        navLinks.classList.toggle('active');
        hamburger.classList.toggle('active');
    });

    // Tutup menu saat link diklik (opsional untuk UX yang lebih baik)
    const links = document.querySelectorAll('.nav-links li a');
    links.forEach(link => {
        link.addEventListener('click', () => {
            navLinks.classList.remove('active');
            hamburger.classList.remove('active');
        });
    });
}

// ========== SMOOTH SCROLL (opsional) ==========
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
        const href = this.getAttribute('href');
        if (href !== "#" && href !== "") {
            const target = document.querySelector(href);
            if (target) {
                e.preventDefault();
                target.scrollIntoView({ behavior: 'smooth' });
            }
        }
    });
});

// ========== TAMPILKAN TAHUN BERJALAN DI FOOTER ==========
const yearSpan = document.getElementById('currentYear');
if (yearSpan) {
    yearSpan.textContent = new Date().getFullYear();
}

// ========== LOG RESOLUSI LAYAR (untuk debugging) ==========
console.log(`Lebar layar saat ini: ${window.innerWidth}px`);

Hasil Visual Layout Website

Berikut tampilan website pada berbagai ukuran layar:

Desktop (> 1024px)

Header + Navbar (horizontal)

Sidebar

Konten Utama (Grid 2-3 kolom)

Footer

Tablet (768px - 1024px)

Header + Navbar (horizontal)

Konten Utama (Grid 2 kolom)

Sidebar (di bawah konten)

Footer

HP (< 768px)

Logo ☰

Konten Utama (1 kolom)

Sidebar

Footer

Ringkasan Properti yang Digunakan

Kategori	Teknologi	Fungsi
HTML Semantik	`<header>`, `<nav>`, `<main>`, `<aside>`, `<article>`, `<footer>`	Struktur halaman yang bermakna untuk SEO dan aksesibilitas
CSS Layout	`display: grid`, `grid-template-columns`, `gap`	Layout 2 kolom (sidebar + konten)
CSS Responsif	`@media (max-width: 1024px)`, `@media (max-width: 768px)`	Mengubah layout di tablet dan HP
Flexbox	`display: flex`, `justify-content`, `align-items`	Navbar, card content, social icons
CSS Grid (Konten)	`grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))`	Article grid responsif (card)
JavaScript	`classList.toggle()`, `addEventListener`	Hamburger menu toggle
CSS Variables	`:root { --primary: #3b82f6; }`	Warna konsisten dan mudah diubah

Checklist Proyek

HTML semantik (header, nav, main, aside, article, footer)
CSS Grid untuk layout utama (sidebar + konten)
CSS Grid untuk article grid (responsive card)
Flexbox untuk navbar, profile card, dan social icons
Media Query untuk 3 breakpoint (desktop, tablet, HP)
Hamburger menu dengan JavaScript
Animasi hover pada card dan tombol
Box shadow untuk efek depth
CSS Variables untuk warna konsisten
Footer dengan 3 kolom (responsive)

Intisari Proyek Akhir

Proyek ini menggabungkan semua materi dari seri HTML Dasar #1 sampai #36
Menggunakan HTML semantik untuk struktur yang bermakna
Menggunakan CSS Grid untuk layout halaman (2 kolom) dan grid konten
Menggunakan Flexbox untuk komponen kecil (navbar, card, social icons)
Menggunakan Media Query untuk 3 ukuran layar (desktop, tablet, HP)
Menggunakan JavaScript untuk hamburger menu interaktif
Website ini responsif, modern, dan siap digunakan sebagai template blog/portofolio

Tantangan Lanjutan (Setelah Proyek Akhir):

Tambahkan dark mode toggle dengan JavaScript dan CSS variables
Tambahkan animasi loading skeleton untuk artikel
Buat halaman detail artikel terpisah dengan link dari card
Implementasikan localStorage untuk menyimpan preferensi tema
Tambahkan form kontak dengan validasi JavaScript
Deploy website ke hosting gratis (Netlify, Vercel, atau GitHub Pages)

Selamat! Kamu telah menyelesaikan seri HTML Dasar. Kamu sekarang memiliki fondasi yang kuat untuk melanjutkan ke JavaScript lanjutan, framework (React, Vue), atau backend (Node.js, PHP).

Tetap berkarya dan terus belajar!

Apa Selanjutnya? Lanjut ke Seri CSS!

Anda sudah memiliki fondasi HTML yang kuat. Sekarang saatnya mendalami CSS (Cascading Style Sheets) untuk membuat website yang lebih cantik, modern, dan profesional.

Materi yang akan dipelajari di seri CSS:

CSS Selector (Tag, Class, ID) lebih dalam
Pseudo-class dan Pseudo-element
CSS Variables (Custom Properties)
CSS Transitions dan Animations
CSS Transform (scale, rotate, translate)
Positioning (relative, absolute, fixed, sticky)
CSS Grid Lanjutan
Flexbox Lanjutan
Responsive Design dengan media query
CSS Framework (Tailwind CSS) - pengenalan
Dan masih banyak lagi...

Link untuk melanjutkan ke seri CSS:
Lihat Seri CSS Dasar

Artikel Sebelumnya: HTML Dasar #36 - Membuat Navigasi Responsif (Hamburger Menu Sederhana)
Artikel Selanjutnya: [Selesai] Terima kasih telah mengikuti seri HTML Dasar!

HTML Dasar #37 - Proyek Akhir: Membuat Layout Website Responsif (Header, Sidebar, Konten, Footer)

Apa yang Akan Kita Buat?

Struktur Folder Proyek

File index.html (Struktur Lengkap)

File style.css (Styling Lengkap)

File script.js (JavaScript untuk Hamburger)

Hasil Visual Layout Website

Desktop (> 1024px)

Tablet (768px - 1024px)

HP (< 768px)

Ringkasan Properti yang Digunakan

Checklist Proyek

Intisari Proyek Akhir

Apa Selanjutnya? Lanjut ke Seri CSS!

HTML Dasar #0 - Daftar Isi - DASAR-DASAR HTML UNTUK PEMULA

Categories

Main Tags

Latest Posts

Popular Posts

HTML Dasar #0 - Daftar Isi - DASAR-DASAR HTML UNTUK PEMULA

Android Kotlin - Lanjutan dari ASP.NET Core API

Android Kotlin #5: RecyclerView – Menampilkan Daftar Kategori Wisata

نموذج الاتصال