Membuat Halaman Profil (Biodata) Sederhana menggunakan HTML dan CSS

Berikut kode html dan css untuk membuat halaman profil (biodata) yang dibuat sederhana untuk melatih kemampuan pemrograman dasar web.

Buat folder project dengan nama my_web_profil
Buka kode editor yang kalain sukai, misal Visual Studio Code, kemudian buka folder (masuk ke menu File->Open Folder (Cari lokasi folder yang dibuat)
Buat file dengan ekstensi html, dalam hal ini halaman index (index.html). Kemudian masukkan kode berikut:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profil [Nama Lengkap]</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header class="profile-header">
            <img src="photo.png" alt="Foto Profil" class="profile-picture">
            <h1>[Nama Lengkap]</h1>
            <p class="title">Sysadmin | Pengembang Web | Penulis Konten</p>
        </header>

        <section class="about-me">
            <h2 class="section-title">Tentang Saya</h2>
            <p>[Silahkan sesuaikan]
                Saya adalah seorang profesional yang bersemangat dengan pengalaman di bidang pengembangan web. Saya memiliki ketertarikan yang kuat dalam menciptakan solusi digital yang inovatif dan mudah digunakan. Dengan latar belakang di Teknik Komputer dan Jaringan, saya selalu mencari tantangan baru dan peluang untuk belajar. Saya percaya bahwa kombinasi antara kreativitas dan kemampuan teknis adalah kunci untuk menghasilkan proyek yang sukses.
            </p>
        </section>

        <section class="contact-info">
            <h2 class="section-title">Informasi Kontak</h2>
            <ul>
                <li><strong>Email:</strong> email@nahlcode.com</li>
                <li><strong>Telepon:</strong> +62 852 1600 3068</li>
                <li><strong>Lokasi:</strong> Bogor, Indonesia</li>
                <li><strong>LinkedIn:</strong> <a href="https://linkedin.com/in/useranda" target="_blank">linkedin.com/in/useranda</a></li>
            </ul>
        </section>

        <section class="skills-list">
            <h2 class="section-title">Keterampilan</h2>
            <ul>
                <li>Linux</li>
                <li>Webserver</li>
                <li>HTML5</li>
                <li>CSS3</li>
                <li>Python</li>
                <li>Manajemen Proyek</li>
            </ul>
        </section>

        <footer>
            <p>&copy; 2025 [Nama kamu]. Hak Cipta Dilindungi.</p>
        </footer>
    </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Profil [Nama Lengkap]</title>

</head>

<body>

<h1>[Nama Lengkap]</h1>

<p class="title">Sysadmin | Pengembang Web | Penulis Konten</p>

</header>

<h2 class="section-title">Tentang Saya</h2>

<p>[Silahkan sesuaikan]

Saya adalah seorang profesional yang bersemangat dengan pengalaman di bidang pengembangan web. Saya memiliki ketertarikan yang kuat dalam menciptakan solusi digital yang inovatif dan mudah digunakan. Dengan latar belakang di Teknik Komputer dan Jaringan, saya selalu mencari tantangan baru dan peluang untuk belajar. Saya percaya bahwa kombinasi antara kreativitas dan kemampuan teknis adalah kunci untuk menghasilkan proyek yang sukses.

</p>

</section>

<h2 class="section-title">Informasi Kontak</h2>

<ul>

<li><strong>Email:</strong> email@nahlcode.com</li>

<li><strong>Telepon:</strong> +62 852 1600 3068</li>

<li><strong>Lokasi:</strong> Bogor, Indonesia</li>

<li><strong>LinkedIn:</strong> <a href="https://linkedin.com/in/useranda" target="_blank">linkedin.com/in/useranda</a></li>

</ul>

</section>

<h2 class="section-title">Keterampilan</h2>

<ul>

<li>Linux</li>

<li>Webserver</li>

<li>Python</li>

<li>Manajemen Proyek</li>

</ul>

</section>

</footer>

</div>

</body>

</html>

Buat file dengan ekstensi css, dengan nama style (style.css). Kemudian masukkan kode berikut

/* CSS untuk styling halaman */
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f7f6;
    color: #333;
    line-height: 1.6;
}

.container {
    max-width: 800px;
    margin: 40px auto;
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.profile-header {
    margin-bottom: 30px;
}

.profile-picture {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid #28a745;
    margin-bottom: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h1 {
    color: #2c3e50;
    font-size: 2.5em;
    margin-bottom: 5px;
}

.title {
    color: #6c757d;
    font-size: 1.2em;
    margin-top: 0;
}

.section-title {
    color: #28a745;
    font-size: 1.8em;
    margin-top: 30px;
    border-bottom: 2px solid #28a745;
    padding-bottom: 10px;
    display: inline-block;
}

.about-me, .contact-info, .skills-list {
    text-align: left;
    margin-top: 20px;
}

.about-me p {
    font-size: 1.1em;
    text-align: justify;
}

.contact-info ul {
    list-style: none;
    padding: 0;
}

.contact-info ul li {
    margin-bottom: 10px;
    font-size: 1.05em;
}

.contact-info ul li strong {
    color: #2c3e50;
}

.skills-list ul {
    list-style: disc;
    padding-left: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.skills-list ul li {
    background-color: #e9ecef;
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 0.95em;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

footer {
    margin-top: 40px;
    font-size: 0.9em;
    color: #6c757d;
}

100

101

/* CSS untuk styling halaman */

body {

font-family: 'Roboto', sans-serif;

margin: 0;

padding: 0;

background-color: #f4f7f6;

color: #333;

line-height: 1.6;

}

.container {

max-width: 800px;

margin: 40px auto;

background-color: #fff;

padding: 30px;

border-radius: 10px;

box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

text-align: center;

}

.profile-header {

margin-bottom: 30px;

}

.profile-picture {

width: 150px;

height: 150px;

border-radius: 50%;

object-fit: cover;

border: 5px solid #28a745;

margin-bottom: 15px;

box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

}

h1 {

color: #2c3e50;

font-size: 2.5em;

margin-bottom: 5px;

}

.title {

color: #6c757d;

font-size: 1.2em;

margin-top: 0;

}

.section-title {

color: #28a745;

font-size: 1.8em;

margin-top: 30px;

border-bottom: 2px solid #28a745;

padding-bottom: 10px;

display: inline-block;

}

.about-me, .contact-info, .skills-list {

text-align: left;

margin-top: 20px;

}

.about-me p {

font-size: 1.1em;

text-align: justify;

}

.contact-info ul {

list-style: none;

padding: 0;

}

.contact-info ul li {

margin-bottom: 10px;

font-size: 1.05em;

}

.contact-info ul li strong {

color: #2c3e50;

}

.skills-list ul {

list-style: disc;

padding-left: 20px;

display: grid;

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

gap: 10px;

}

.skills-list ul li {

background-color: #e9ecef;

padding: 8px 15px;

border-radius: 5px;

font-size: 0.95em;

text-align: center;

box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

}

footer {

margin-top: 40px;

font-size: 0.9em;

color: #6c757d;

}

Masukkan photo di folder my_web_profil

Jika tahap diatas selesai, buka file index.html dengan menggunakan browser kesayangan, misal: chrome, mozilla, dll