Cara Membuat Website Portofolio Gratis Dengan HTML dan CSS Beserta Contohnya

afyadm

gabuttech.com

Sebagai seorang profesional, freelancer, atau seorang yang ingin membangun kehadiran online, memiliki website portofolio adalah langkah yang sangat penting. Website portofolio memungkinkan Anda untuk menampilkan karya Anda, pengalaman, dan kemampuan kepada dunia. Dalam panduan ini, Anda akan belajar cara membuat website portofolio gratis dengan HTML dan CSS, tanpa perlu mengeluarkan biaya tambahan.

Cara Membuat Website Portofolio Gratis Dengan HTML dan CSS Beserta Contohnya :

1. Perencanaan Website Portofolio Anda

Sebelum Anda mulai membuat website portofolio, ada beberapa hal yang perlu Anda rencanakan dan persiapkan.

1. Tentukan Tujuan Anda

Pertama-tama, tentukan tujuan utama dari website portofolio Anda. Apakah Anda ingin menampilkan karya seni, proyek desain, atau portofolio profesional Anda? Tentukan audiens target Anda.

2. Kumpulkan Materi

Kumpulkan semua materi yang ingin Anda tampilkan di portofolio Anda, seperti gambar, deskripsi proyek, informasi kontak, dan CV. Pastikan untuk memiliki versi digital dan berkualitas tinggi dari karya-karya Anda.

3. Pilih Nama Domain

Pilih nama domain yang mencerminkan identitas Anda atau bisnis Anda. Anda dapat menggunakan layanan domain gratis atau membeli nama domain yang sesuai.

2. Membuat Website dengan HTML

Sekarang kita akan mulai membuat website portofolio menggunakan HTML, bahasa markup dasar untuk halaman web.

1. Struktur Dasar HTML

Setiap halaman web HTML memiliki struktur dasar. Berikut adalah kerangka dasar untuk website portofolio Anda:

html :

<!DOCTYPE html>

<html>

<head>

    <title>Portofolio Saya</title>

</head>

<body>

    <!– Konten portofolio Anda akan ditambahkan di sini –>

</body>

</html>

2. Membuat Header

Header adalah bagian atas halaman web yang berisi judul, menu navigasi, dan informasi singkat tentang Anda. Ini adalah tempat yang bagus untuk menyambut pengunjung Anda.

html :

<header>

    <h1>Selamat Datang di Portofolio Saya</h1>

    <nav>

        <ul>

            <li><a href=”#tentang”>Tentang</a></li>

            <li><a href=”#portofolio”>Portofolio</a></li>

            <li><a href=”#kontak”>Kontak</a></li>

        </ul>

    </nav>

</header>

3. Menambahkan Tentang Saya

Bagian “Tentang” adalah tempat Anda dapat memperkenalkan diri Anda kepada pengunjung. Ini dapat mencakup deskripsi pribadi, latar belakang, dan keterampilan Anda.

html :

<section id=”tentang”>

    <h2>Tentang Saya</h2>

    <p>Saya adalah seorang desainer grafis dengan pengalaman selama 5 tahun dalam industri. Saya berfokus pada desain branding dan identitas perusahaan.</p>

</section>

4. Menambahkan Portofolio

Bagian “Portofolio” adalah area di mana Anda akan menampilkan karya-karya terbaik Anda. Gunakan elemen HTML seperti <div> dan <img> untuk menampilkan karya Anda.

html :

<section id=”portofolio”>

    <h2>Portofolio</h2>

    <div class=”item”>

        <img src=”gambar1.jpg” alt=”Karya 1″>

        <h3>Karya 1</h3>

        <p>Deskripsi singkat tentang karya 1.</p>

    </div>

    <div class=”item”>

        <img src=”gambar2.jpg” alt=”Karya 2″>

        <h3>Karya 2</h3>

        <p>Deskripsi singkat tentang karya 2.</p>

    </div>

</section>

5. Menambahkan Kontak

