Pemrograman Web Tugas 4 - Membuat Website Responsive dengan Bootstrap

Muhammad Lintang Panjerino
5025201045
Pemrograman Web Kelas B


Tugas 4 mata kuliah Pemrograman Web Kelas B adalah latihan membuat website responsive dengan menggunakan salah satu framework CSS, yaitu Boostsrap. Tampilan website yang digunakan untuk latihan mengambil contoh dari website https://kelasprogrammer.com/membuat-template-web-responsive-bootstrap/ . Website ini saya buat dengan menggunakan sebuah file HTML yang terhubung dengan CDN Bootstrap. Source code dari website ini terletak pada sebuah repository di akun Github saya dan sudah di-deploy menggunakan Github Pages.

Link Website Latihan Bootstrap: https://mlintang20.github.io/pemrograman-web-tugas-4/

Link Repository Github: https://github.com/mlintang20/pemrograman-web-tugas-4


Berikut adalah screenshot dari website tersebut:





Dan berikut adalah potongan source code dari website tersebut:

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Latihan Bootstrap</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous" />
  </head>
  <body>
    <nav class="navbar navbar-expand-lg bg-dark navbar-dark">
      <div class="container-fluid">
        <a class="navbar-brand text-info" href="#">kelas_<span class="text-white">programmer</span></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link" aria-current="page" href="#">Pemrograman</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Database</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Framework</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Lainnya</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <section class="container-fluid py-5 d-flex justify-content-center" style="background-color: #ddd">
      <div class="text-center">
        <h1>Belajar Programming Itu Mudah</h1>
        <p>Tingkatkan skill programming kamu belajar turoial pemrograman gratis!</p>
      </div>
    </section>

    <section class="mt-4 container">
      <div class="row">
        <div class="col-lg-3 col-sm-6 col-12 d-flex justify-content-center mb-3">
          <div class="card" style="width: 20rem">
            <img src="img/coding.jpg" class="card-img-top" alt="..." style="height: 11rem" />
            <div class="card-body">
              <h5 class="card-title">Belajar HTML & CSS</h5>
              <p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique, ratione, maxime repellat voluptatum nihil possimus deleniti eius, voluptate sapiente fuga non! Quibusdam.</p>
              <div class="d-flex justify-content-center">
                <a href="#" class="btn btn-dark">Selengkapnya</a>
              </div>
            </div>
          </div>
        </div>

        <div class="col-lg-3 col-sm-6 col-12 d-flex justify-content-center mb-3">
          <div class="card" style="width: 20rem">
            <img src="img/webprog.jpg" class="card-img-top" alt="..." style="height: 11rem" />
            <div class="card-body">
              <h5 class="card-title">Web Programming</h5>
              <p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique, ratione, maxime repellat voluptatum nihil possimus deleniti eius, voluptate sapiente fuga non! Quibusdam.</p>
              <div class="d-flex justify-content-center">
                <a href="#" class="btn btn-dark">Selengkapnya</a>
              </div>
            </div>
          </div>
        </div>

        <div class="col-lg-3 col-sm-6 col-12 d-flex justify-content-center mb-3">
          <div class="card" style="width: 20rem">
            <img src="img/python.jpg" class="card-img-top" alt="..." style="height: 11rem" />
            <div class="card-body">
              <h5 class="card-title">Belajar Python</h5>
              <p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique, ratione, maxime repellat voluptatum nihil possimus deleniti eius, voluptate sapiente fuga non! Quibusdam.</p>
              <div class="d-flex justify-content-center">
                <a href="#" class="btn btn-dark">Selengkapnya</a>
              </div>
            </div>
          </div>
        </div>

        <div class="col-lg-3 col-sm-6 col-12 d-flex justify-content-center mb-3">
          <div class="card" style="width: 20rem">
            <img src="img/ui-ux.jpg" class="card-img-top" alt="..." style="height: 11rem" />
            <div class="card-body">
              <h5 class="card-title">Desain UI & UX</h5>
              <p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique, ratione, maxime repellat voluptatum nihil possimus deleniti eius, voluptate sapiente fuga non! Quibusdam.</p>
              <div class="d-flex justify-content-center">
                <a href="#" class="btn btn-dark">Selengkapnya</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <footer class="py-3 bg-dark text-center text-white">Pemrograman Web B Tugas 4 © Oktober 2022, Muhammad Lintang Panjerino</footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>


Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas 2 PPB

