Kuasai Desain Web Modern: Pelajari HTML, CSS & Bootstrap!

Daftar Isi

Pengantar Desain Web Modern
Materi HTML Lengkap
Materi CSS Lengkap
Materi Bootstrap Lengkap
Step by Step Membuat Website
Source Code Contoh & Channel Pembelajaran

Pengantar Desain Web Modern

Desain web modern adalah proses membuat tampilan dan pengalaman pengguna yang menarik, responsif, dan mudah digunakan pada website. Dengan menguasai HTML, CSS, dan Bootstrap, Anda dapat membangun website yang profesional dan sesuai dengan standar terkini.

HTML adalah bahasa markup untuk membuat struktur halaman web. CSS digunakan untuk mengatur tampilan dan layout. Bootstrap adalah framework CSS yang memudahkan pembuatan desain responsif dan komponen siap pakai.

Materi HTML Lengkap

1. Struktur Dasar HTML

HTML (HyperText Markup Language) adalah bahasa dasar untuk membuat halaman web. Struktur dasar HTML terdiri dari tag html , head , dan body .

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8">
    <title>Judul Halaman</title>
  </head>
  <body>
    <h1>Halo Dunia!</h1>
    <p>Ini adalah paragraf pertama saya.</p>
  </body>
</html>

2. Tag HTML Penting

<h1> sampai <h6> - Heading atau judul
<p> - Paragraf teks
<a> - Link atau tautan
<img> - Menampilkan gambar
<ul> dan <ol> - Daftar tidak berurutan dan berurutan
<div> - Container atau pembungkus elemen
<span> - Elemen inline untuk styling

3. Contoh Penggunaan Tag HTML

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8">
    <title>Contoh HTML Sederhana</title>
  </head>
  <body>
    <h1>Selamat Datang di Website Saya</h1>
    <p>Ini adalah paragraf yang menjelaskan tentang website ini.</p>
    <a href="https://www.example.com">Kunjungi Website Lain</a>
    <img src="https://placehold.co/600x300/png?text=Gambar+Contoh+HTML" alt="Gambar contoh HTML dengan latar belakang biru dan teks putih" />
  </body>
</html>

Materi CSS Lengkap

1. Apa itu CSS?

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan dan layout halaman web. Dengan CSS, Anda bisa mengubah warna, ukuran, posisi, dan gaya elemen HTML.

2. Cara Menggunakan CSS

Ada tiga cara utama menggunakan CSS:

Inline CSS: langsung di tag HTML menggunakan atribut style
Internal CSS: di dalam tag <style> pada bagian <head>
External CSS: file CSS terpisah yang dihubungkan dengan tag <link>

3. Contoh CSS Internal

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8">
    <title>Contoh CSS Internal</title>
    <style>
      body {
        background-color: #f0f4f8;
        font-family: Arial, sans-serif;
      }
      h1 {
        color: #4f46e5;
        text-align: center;
      }
      p {
        color: #374151;
        font-size: 18px;
      }
    </style>
  </head>
  <body>
    <h1>Judul dengan Warna Ungu</h1>
    <p>Ini paragraf dengan warna abu-abu gelap.</p>
  </body>
</html>

4. Properti CSS Penting

color: mengatur warna teks
background-color: mengatur warna latar belakang
font-size: ukuran teks
margin: jarak luar elemen
padding: jarak dalam elemen
border: garis tepi elemen
display: mengatur tipe tampilan elemen (block, inline, flex, grid)
flexbox & grid: layout modern untuk mengatur posisi elemen

Materi Bootstrap Lengkap

1. Apa itu Bootstrap?

Bootstrap adalah framework CSS open-source yang memudahkan pembuatan website responsif dan modern dengan komponen siap pakai seperti tombol, navbar, form, dan grid system.

2. Cara Menggunakan Bootstrap

Anda bisa menggunakan Bootstrap dengan menambahkan link CDN di <head> halaman HTML Anda:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

Setelah itu, Anda bisa menggunakan kelas-kelas Bootstrap untuk membuat layout dan komponen.

3. Contoh Grid System Bootstrap

<div class="container">
  <div class="row">
    <div class="col-md-6">Kolom 1</div>
    <div class="col-md-6">Kolom 2</div>
  </div>
</div>

Grid system Bootstrap menggunakan 12 kolom yang bisa disesuaikan untuk berbagai ukuran layar.

4. Contoh Tombol Bootstrap

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

Step by Step Membuat Website

Langkah 1: Buat Struktur HTML Dasar

Mulailah dengan membuat file index.html dan tulis struktur HTML dasar.

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Website Saya</title>
  </head>
  <body>
    <h1>Halo, Selamat Datang!</h1>
  </body>
</html>

Langkah 2: Tambahkan CSS untuk Styling

Buat file style.css dan hubungkan ke HTML dengan tag <link> . Tambahkan styling dasar.

<!-- Di dalam <head> -->
<link rel="stylesheet" href="style.css">

<!-- style.css -->
body {
  font-family: 'Arial', sans-serif;
  background-color: #f9fafb;
  color: #111827;
  margin: 0;
  padding: 20px;
}
h1 {
  color: #4f46e5;
}

Langkah 3: Gunakan Bootstrap untuk Responsif

Tambahkan link CDN Bootstrap di <head> dan gunakan kelas Bootstrap untuk layout responsif.

<!-- Di dalam <head> -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Di dalam <body> -->
<div class="container mt-5">
  <div class="row">
    <div class="col-md-6">
      <h2>Kolom Kiri</h2>
      <p>Ini adalah kolom kiri.</p>
    </div>
    <div class="col-md-6">
      <h2>Kolom Kanan</h2>
      <p>Ini adalah kolom kanan.</p>
    </div>
  </div>
</div>

Langkah 4: Tambahkan Gambar dan Link

Gunakan tag <img> untuk gambar dan <a> untuk tautan.

<img src="https://placehold.co/600x300/png?text=Gambar+Website" alt="Gambar ilustrasi website dengan latar belakang biru dan teks putih" class="img-fluid rounded" />

<a href="https://www.google.com" target="_blank" class="btn btn-primary mt-3">Kunjungi Google</a>

Langkah 5: Uji dan Perbaiki

Buka file HTML di browser, cek tampilan di berbagai perangkat, dan perbaiki jika ada yang kurang sesuai.

Ilustrasi testing website di berbagai perangkat seperti smartphone, tablet, dan laptop dengan tampilan responsif

Source Code Contoh & Channel Pembelajaran

Source Code Contoh Website Sederhana

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Website Sederhana</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
      body {
        font-family: 'Arial', sans-serif;
        background-color: #f9fafb;
        margin: 0;
        padding: 20px;
      }
      h1 {
        color: #4f46e5;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1 class="mb-4">Halo, Selamat Datang!</h1>
      <div class="row">
        <div class="col-md-6">
          <p>Ini adalah kolom kiri.</p>
          <button class="btn btn-primary">Klik Saya</button>
        </div>
        <div class="col-md-6">
          <img src="https://placehold.co/600x300/png?text=Gambar+Website" alt="Gambar ilustrasi website dengan latar belakang biru dan teks putih" class="img-fluid rounded" />
        </div>
      </div>
    </div>
  </body>
</html>