Proyek Akhir CSS: Buat Website Portofolio Keren

Halo para pembelajar CSS! Saya senang sekali bisa memandu Anda dalam sebuah proyek akhir yang akan mengukuhkan pemahaman Anda tentang CSS: membangun website portofolio sederhana namun memukau. Proyek ini dirancang untuk mengintegrasikan semua konsep CSS yang telah Anda pelajari, mulai dari dasar hingga teknik yang lebih lanjut. Mari kita ubah pengetahuan teoritis Anda menjadi karya nyata!

Mengapa Website Portofolio?

Website portofolio adalah salah satu cara terbaik untuk memamerkan keterampilan Anda sebagai pengembang web. Ini bukan hanya tentang menampilkan proyek-proyek Anda, tetapi juga menunjukkan kemampuan Anda dalam mendesain dan mengimplementasikan antarmuka pengguna yang menarik dan fungsional. Dengan menguasai CSS, Anda bisa membuat portofolio yang tidak hanya informatif tetapi juga mencerminkan kepribadian dan gaya profesional Anda.

Konsep CSS Inti yang Akan Kita Terapkan

Dalam proyek ini, kita akan menyentuh berbagai aspek CSS. Pastikan Anda familiar dengan konsep-konsep berikut:

Box Model: Memahami margin, border, padding, dan content adalah fundamental. Ini akan membantu kita mengatur ruang di sekitar elemen dan antar elemen.
Display Properties: block, inline, inline-block, flex, dan grid akan menjadi kunci untuk menata tata letak halaman Anda.
Positioning: static, relative, absolute, fixed, dan sticky memungkinkan Anda menempatkan elemen secara presisi.
Typography: Mengontrol font-family, font-size, font-weight, line-height, text-align, dan color untuk keterbacaan yang optimal.
Colors and Backgrounds: Penggunaan warna (color, background-color, rgba(), hsla()) dan gambar latar belakang (background-image, background-size, background-repeat).
Selectors: Dari yang sederhana (element, .class, #id) hingga yang lebih kompleks (attribute, pseudo-classes, pseudo-elements, combinators).
Responsive Design: Menggunakan Media Queries (@media) untuk memastikan tampilan portofolio Anda optimal di berbagai ukuran layar (desktop, tablet, mobile).
Transitions and Animations: Menambah interaktivitas dan sentuhan dinamis untuk pengalaman pengguna yang lebih baik.
CSS Variables (Custom Properties): Memudahkan pengelolaan nilai-nilai CSS yang berulang, seperti warna tema atau spasi.
Specificity and Cascade: Memahami bagaimana CSS diterapkan dan bagaimana aturan yang lebih spesifik mengesampingkan aturan yang kurang spesifik.

Langkah-langkah Praktis: Membangun Website Portofolio Anda

Mari kita mulai proses kreatifnya!

1. Perencanaan dan Struktur HTML

Sebelum menulis satu baris CSS pun, buatlah rencana kasar tentang apa saja yang ingin Anda tampilkan:

Header: Nama, jabatan/profesi, tautan navigasi.
About Section: Deskripsi singkat tentang diri Anda, keahlian, dan minat.
Projects Section: Daftar proyek Anda, masing-masing dengan judul, deskripsi singkat, dan tautan ke demo/repositori.
Contact Section: Informasi kontak, formulir kontak sederhana (opsional).
Footer: Hak cipta, tautan media sosial.

Buat struktur HTML yang semantik dan terorganisir. Gunakan tag-tag seperti <header>, <nav>, <main>, <section>, <article>, <footer>, <h1> hingga <h6>, <p>, <ul>, <li>, <a>.

Contoh Struktur HTML Sederhana:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nama Anda - Portofolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Nama Anda</h1>
        <p>Seorang Web Developer Kreatif</p>
        <nav>
            <ul>
                <li><a href="#about">Tentang Saya</a></li>
                <li><a href="#projects">Proyek</a></li>
                <li><a href="#contact">Kontak</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="about">
            <h2>Tentang Saya</h2>
            <img src="foto-profil.jpg" alt="Foto Profil Anda" class="profile-pic">
            <p>Saya adalah seorang pengembang web yang bersemangat...</p>
        </section>

        <section id="projects">
            <h2>Proyek Saya</h2>
            <div class="project-list">
                <article class="project-item">
                    <h3>Judul Proyek 1</h3>
                    <img src="thumbnail-proyek1.jpg" alt="Thumbnail Proyek 1">
                    <p>Deskripsi singkat proyek...</p>
                    <a href="#">Lihat Detail</a>
                </article>
                <article class="project-item">
                    <h3>Judul Proyek 2</h3>
                    <img src="thumbnail-proyek2.jpg" alt="Thumbnail Proyek 2">
                    <p>Deskripsi singkat proyek...</p>
                    <a href="#">Lihat Detail</a>
                </article>
                <!-- Tambahkan proyek lain -->
            </div>
        </section>

        <section id="contact">
            <h2>Hubungi Saya</h2>
            <p>Anda bisa menghubungi saya melalui:</p>
            <ul>
                <li>Email: <a href="mailto:emailanda@example.com">emailanda@example.com</a></li>
                <li>LinkedIn: <a href="#">Profil LinkedIn</a></li>
            </ul>
        </section>
    </main>

    <footer>
        <p>&copy; 2023 Nama Anda. Hak Cipta Dilindungi.</p>
    </footer>

    <script src="script.js"></script> <!-- Jika menggunakan JavaScript -->
</body>
</html>

2. Styling Dasar dan Typography

Mulai dengan mengatur body dan elemen-elemen dasar. Gunakan CSS Reset (atau Normalize.css) untuk memastikan konsistensi tampilan di berbagai browser.

File: style.css

/* CSS Reset Sederhana */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Variabel CSS untuk Tema */
:root {
    --primary-color: #333;
    --secondary-color: #eee;
    --accent-color: #007bff;
    --background-color: #f4f4f4;
    --text-color: #333;
    --link-color: #007bff;
    --link-hover-color: #0056b3;
    --font-family-base: 'Arial', sans-serif;
    --font-family-heading: 'Georgia', serif;
    --spacing-unit: 1rem;
}

body {
    font-family: var(--font-family-base);
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--background-color);
    padding: 0 var(--spacing-unit); /* Tambahkan sedikit padding di sisi */
}

h1, h2, h3 {
    font-family: var(--font-family-heading);
    margin-bottom: var(--spacing-unit);
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
    text-align: center; /* Rata tengah untuk judul bagian */
    margin-top: calc(var(--spacing-unit) * 2); /* Jarak lebih besar dari bagian */
}

p {
    margin-bottom: var(--spacing-unit);
}

a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}

img {
    max-width: 100%; /* Pastikan gambar responsif */
    height: auto;
}