Web Programming Basic
  • Pengenalan HTML
  • Pengenalan CSS
  • Tugas Pembelajaran CSS
  • Pengenalan Javascript Dan Dom
  • Membuat Halmaan Login
  • Membuat Halaman Dashboard
  • Pembelajaran Framework Bootstrap
  • Membuat tampilan login dengan framework bootstrap
  • Membuat Tampilan Dashboard Dengan Bootstrap
  • Membuat Tampilan Portofolio diri
  • Evaluasi Dan Pembuatan Akun Linkedin
  • Exam
Powered by GitBook
On this page

Membuat Tampilan Portofolio diri

1. HTML <head> dan Link ke CSS Bootstrap

  • Tujuan: Menyertakan pengaturan halaman dan menghubungkan halaman ke Bootstrap untuk gaya dan fungsionalitas.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portofolio Diri</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .profile-img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
        }
    </style>
</head>

  • <meta charset="UTF-8">: Menetapkan encoding karakter halaman web.

  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Membuat halaman responsif, sehingga tampilan menyesuaikan dengan lebar layar perangkat.

  • <title>: Menentukan judul halaman yang muncul di tab browser.

  • <link>: Menghubungkan halaman ke file CSS Bootstrap, sehingga tampilan dan fitur responsif dapat digunakan.

  • <style>: Menambahkan gaya kustom untuk membuat gambar profil menjadi bulat dan tampilan lebih menarik.

