Cara Membuat Portofolio dengan HTML dan CSS

Cara Membuat Portofolio dengan HTML dan CSS – Apakah Anda ingin memamerkan karya-karya Anda secara online? Mungkin Anda seorang desainer grafis yang ingin menampilkan portofolio karya-karya terbaik Anda, atau seorang pengembang web yang ingin menunjukkan proyek-proyek yang telah Anda kerjakan kepada dunia. Dalam era digital ini, memiliki portofolio online adalah langkah yang sangat penting untuk memperkenalkan diri Anda kepada klien potensial atau perusahaan yang ingin merekrut Anda.

Namun, tidak perlu khawatir jika Anda belum memiliki pengalaman dalam pembuatan situs web. Dalam panduan ini, riztekno akan membimbing Anda melalui langkah-langkah sederhana untuk membuat portofolio yang menarik menggunakan HTML dan CSS. Kami akan memulai dari awal, sehingga bahkan bagi pemula sekalipun, Anda akan dapat mengikuti dengan mudah.

Mari kita mulai petualangan Anda dalam membuat portofolio online yang mencengangkan!

Alat yang Harus Anda Siapkan

Berikut ini beberapa alat yang harus Anda siapkan untuk dapat membuat potofolio dengan html dan css:

  • Perangkat laptop,
  • Sublime text (Text editor code),
  • Google chrome (Web browser),
  • Niat yang kuat.

Cara Membuat Portofolio dengan HTML dan CSS

1. Buat Folder Project Portofolio

Pertama, buatlah folder baru di mana Anda akan menyimpan semua file terkait portofolio Anda. Beri nama folder ini sesuai dengan preferensi Anda, misalnya “Portofolio” atau “MyPortfolio“.

2. Buat Folder Img

Di dalam folder proyek portofolio, buatlah folder baru dengan nama “img”. Folder ini akan digunakan untuk menyimpan semua gambar atau foto yang akan Anda gunakan dalam portofolio Anda. Download gambar disini untuk diterapkan dalam project portofolio Anda.

3. Buat Sebuah File portofolio.html

Sekarang, mari buat file HTML utama untuk portofolio Anda. Buka editor teks favorit Anda dan buat file baru dengan nama portofolio.html.

Berikut ini file html yang dapat Anda tambahkan untuk dapat membuat portofolio dengan html dan css:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portofolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Portofolio</h1>
    </header>

    <div class="landing-page">
        <div class="landing-content">
            <img src="img/landing.jpg" alt="Foto Profil">
            <h2>Selamat Datang di Portofolio Saya</h2>
            <p>Saya adalah seorang pengembang web yang berfokus pada menciptakan pengalaman digital yang luar biasa.</p>
            <a href="#portfolio" class="btn">Lihat Portofolio</a>
        </div>
    </div>
    
    <div class="container" id="portfolio">
        <div class="portfolio-item">
            <img src="img/proyek1.jpg" alt="Deskripsi Gambar 1">
            <h2>Proyek 1</h2>
            <p>Deskripsi proyek 1.</p>
        </div>
        <div class="portfolio-item">
            <img src="img/proyek2.jpg" alt="Deskripsi Gambar 2">
            <h2>Proyek 2</h2>
            <p>Deskripsi proyek 2.</p>
        </div>
        <!-- Tambahkan lebih banyak portfolio-item sesuai kebutuhan -->
    </div>
</body>
</html>
 

4. Buat File style.css

Selanjutnya, kita akan membuat file CSS untuk mendesain tampilan portofolio Anda. Buatlah file baru dengan nama style.css di dalam folder proyek portofolio Anda.

Artikel Terkait:   Cara Membuat Halaman Utama Website dengan HTML dan CSS

Berikut ini file css yang dapat Anda tambahkan untuk dapat membuat portofolio dengan html dan css:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
}

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
}

.portfolio-item {
    width: 300px;
    margin: 20px;
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
}

.portfolio-item img {
    max-width: 100%;
    height: auto;
}

.portfolio-item h2 {
    margin-top: 10px;
}

.portfolio-item p {
    color: #666;
}

.landing-page {
    background-image: url('img/background.jpg'); /* Ganti 'landing-bg.jpg' dengan nama gambar latar belakang Anda */
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
}

.landing-content {
    max-width: 600px;
    padding: 20px;
}

.landing-content img {
    border-radius: 50%;
    width: 150px; /* Sesuaikan ukuran foto profil sesuai kebutuhan */
    height: 150px; /* Sesuaikan ukuran foto profil sesuai kebutuhan */
    margin-bottom: 20px;
}

.landing-content h2 {
    font-size: 3rem;
    margin-bottom: 20px;
}

.landing-content p {
    font-size: 1.2rem;
    margin-bottom: 30px;
}

.btn {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #555;
}
 

5. Mengubah Portofolio

Sekarang, saatnya untuk mulai mengisi konten portofolio Anda. Gunakan tag HTML seperti <header>, <nav>, <section>, dan <footer> untuk mengatur struktur portofolio Anda dengan baik. Gunakan juga tag seperti <img>, <h1>, <p>, dll., untuk menambahkan gambar dan teks sesuai kebutuhan Anda.

Pastikan untuk memberikan informasi yang relevan tentang diri Anda, proyek-proyek terbaru yang Anda kerjakan, keterampilan yang Anda miliki, dan cara menghubungi Anda. Juga, pastikan untuk menambahkan gambar yang memvisualisasikan pekerjaan Anda dengan baik.

Artikel Terkait:   Cara Membuat Website Lembaga dengan HTML dan CSS

6. Save & View Tampilan

Setelah Anda selesai mengedit HTML dan CSS, simpan perubahan Anda. Buka file portofolio.html menggunakan browser web untuk melihat tampilan portofolio Anda yang sebenarnya. Pastikan tampilannya sesuai dengan yang Anda inginkan dan lakukan perbaikan jika diperlukan.

Preview hasil

Berikut ini preview hasil portofolio dengan html dan css jika Anda berhasil membuatnya:

Penutup

Dengan mengikuti langkah-langkah yang saya bagikan di atas, Anda sekarang memiliki dasar yang kuat untuk membuat portofolio yang mengesankan menggunakan HTML dan CSS. Ingatlah untuk terus berlatih dan bereksperimen dengan desain dan konten Anda. Semakin Anda berlatih, semakin baik portofolio Anda akan menjadi.

Jangan ragu untuk berbagi portofolio Anda dengan teman dan kolega, dan gunakan platform media sosial untuk memperluas jangkauan Anda. Siapa tahu, mungkin portofolio Anda akan menjadi jembatan menuju kesempatan baru yang menarik di dunia desain grafis atau pengembangan web.

Terima kasih telah mengikuti panduan ini, dan semoga berhasil dalam pembuatan portofolio Anda! Jangan ragu untuk terus mengasah keterampilan Anda dan menjelajahi dunia kreativitas. Semoga sukses selalu!