Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Tutorial HTML

Kode HTML dan CSS portofolio sederhana

Koderaya Posting Komentar

 



Tujuan Dari Portofolio Programmer Adalah untuk Menunjukkan Kemampuan teknis dan keahlian dalam pemrograman kepada calon klien, atau rekan kerja. Dengan melihat portofolio, orang dapat mengevaluasi kualitas kode, struktur aplikasi, dan kemampuan pemecahan masalah yang dimiliki oleh

Silahkan Buat 2 Folder

1. index.html
2. style.css

ini adalah kode sederhana jika anda ingin membuat portofolio

HTML ( index.html )
<!DOCTYPE html>
<html>
<head>
    <title>Portofolio Saya</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <header>
        <h1>Portofolio Saya</h1>
    </header>

    <section id="about">
        <h2>Tentang Saya</h2>
        <p>Saya adalah seorang pengembang web dengan minat dalam desain antarmuka pengguna yang menarik dan pengalaman pengguna yang optimal. Saya memiliki keahlian dalam HTML, CSS, dan JavaScript serta penggunaan berbagai kerangka kerja web.</p>
    </section>

    <section id="projects">
        <h2>Proyek Saya</h2>
        <div class="project">
            <h3>Proyek 1</h3>
            <p>Deskripsi proyek 1.</p>
        </div>
        <div class="project">
            <h3>Proyek 2</h3>
            <p>Deskripsi proyek 2.</p>
        </div>
    </section>

    <section id="contact">
        <h2>Hubungi Saya</h2>
        <p>Silakan hubungi saya melalui email di <a href="mailto:nama@email.com">nama@email.com</a>.
    </section>
</body>
</html>

CSS (dalam file "style.css"):
 body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

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

h1 {
    margin: 0;
}

section {
    padding: 20px;
}

h2 {
    color: #333;
}

.project {
    margin-bottom: 20px;
}

a {
    color: #333;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

Dalam contoh di atas, kita menggunakan elemen-elemen HTML seperti <header>, <section>, <h1>, <h2>, <p>, dan <a> untuk mengatur struktur dan konten halaman portofolio. CSS digunakan untuk memberikan gaya dan tata letak pada elemen-elemen tersebut.

Pastikan menyimpan kode HTML di dalam file dengan ekstensi .html dan kode CSS di dalam file dengan ekstensi .css. Kemudian, pastikan kedua file tersebut berada di dalam satu folder yang sama agar dapat diakses dengan benar.

Anda dapat menyesuaikan gaya dan tata letak dalam file CSS sesuai dengan preferensi dan desain yang Anda inginkan. Selain itu, Anda juga dapat menambahkan lebih banyak elemen dan konten ke dalam halaman portofolio sesuai kebutuhan Anda.

nah jadi itu lah source kode portofolio sederhana untuk pembelajaran sampai jumpa di totorial selanjutnya


Posting Komentar untuk "Kode HTML dan CSS portofolio sederhana"