Cara Membuat Web Portofolio dengan HTML dan CSS

By Posted on

Cara Membuat Web Portofolio dengan HTML dan CSS – Pada era digital saat ini, memiliki sebuah web portofolio merupakan langkah penting bagi siapa pun yang ingin memperlihatkan karya-karya atau pencapaian mereka kepada dunia. Dengan HTML dan CSS, Anda dapat dengan mudah membuat web portofolio yang menarik dan profesional. Berikut adalah langkah-langkah detail untuk membuatnya:

Alat yang Harus Anda Siapkan

Sebelum membahas lebih lanjut seputar cara membuat web portofolio dengan HTML dan CSS, penting bagi Anda untuk mengetahui alat apa saja yang harus disiapkan sebelumnya. Berikut ini beberapa alat yang harus Anda siapkan:

  1. Perangkat Laptop. Untuk membuat dan mengoperasikan web portofolio,
  2. Aplikasi Text Editor code. untuk menulis bahasa pemrograman html dan css web portofolio,
  3. Browser (disarankan menggunakan chrome). untuk membuka dan melihat hasil dari web portofolio,
  4. Niat. merupakan kunci utama untuk belajar membuat web portofolio.

Cara Membuat Web Portofolio dengan HTML dan CSS

1. Buat Folder Project Web Portofolio

Pertama, buatlah sebuah folder khusus untuk proyek web portofolio Anda di dalam direktori komputer Anda. Nama folder ini dapat disesuaikan dengan preferensi Anda, misalnya “Web_Portofolio”.

2. Buat Folder Img

Di dalam folder proyek web portofolio Anda, buatlah folder baru dengan nama “img“. Folder ini akan digunakan untuk menyimpan semua gambar atau foto yang akan Anda tampilkan di web portofolio Anda. Sebagai contoh pembuatan download file gambar disini.

3. Buat Sebuah File web_portofolio.html

Langkah berikutnya adalah membuat file HTML utama untuk web portofolio Anda. Anda dapat menggunakan editor teks seperti Notepad atau aplikasi pengembangan web seperti Visual Studio Code. Ketikkan kode berikut ini dalam file baru dengan nama “web_portofolio.html“:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portofolio Saya</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Portofolio Saya</h1>
    </header>
    <section id="about">
        <h2>Tentang Saya</h2>
        <p>Selamat datang di web portofolio saya! Saya adalah seorang desainer grafis berpengalaman dengan fokus utama pada desain branding dan identitas visual.</p>
    </section>
    <section id="projects">
        <h2>Proyek Terbaru</h2>
        <div class="project">
            <img src="img/project1.jpg" alt="Project 1">
            <h3>Project 1</h3>
            <p>Deskripsi singkat tentang proyek ini.</p>
        </div>
        <!-- Tambahkan proyek-proyek lainnya di sini -->
    </section>
    <footer>
        <p>&copy; 2024 Portofolio Saya. Dibuat dengan <span class="heart">&hearts;</span> oleh [Nama Anda].</p>
    </footer>
</body>
</html>
 

4. Buat File style.css

Selanjutnya, buatlah file CSS untuk mendesain tampilan web portofolio Anda. Buatlah file baru dengan nama “style.css” di dalam folder proyek Anda. File ini akan digunakan untuk mengatur tata letak, warna, dan gaya elemen-elemen di halaman web portofolio Anda.

Artikel Terkait:  Cara Membuat Web Sekolah dengan HTML dan CSS

Berikut adalah kode CSS yang dapat Anda gunakan untuk file “style.css“:

/* Reset default browser styles */
body, h1, h2, p, img {
    margin: 0;
    padding: 0;
}

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

/* Style section */
section {
    padding: 20px;
    margin-bottom: 30px;
}

/* Style about section */
#about {
    background-color: #f9f9f9;
}

/* Style projects section */
#projects {
    background-color: #ebebeb;
}

/* Style project */
.project {
    margin-bottom: 20px;
}

.project img {
    width: 100%;
    height: auto;
}

/* Style footer */
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
}

/* Heart icon */
.heart {
    color: red;
}
 

Pastikan Anda menyimpan kedua file ini di dalam folder proyek Anda seperti yang diinstruksikan sebelumnya. Setelah itu, buka file “web_portofolio.html” menggunakan browser web untuk melihat tampilan dari web portofolio Anda.

Baca Juga: Cara Membuat Website Toko Online dengan HTML dan CSS

5. Mengubah Konten Web Portofolio

Sekarang, saatnya untuk mengisi konten ke dalam web portofolio Anda. Anda dapat menambahkan informasi tentang diri Anda, karya-karya atau proyek yang pernah Anda kerjakan, keterampilan yang Anda miliki, dan lain sebagainya. Gunakan tag-tag HTML seperti <div>, <p>, <h1>, <img>, dan lainnya untuk mengatur dan menampilkan konten dengan baik.

6. Save & View Tampilan

Simpan semua perubahan yang telah Anda buat, baik pada file HTML maupun CSS, dan buka file “web_portofolio.html” menggunakan browser web favorit Anda. Ini adalah langkah terakhir untuk melihat tampilan akhir dari web portofolio Anda.

Penutup

Dengan mengikuti langkah-langkah di atas, Anda sekarang telah berhasil membuat web portofolio sederhana menggunakan HTML dan CSS! Jangan ragu untuk terus bereksperimen dan menyesuaikan desain sesuai dengan preferensi dan kebutuhan Anda. Semoga berhasil!

Related posts: