Pelajari CSS3 dan Bootstrap: 4 Kursus Dalam 1 untuk Pemula!

Jelajahi dunia CSS3 dan Bootstrap dengan 4 kursus komprehensif! Tingkatkan keterampilan desain web Anda hari ini dan raih impian karir Anda!

By WGS INDONESIA
4.9/4.9
Indonesia
Rp 43,750.00 GRATIS
E-COURSE banner with text and icons representing Artificial Intelligence and video learning

Detail Pembelajaran

Pelajari CSS3 dan Bootstrap: 4 Kursus Dalam 1 untuk Pemula!
  • CSS3, Bootstrap, Kursus Pemula, Desain Web

Baca Online

eBook Pelajaran CSS3 dan Bootstrap untuk Pemula

Pelajari CSS3 dan Bootstrap: 4 Kursus Dalam 1 untuk Pemula!

Daftar Isi

  1. Pengantar CSS3
  2. Materi Lengkap CSS3
  3. Pengantar Bootstrap
  4. Materi Lengkap Bootstrap
  5. Step by Step Pembuatan Website
  6. Source Code dan Channel Pembelajaran

Pengantar CSS3

CSS3 adalah versi terbaru dari Cascading Style Sheets yang digunakan untuk mengatur tampilan dan layout halaman web. Dengan CSS3, Anda dapat membuat desain yang responsif, animasi, dan efek visual yang menarik.

Ilustrasi komputer dengan kode CSS3 dan desain web modern berwarna biru dan oranye

Materi Lengkap CSS3

1. Selektor CSS

Selektor digunakan untuk memilih elemen HTML yang ingin diberi gaya. Contoh selektor dasar: 

/* Selektor tag */
p {
  color: blue;
}

/* Selektor kelas */
.box {
  background-color: yellow;
}

/* Selektor ID */
#header {
  font-size: 24px;
}

2. Properti Warna dan Teks

Mengatur warna, ukuran, dan jenis font pada teks. 

p {
  color: #333333;
  font-size: 16px;
  font-family: 'Arial', sans-serif;
  text-align: center;
}

3. Box Model

Box model terdiri dari margin, border, padding, dan content. Contoh: 

.container {
  margin: 20px;
  border: 2px solid #000;
  padding: 15px;
  width: 300px;
}
Diagram box model CSS3 yang menunjukkan margin, border, padding, dan content dengan warna berbeda

4. Layout dengan Flexbox

Flexbox memudahkan pengaturan layout elemen dalam satu dimensi (baris atau kolom). 

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
Ilustrasi layout flexbox dengan beberapa kotak berwarna berbeda tersusun rapi secara horizontal

5. Animasi dan Transisi

CSS3 memungkinkan membuat animasi dan transisi halus pada elemen. 

.button {
  background-color: #4f46e5;
  color: white;
  padding: 10px 20px;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #3730a3;
}

Pengantar Bootstrap

Bootstrap adalah framework CSS yang memudahkan pembuatan website responsif dan modern dengan komponen siap pakai. Bootstrap menggunakan grid system dan utility classes untuk mempercepat pengembangan.

Logo Bootstrap berwarna ungu dan contoh tampilan website responsif di berbagai perangkat

Materi Lengkap Bootstrap

1. Grid System Bootstrap

Bootstrap menggunakan grid 12 kolom untuk membuat layout responsif. 

<div class="container">
  <div class="row">
    <div class="col-md-6">Kolom 1</div>
    <div class="col-md-6">Kolom 2</div>
  </div>
</div>
Diagram grid system Bootstrap dengan 12 kolom dan dua kolom yang masing-masing mengambil 6 kolom

2. Komponen Bootstrap

Bootstrap menyediakan komponen siap pakai seperti tombol, navbar, card, modal, dan lainnya. 

<button class="btn btn-primary">Tombol Utama</button>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
</nav>
Tampilan tombol biru dan navbar Bootstrap dengan latar belakang terang

3. Utility Classes

Utility classes Bootstrap memudahkan pengaturan margin, padding, warna, dan lainnya tanpa menulis CSS. 

<div class="p-4 mb-3 bg-primary text-white">Konten</div>

4. Responsif dengan Bootstrap

Bootstrap memudahkan membuat website yang tampil baik di semua perangkat dengan breakpoint responsif. 

<div class="col-12 col-md-8 col-lg-6">Konten responsif</div>

Step by Step Pembuatan Website

Langkah 1: Setup Project

Buat folder project dan buat file index.html . Sertakan link Tailwind dan Bootstrap CDN. 

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Website Pertama</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>

</body>
</html>

Langkah 2: Membuat Struktur HTML

Buat struktur dasar dengan header, main content, dan footer (meskipun footer tidak akan ditampilkan di ebook ini). 

<body>
  <header>
    <h1>Selamat Datang di Website Saya</h1>
  </header>
  <main>
    <p>Ini adalah konten utama.</p>
  </main>
</body>

Langkah 3: Styling dengan Tailwind dan Bootstrap

Gunakan kelas Tailwind dan Bootstrap untuk mempercantik tampilan. 

<header class="bg-indigo-600 text-white p-4 text-center">
  <h1 class="text-3xl font-bold">Selamat Datang di Website Saya</h1>
</header>

<main class="p-6">
  <button class="btn btn-primary">Klik Saya</button>
</main>

Langkah 4: Membuat Layout Responsif

Gunakan grid Bootstrap dan flexbox Tailwind untuk layout responsif. 

<div class="container">
  <div class="row">
    <div class="col-md-6 flex justify-center items-center">
      <img src="https://placehold.co/200x150/png?text=Gambar+Responsif" alt="Gambar placeholder berukuran 200x150 piksel dengan teks Gambar Responsif" class="rounded shadow">
    </div>
    <div class="col-md-6 p-4">
      <h2 class="text-2xl font-semibold mb-2">Judul Konten</h2>
      <p>Deskripsi konten yang menarik dan informatif.</p>
    </div>
  </div>
</div>

Langkah 5: Testing dan Deployment

Uji website di berbagai perangkat dan browser. Setelah siap, upload ke hosting atau gunakan GitHub Pages.

Ilustrasi berbagai perangkat seperti smartphone, tablet, dan laptop yang menampilkan website responsif

Source Code dan Channel Pembelajaran

Source Code Lengkap

Berikut contoh source code sederhana yang menggabungkan Tailwind dan Bootstrap untuk membuat halaman responsif dengan tombol interaktif: 

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contoh Website</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <header class="bg-indigo-700 text-white p-5 text-center">
    <h1 class="text-4xl font-bold">Website Belajar CSS3 & Bootstrap</h1>
  </header>

  <main class="container my-10">
    <div class="row">
      <div class="col-md-6 flex justify-center items-center">
        <img src="https://placehold.co/300x200/png?text=Belajar+CSS3+dan+Bootstrap" alt="Gambar ilustrasi belajar CSS3 dan Bootstrap dengan laptop dan kode di layar" class="rounded shadow">
      </div>
      <div class="col-md-6 p-4">
        <h2 class="text-3xl font-semibold mb-4">Mulai Belajar Sekarang!</h2>
        <p class="mb-4">Pelajari CSS3 dan Bootstrap dengan mudah dan cepat melalui tutorial lengkap dan contoh praktis.</p>
        <button class="btn btn-primary px-6 py-3 text-lg">Daftar Kursus</button>
      </div>
    </div>
  </main>
</body>
</html>

Edukasi Terkait