Tambahkan informasi kontak Anda sehingga pengunjung dapat dengan mudah menghubungi Anda.

html :

<section id=”kontak”>

    <h2>Kontak</h2>

    <p>Silakan hubungi saya melalui email: <a href=”mailto:[email protected]”>[email protected]</a></p>

</section>

6. Membuat Footer

Footer adalah tempat Anda dapat menambahkan informasi tambahan, tautan sosial media, atau hak cipta.

html :

<footer>

    <p>&copy; 2023 Portofolio Saya</p>

    <ul class=”sosial-media”>

        <li><a href=”https://www.facebook.com/”>Facebook</a></li>

        <li><a href=”https://www.instagram.com/”>Instagram</a></li>

        <li><a href=”https://www.linkedin.com/”>LinkedIn</a></li>

    </ul>

</footer>

3. Mempercantik dengan CSS

Sekarang kita akan memberi tampilan yang menarik pada website portofolio Anda dengan CSS.

1. Membuat File CSS Terpisah

Anda dapat membuat file CSS terpisah untuk mengatur tampilan situs web Anda. Buat file dengan ekstensi .css dan simpan dalam direktori yang sama dengan file HTML Anda.

2. Menghubungkan File CSS

Tambahkan elemen <link> ke dalam bagian <head> dokumen HTML Anda untuk menghubungkan file CSS ke halaman web Anda.

html :

<head>

    <title>Portofolio Saya</title>

    <link rel=”stylesheet” type=”text/css” href=”style.css”>

</head>

3. Mengatur Gaya CSS

Anda dapat menentukan gaya untuk elemen HTML menggunakan CSS. Contoh sederhana untuk mengatur tampilan header:

css :

header {

    background-color: #333;

    color: #fff;

    text-align: center;

    padding: 20px;

}


header h1 {

    font-size: 36px;

}


nav ul {

    list-style: none;

}


nav ul li {

    display: inline;

    margin-right: 20px;

}


nav a {

    text-decoration: none;

    color: #fff;

}

Pastikan untuk menggantikan kode CSS ini sesuai dengan preferensi desain Anda.

4. Menambahkan Gambar

Gambar adalah elemen penting dalam website portofolio. Anda dapat menambahkan gambar karya Anda dengan elemen <img>. Pastikan untuk menyimpan gambar dalam direktori yang sama dengan file HTML Anda.

html :

<div class=”item”>

    <img src=”gambar1.jpg” alt=”Karya 1″>

    <h3>Karya 1</h3>

    <p>Deskripsi singkat tentang karya 1.</p>

</div>

Pastikan untuk menggantikan “gambar1.jpg” dengan nama file gambar Anda.

5. Responsifitas

Pastikan bahwa website Anda dapat diakses dengan baik di berbagai perangkat, termasuk ponsel dan tablet. Anda dapat menggunakan CSS media queries untuk mengatur tampilan yang berbeda tergantung pada ukuran layar.

css :

@media (max-width: 768px) {

    /* Gaya CSS untuk layar berukuran kecil di sini */

}

6. Pengujian dan Peluncuran

Sebelum Anda meluncurkan website portofolio Anda, lakukan pengujian akhir untuk memastikan semua tautan berfungsi dengan baik dan konten terlihat seperti yang diharapkan. Setelah selesai, Anda dapat meluncurkannya dan membagikan tautan kepada orang lain.

Kesimpulan :

Membuat website portofolio dengan HTML dan CSS adalah langkah penting untuk memamerkan karya dan kemampuan Anda kepada dunia. Dengan langkah-langkah di atas, Anda dapat dengan mudah membuat website portofolio yang profesional dan menarik secara gratis. Ingatlah bahwa perawatan dan pembaruan teratur akan membantu website portofolio Anda tetap relevan dan efektif dalam jangka panjang. Selamat membuat portofolio online Anda!

Also Read

Bagikan:

Tags

Tinggalkan komentar