Cara Membuat Web Biodata Diri dengan HTML dan CSS

Cara Membuat Web Biodata Diri dengan HTML dan CSS – Apakah Anda ingin menyajikan diri Anda secara online dengan gaya yang unik? Membuat situs web pribadi untuk membagikan biodata diri Anda bisa menjadi langkah awal yang tepat! Dalam dunia digital saat ini, memiliki situs web pribadi bukan hanya tentang menampilkan informasi diri, tetapi juga tentang menciptakan kesan yang kuat dan profesional. Dalam panduan riztekno kali ini, Anda akan belajar langkah demi langkah bagaimana membuat web biodata diri yang menarik menggunakan HTML dan CSS, tanpa perlu memiliki pengalaman teknis yang mendalam. Dengan bimbingan yang mudah dipahami dan langkah-langkah yang terperinci, Anda akan segera memiliki situs web pribadi yang memikat! Ayo mulai!

Alat yang Harus Anda Siapkan

Berikut ini beberapa alat yang Harus Anda Siapkan untuk dapat membuat web biodata diri dengan html dan css:

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

Cara Membuat Web Biodata Diri dengan HTML dan CSS

1. Buat Folder Project Web Biodata Diri

Langkah pertama adalah membuat folder khusus untuk proyek web biodata diri Anda. Ini akan membantu Anda menjaga semua file terorganisir dengan baik.

2. Buat Folder Img

Dalam folder proyek Anda, buat subfolder bernama “img“. Folder ini akan digunakan untuk menyimpan semua gambar yang akan Anda gunakan di situs web Anda. Download gambar disini untuk diterapkan dalam web biodata diri sebagai contoh awal.

3. Buat Sebuah File web_biodata_diri.html

Sekarang, buat file HTML utama untuk situs web Anda. Anda dapat melakukannya dengan membuat file baru dalam teks editor favorit Anda dan menyimpannya dengan nama “web_biodata_diri.html” di dalam folder proyek Anda.

Artikel Terkait:   Cara Membuat Search Box dengan HTML dan CSS

Berikut ini file html yang dapat Anda tambahkan untuk membuat web biodata diri 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>Biodata Diri</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="profile-picture">
      <img src="img/boy.png" alt="Profile Picture">
    </div>
    <div class="profile-details">
      <h1>Nama: John Doe</h1>
      <p>Umur: 25 tahun</p>
      <p>Alamat: Jalan Contoh No. 123, Kota Contoh</p>
      <p>Email: [email protected]</p>
      <p>Telepon: 123-456-7890</p>
      <p>Deskripsi: Saya adalah seorang yang suka belajar dan memiliki minat dalam bidang teknologi.</p>
    </div>
  </div>
</body>
</html>
 

4. Buat File style.css

Selanjutnya, buatlah file CSS terpisah untuk mengatur tata letak dan gaya situs web Anda. Buatlah file baru dalam teks editor Anda dan simpan sebagai “style.css” di dalam folder proyek Anda.

Berikut ini file css yang dapat Anda tambahkan untuk membuat web biodata diri dengan html dan css:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
  }
  
  .container {
    max-width: 800px;
    margin: 50px auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
  }
  
  .profile-picture {
    width: 200px;
    position: relative;
    overflow: hidden;
  }
  
  .profile-picture img {
    width: 100%;
    border-radius: 50%;
    transition: transform 0.3s ease;
  }
  
  .profile-picture:hover img {
    transform: scale(1.1);
  }
  
  .profile-details {
    margin-left: 20px;
  }
  
  .profile-details h1 {
    color: #333;
    margin-bottom: 10px;
  }
  
  .profile-details p {
    color: #666;
    margin: 5px 0;
  }
  
  .profile-details p:first-child {
    margin-top: 0;
  }
  
  .profile-details p:last-child {
    margin-bottom: 0;
  }
  
  .container::after {
    content: '';
    display: block;
    clear: both;
  }
 

5. Mengubah Tampilan Web Biodata Diri

Sekarang, Anda dapat mengubah tampilan situs web Anda sesuai dengan preferensi Anda. Tambahkan elemen HTML di dalam tag <main> untuk menampilkan informasi biodata diri Anda, seperti nama, foto, deskripsi, dan kontak.

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

6. Save & View Tampilan

Setelah semua perubahan selesai, simpan file HTML dan CSS Anda. Kemudian buka file “web_biodata_diri.html” dengan browser web Anda untuk melihat tampilan situs web Anda yang baru.

Preview hasil

Berikut ini preview hasil web biodata diri dengan html dan css jika Anda berhasil membuatnya:

Penutup

Setelah Anda selesai membuat web biodata diri Anda, jangan ragu untuk menyesuaikannya dengan kepribadian dan gaya Anda sendiri. Gunakan kesempatan ini untuk mengekspresikan siapa Anda secara kreatif dan profesional. Ingatlah bahwa situs web Anda adalah cerminan dari diri Anda, jadi pastikan untuk menjaga konten Anda relevan dan terkini. Selamat menjelajahi dunia web pribadi Anda yang baru dan jadikan situs web Anda sebagai alat untuk membangun jejak digital yang positif dan menarik! Terima kasih telah mengikuti panduan ini, dan semoga sukses selalu menyertai Anda dalam perjalanan digital Anda!