2. Navbar (Navigasi)

  • Tujuan: Memberikan menu navigasi untuk berpindah antar bagian portofolio.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="#">Portofolio Diri</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Beranda</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#datadiri">Data Diri</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#keterampilan">Keterampilan</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#pendidikan">Pendidikan</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#media-sosial">Media Sosial</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

  • Navbar menggunakan kelas Bootstrap navbar, navbar-expand-lg, navbar-dark, dan bg-dark untuk membuat navbar gelap yang responsif.

  • Toggler Button digunakan untuk menampilkan menu pada perangkat kecil (mobile) ketika navbar menyusut.

  • ul dan li berfungsi untuk membuat daftar tautan navigasi menuju bagian-bagian tertentu dalam portofolio (misalnya, #datadiri menuju bagian Data Diri).

3. Profil

  • Tujuan: Menampilkan foto profil dan deskripsi singkat tentang diri Anda.

<section class="text-center p-5 bg-light" id="profil">
    <div class="container">
        <img src="https://via.placeholder.com/150" alt="Foto Profil" class="profile-img mb-3">
        <h1>Nama Anda</h1>
        <p class="lead">Deskripsi singkat tentang diri Anda.</p>
    </div>
</section>

  • section: Membuat bagian yang berisi informasi profil.

  • container: Membungkus elemen untuk membuat tata letak yang responsif.

  • img: Menampilkan gambar profil dengan class="profile-img" yang memastikan gambar menjadi bulat.

  • h1 dan p: Menampilkan nama dan deskripsi singkat.

4. Data Diri

  • Tujuan: Menampilkan informasi pribadi (misalnya, alamat, email, nomor telepon, dll).

<section id="datadiri" class="p-5">
    <div class="container">
        <h2 class="text-center mb-4">Data Diri</h2>
        <div class="row">
            <div class="col-md-6">
                <ul class="list-unstyled">
                    <li><strong>Nama Lengkap:</strong> Nama Anda</li>
                    <li><strong>Alamat:</strong> Alamat Anda</li>
                    <li><strong>Email:</strong> email@domain.com</li>
                    <li><strong>Telepon:</strong> +62 123 456 7890</li>
                </ul>
            </div>
            <div class="col-md-6">
                <ul class="list-unstyled">
                    <li><strong>Tanggal Lahir:</strong> 1 Januari 1990</li>
                    <li><strong>Jenis Kelamin:</strong> Laki-laki</li>
                    <li><strong>Kewarganegaraan:</strong> Indonesia</li>
                </ul>
            </div>
        </div>
    </div>
</section>

  • ul dan li: Menampilkan daftar informasi pribadi.

  • col-md-6: Membagi ruang menjadi dua kolom pada layar lebih besar (desktop), dengan masing-masing kolom memuat set data yang berbeda.

  • row: Membungkus kolom-kolom di dalam satu baris untuk tata letak grid Bootstrap.

5. Keterampilan

  • Tujuan: Menampilkan keterampilan yang dimiliki dalam berbagai kategori.

<section id="keterampilan" class="bg-light p-5">
    <div class="container">
        <h2 class="text-center mb-4">Keterampilan</h2>
        <div class="row">
            <div class="col-md-4">
                <h5>Web Development</h5>
                <ul>
                    <li>HTML, CSS, JavaScript</li>
                    <li>React, Angular</li>
                    <li>Bootstrap, Tailwind CSS</li>
                </ul>
            </div>
            <div class="col-md-4">
                <h5>Desain Grafis</h5>
                <ul>
                    <li>Adobe Photoshop</li>
                    <li>Adobe Illustrator</li>
                </ul>
            </div>
            <div class="col-md-4">
                <h5>Manajemen Proyek</h5>
                <ul>
                    <li>Agile, Scrum</li>
                    <li>Asana, Trello</li>
                </ul>
            </div>
        </div>
    </div>
</section>

  • Keterampilan dikelompokkan dalam kategori, dengan h5 untuk judul dan ul untuk daftar keterampilan.

  • Grid System (menggunakan col-md-4) memastikan bahwa setiap kategori keterampilan ditampilkan dalam tiga kolom yang terpisah, dengan kolom yang fleksibel pada layar kecil.

6. Pendidikan

  • Tujuan: Menampilkan informasi tentang riwayat pendidikan Anda.

<section id="pendidikan" class="p-5">
    <div class="container">
        <h2 class="text-center mb-4">Jenjang Pendidikan</h2>
        <ul>
            <li><strong>Universitas ABC</strong> - Sarjana Informatika (2012-2016)</li>
            <li><strong>SMA Negeri 1 Kota X</strong> - IPA (2009-2012)</li>
        </ul>
    </div>
</section>

  • ul dan li digunakan untuk menampilkan setiap jenjang pendidikan dengan informasi tentang institusi dan jurusan/tahun.

7. Media Sosial

  • Tujuan: Menyediakan tombol untuk mengakses akun media sosial.

<section id="media-sosial" class="bg-light p-5">
    <div class="container text-center">
        <h2 class="mb-4">Media Sosial</h2>
        <a href="https://facebook.com" class="btn btn-primary mx-2">Facebook</a>
        <a href="https://linkedin.com" class="btn btn-primary mx-2">LinkedIn</a>
        <a href="https://github.com" class="btn btn-primary mx-2">GitHub</a>
    </div>
</section>

  • Tombol Media Sosial: Menggunakan btn btn-primary dari Bootstrap untuk membuat tombol dengan warna biru, yang dapat di-klik untuk menuju akun media sosial Anda.

8. Footer

  • Tujuan: Memberikan informasi hak cipta.

<footer class="bg-dark text-white text-center p-3">
    <p>&copy; 2025 Nama Anda. All rights reserved.</p>
</footer>

  • footer: Membuat footer dengan latar belakang gelap dan teks putih, menampilkan informasi hak cipta.

9. Script JS Bootstrap

  • Tujuan: Menyertakan file JavaScript untuk mendukung interaktivitas seperti menu toggle pada perangkat mobile.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

  • Menyertakan Bootstrap JS untuk mendukung interaktivitas pada elemen-elemen seperti tombol navigasi yang dapat diperluas pada perangkat kecil.

PreviousMembuat Tampilan Dashboard Dengan BootstrapNextEvaluasi Dan Pembuatan Akun Linkedin

Last updated 4 months ago