Gambar
  TUGAS 2 PPB PROJEK PERTAMA JETPACK COMPOSE - GREETING Nama: Muhammad Lintang Panjerino NRP: 5025201045 Kelas: PPB I Tahun: 2024 Link Github:  Tugas 2 - Greeting Pada Tugas 2 PPB, diberikan tugas untuk membuat projek pertama aplikasi mobile sederhana dengan Jetpack Compose. Projek pertama yang dibuat adalah projek sederhana untuk memperkenalkan diri. Projek ini hanya mengubah sedikit dari template awal yang sudah disediakan. Pada projek ini, digunakan software berupa Android Studio dan memakai bahasa Kotlin. Berikut adalah langkah untuk mengerjakan projek ini Setelah membuat projek baru pada Android Studio, tampilan akan langsung diarahkan ke file MainActivity.kt yang merupakan file utama projek yang dapat digunakan untuk mengubah dan memodifikasi projek. Untuk melihat tampilan sementara dari aplikasi Android yang dibuat, dapat melakukan preview dengan menggunakan emulator dari Android Studio. Caranya adalah dengan memilih menu "Device Manager" di sebelah kanan sisi...
Baca selengkapnya

Tugas 3 PPB

Gambar
  TUGAS 3 PPB MEMBUAT BIRTHDAY CARD Nama: Muhammad Lintang Panjerino NRP: 5025201045 Kelas: PPB I Tahun: 2024 Link Github:  Tugas 3 - Birthday Card Pada Tugas 3 PPB kali ini, diberikan tugas mengenal lebih dalam tentang “Composable” pada Jetpack Compose. Untuk memahami konsep “Composable” lebih mendalam secara langsung, dibuat proyek sederhana yang berupa aplikasi ucapan selamat ulang tahun sederhana. Pada proyek ini, digunakan software Android Studio dan bahasa pemrograman Kotlin. Proyek ini menggunakan referensi dari situs https://developer.android.com/codelabs/basic-android-kotlin-compose-text-composables?hl=id#0 yang kemudian dimodifikasi. Berikut adalah langkah untuk mengerjakan projek ini. Langkah pertama adalah membuat proyek baru pada Android Studio dan pilih proyek kosong “Empty Activity”. Kemudian, isi nama proyek, lokasi proyek, dan minimum SDK pada window “Empty Activity”. Setelah mengisi detail proyek, maka akan diarahkan langsung ke file MainActivity.k...
Baca selengkapnya

Tugas 4 PPB

Gambar
  TUGAS 4 PPB DICE ROLLER APPLICATION Nama: Muhammad Lintang Panjerino NRP: 5025201045 Kelas: PPB I Tahun: 2024 Link Github:  Tugas 4 - Dice Roller Pada Tugas 4 PPB kali ini, diberikan tugas memahami materi “Interaksi Button” pada Jetpack Compose. Untuk memahami konsep “Interaksi Button” lebih mendalam secara langsung, dibuat proyek sederhana yaitu aplikasi “Dice Roller” interaktif. Aplikasi ini berjalan dengan cara menekan button kemudian dadu akan menampilkan angka dadu secara acak. Dalam proyek “Dice Roller” ini akan dipelajari beberapa hal, antara lain cara menambahkan composable Button ke aplikasi Android dengan Compose, cara menambahkan perilaku ke composable Button di aplikasi Android dengan Compose, cara membuka dan mengubah kode Activity untuk aplikasi Android. Pada proyek ini, digunakan software Android Studio dan bahasa pemrograman Kotlin. Proyek ini menggunakan referensi dari situs Codelab berjudul “Membuat Aplikasi Dice Roller Interaktif” berikut https:/...
Baca selengkapnya