PWEB C - Tugas 5 - Latihan Bootstrap

NRP : 5025201066

Kelas : PWEB C

Tahun : 2022/2023

Dokumentasi :


Dokumentasi :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <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>
<!-- NAVBAR -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark text">
        <div class="container-fluid">
          <a class="navbar-brand" href="#"><h3><span style="color:dodgerblue;">Kelas_</span>programmer</h3></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 active" 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>
<!-- CONTAINER -->
    <div class="container-fluid">  
        <div class="row">  
             <div class="col-md-12 py-5" style="background-color:grey ;">  
              <h1><center>Belajar Programming Itu Mudah</center></h1>  
              <p><center>Tingkatkan skill programming kamu belajar tutorial pemrograman gratis!</center></p>
             </div>  
        </div>  
        <div class="row align-items-start mx-5 my-5">
            <div class="col">
              <img src="https://camo.githubusercontent.com/0fe8587dfd8285fbac164e2c23ad02809328065226e7f7ef90fb5651ed526df2/68747470733a2f2f6d69726f2e6d656469756d2e636f6d2f6d61782f3637352f312a64714c56374b6a55746735374a504243696c717853512e6a706567" alt="" height="100px">
              <h3>Belajar HTML & CSS</h3>  
              <p style="text-align: justify;">Saat ini, hampir semua orang bisa membuat dan mengembangkan website (web development) tanpa memahami coding. Padahal, penting juga lho untuk belajar HTML agar bisa memahami pondasi pembentuk website.</p>
            </div>
            <div class="col">
              <img src="https://cdn.columbiauniversitybootcamp.com/wp-content/uploads/sites/108/2021/03/CDG_blog_post_image_01-850x412.jpg" alt="" height="100px">
                <h3>Web Programming</h3>
                <p style="text-align: justify;">Web programming adalah proses pembuatan program berbasis. Kini, ia jadi salah satu bidang yang kian diminati, sejalan dengan meningkatnya kebutuhan akan programmer hingga beberapa tahun kedepan.</p>
            </div>
            <div class="col">
              <img src="https://www.online-tech-tips.com/wp-content/uploads/2021/11/New-Featured-Image.jpg" alt="" height="100px">
                <h3>Belajar Python</h3>
                <p style="text-align: justify;">Python bisa menjadi langkah pertama yang sangat baik untuk pemula. Python adalah bahasa yang mengutamakan kemudahan membaca kode, hal ini menjadikannya cara yang bagus untuk mulai membangun pengetahuan programming.</p>
            </div>
            <div class="col">
               <img src="https://miro.medium.com/max/1100/1*0vHrdFL8WRefogGNmSztWw.png" alt="" height="100px">
                <h3>Desain UI/UX</h3>
                <p style="text-align: justify;">Hal yang menjadi cakupan dari user interface atau UI ialah seluruh aspek visual yang ditampilkan di website. Jadi, cara pertama untuk belajar UI design yaitu dengan lebih mengenal apa saja prinsip dari UI design itu sendiri.</p>
            </div>
        </div>
   </div>  

    <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

Postingan populer dari blog ini

Sejarah Perkembangan Mobile Phone dan Pemrograman Mobile

PWEB C - Quiz