HTML & CSS - Web Pembelajaran Informatika

📑 Daftar Isi

Bagian 1: Pengenalan HTML
Bagian 2: Tag HTML Dasar
Bagian 3: Form dan Input
Bagian 4: Pengenalan CSS
Bagian 5: CSS Lanjutan
Bagian 6: Flexbox & Grid
Bagian 7: Animasi & Transisi
Bagian 8: Proyek Website
Bagian 9: Bootstrap Framework
Bagian 10: Sass/SCSS
Bagian 11: Responsive Design Lanjutan
Bagian 12: SEO Dasar

Iklan 728x90 - Pasang Kode AdSense Anda Di Sini

📚 Bagian 1: Pengenalan HTML

Apa itu HTML?

HTML (HyperText Markup Language) adalah bahasa standar untuk membuat dan menyusun halaman web. HTML bukanlah bahasa pemrograman, melainkan bahasa markup yang menggunakan tag untuk mendefinisikan elemen-elemen dalam halaman web.

Sejarah HTML

1991 - HTML 1.0 (Tim Berners-Lee)
1995 - HTML 2.0
1997 - HTML 3.2
1999 - HTML 4.01
2014 - HTML5 (Versi terkini)

Mengapa Harus Belajar HTML?

🌐 Fondasi Web - Semua website menggunakan HTML
📱 Mudah Dipelajari - Sintaks yang mudah dipahami
🎨 Kreatif - Batas kreativitas sangat luas
💼 Demand Tinggi - Profesi front-end developer

Persiapan Lingkungan Kerja

 
<!-- Alat yang dibutuhkan: --> 
1. Text Editor: VS Code (recommended), Sublime Text, Notepad++ 
2. Browser: Chrome, Firefox, Edge 
3. Ekstensi VS Code: Live Server, Prettier  

<!-- Struktur folder proyek: --> 
proyek-website/ 
├── index.html 
├── style.css 
├── script.js 
└── images/     
    └── logo.png             
            

Struktur Dasar HTML

 
<!DOCTYPE html> 
<html lang="id"> 
<head>     
    <meta charset="UTF-8">     
    <meta name="viewport" content="width=device-width, initial-scale=1.0">     
    <title>Judul Halaman</title> 
</head> 
<body>     
    <!-- Konten website ada di sini -->     
    <h1>Hello, World!</h1>     
    <p>Ini paragraf pertama saya</p> 
</body> 
</html>             
            

Penjelasan Setiap Tag

Tag	Fungsi
<!DOCTYPE html>	Deklarasi dokumen HTML5
<html>	Root element HTML
<head>	Informasi meta halaman
<body>	Konten yang ditampilkan
<title>	Judul di tab browser

📹 Video Tutorial Bagian 1:

🏷️ Bagian 2: Tag HTML Dasar

Heading (Judul)

HTML menyediakan 6 level heading, dari <h1> (paling besar) hingga <h6> (paling kecil).

 
<h1>Judul Utama (H1)</h1> 
<h2>Sub Judul (H2)</h2> 
<h3>Sub Sub Judul (H3)</h3> 
<h4>Judul Level 4</h4> 
<h5>Judul Level 5</h5> 
<h6>Judul Level 6</h6>             
            

Paragraf dan Text Formatting

 
<!-- Paragraf --> 
Ini adalah paragraf yang berisi beberapa kalimat.  

<!-- Text Formatting --> 
<b>Teks Bold</b> 
<strong>Teks Penting (Bold)</strong> 
<i>Teks Italic</i> 
<em>Teks Emphasis (Italic)</em> 
<u>Teks Underline</u> 
<s>Teks Strikethrough</s> 
<mark>Teks Highlight</mark> 
<sup>Superscript (x²)</sup> 
<sub>Subscript (H₂O)</sub>             
            

Link (Hyperlink)

 
<!-- Link ke website lain --> 
<a href="https://google.com">Klik untuk ke Google</a>  

<!-- Link membuka di tab baru --> 
<a href="https://youtube.com" target="_blank">Buka YouTube (Tab Baru)</a>  

<!-- Link ke halaman lain di website --> 
<a href="tentang.html">Tentang Kami</a>  

<!-- Link ke bagian tertentu (anchor) --> 
<a href="#bagian1">Ke Bagian 1</a>             
            

Gambar

 
<!-- Gambar dari folder lokal --> 
<img src="images/logo.png" alt="Logo Website">  

<!-- Gambar dari internet --> 
<img src="https://example.com/foto.jpg"        
       alt="Foto Contoh"        
       width="300"        
       height="200">  

<!-- Gambar sebagai link --> 
<a href="https://google.com">     
    <img src="logo.png" alt="Logo Google"> 
</a>             
            

List (Daftar)

 
<!-- Unordered List (Bullet) --> 
<ul>     
    <li>Apel</li>     
    <li>Jeruk</li>     
    <li>Mangga</li> 
</ul>  

<!-- Ordered List (Angka) --> 
<ol>     
    <li>Langkah pertama</li>     
    <li>Langkah kedua</li>     
    <li>Langkah ketiga</li> 
</ol>  

<!-- Description List --> 
<dl>     
    <dt>HTML</dt>     
    <dd>HyperText Markup Language</dd>     
    <dt>CSS</dt>     
    <dd>Cascading Style Sheets</dd> 
</dl>             
            

Table (Tabel)

 
<table border="1">     
    <thead>         
        <tr>             
            <th>No</th>             
            <th>Nama</th>             
            <th>Nilai</th>         
        </tr>     
    </thead>     
    <tbody>         
        <tr>             
            <td>1</td>             
            <td>Budi</td>             
            <td>90</td>         
        </tr>         
        <tr>             
            <td>2</td>             
            <td>Ani</td>             
            <td>85</td>         
        </tr>     
    </tbody> 
</table>             
            

📹 Video Tutorial Bagian 2:

📝 Bagian 3: Form dan Input

Element Form

 
<form action="proses.php" method="POST">     
    <!-- Field form akan diletakkan di sini -->     
    <label>Nama:</label>     
    <input type="text" name="nama" required>          
    <button type="submit">Kirim</button> 
</form>             
            

Jenis-Jenis Input

 
<!-- Text Input --> 
<label>Nama Lengkap:</label> 
<input type="text" name="nama" placeholder="Masukkan nama">  

<!-- Email --> 
<input type="email" name="email" placeholder="email@example.com">  

<!-- Password --> 
<input type="password" name="password">  

<!-- Number --> 
<input type="number" name="usia" min="1" max="100">  

<!-- Date --> 
<input type="date" name="tanggal">  

<!-- Color --> 
<input type="color" name="warna">  

<!-- File --> 
<input type="file" name="berkas">  

<!-- Checkbox --> 
<input type="checkbox" name="hobi" value="coding"> Coding 
<input type="checkbox" name="hobi" value="gaming"> Gaming  

<!-- Radio Button --> 
<input type="radio" name="jk" value="laki"> Laki-laki 
<input type="radio" name="jk" value="perempuan"> Perempuan             
            

Textarea dan Select

 
<!-- Textarea (Input teks panjang) --> 
<textarea name="alamat" rows="4" cols="50"></textarea>  

<!-- Dropdown Select --> 
<select name="kelas">     
    <option value="">Pilih Kelas</option>     
    <option value="10">Kelas 10</option>     
    <option value="11">Kelas 11</option>     
    <option value="12">Kelas 12</option> 
</select>  

<!-- Select dengan optgroup --> 
<select name="jurusan">     
    <optgroup label="IPA">         
        <option>IPA 1</option>         
        <option>IPA 2</option>     
    </optgroup>     
    <optgroup label="IPS">         
        <option>IPS 1</option>         
        <option>IPS 2</option>     
    </optgroup> 
</select>             
            

Validasi Form

 
<!-- Required (Wajib diisi) --> 
<input type="text" required>  

<!-- Panjang minimum --> 
<input type="text" minlength="3">  

<!-- Panjang maksimum --> 
<input type="text" maxlength="50">  

<!-- Pattern (Regex) --> 
<input type="tel" pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}"        
       placeholder="0812-3456-7890">             
            

📹 Video Tutorial Bagian 3:

🎨 Bagian 4: Pengenalan CSS

Apa itu CSS?

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan dan format halaman web. Dengan CSS, Anda dapat mengubah warna, font, layout, dan lainnya.

3 Cara Menambahkan CSS

 
<!-- 1. Inline CSS (langsung di tag) --> 
<p style="color: blue; font-size: 18px;">Teks biru</p>  

<!-- 2. Internal CSS (di dalam <head>) --> 
<style>     
p {         
    color: blue;         
    font-size: 18px;     
} 
</style>  

<!-- 3. External CSS (file terpisah) --> 
<link rel="stylesheet" href="style.css">             
            

Selector CSS

 
/* Element Selector - Semua tag p */ 
p {     
    color: blue; 
}  

/* Class Selector - titik (.) */ 
.container {     
    width: 80%; 
}  

/* ID Selector - pagar (#) */ 
#header {     
    background: #333; 
}  

/* Universal Selector - semua element */ 
* {     
    margin: 0;     
    padding: 0; 
}  

/* Descendant Selector */ 
div p {     
    color: red; 
}  

/* Grouping Selector */ 
h1, h2, h3 {     
    font-family: Arial; 
}             
            

Properti CSS Penting

 
/* Warna dan Background */ 
.box {     
    color: #333;           /* Warna teks */     
    background: #fff;       /* Warna latar */     
    background-image: url('gambar.jpg');     
    opacity: 0.8;         /* Transparansi */ 
}  

/* Typography */ 
.text {     
    font-family: Arial, sans-serif;     
    font-size: 16px;     
    font-weight: bold;     
    line-height: 1.5;     
    text-align: center;     
    text-decoration: none;     
    text-transform: uppercase; 
}  

/* Box Model */ 
.box {     
    margin: 20px;         /* Jarak luar */     
    padding: 15px;        /* Jarak dalam */     
    border: 1px solid #333;     
    width: 200px;     
    height: 100px; 
}             
            

📹 Video Tutorial Bagian 4:

✨ Bagian 5: CSS Lanjutan

Position

 
/* Static - posisi default */ 
.kotak1 { position: static; }  

/* Relative - posisi relatif dari posisi normal */ 
.kotak2 {      
    position: relative;      
    top: 20px;     
    left: 10px; 
}  

/* Absolute - posisi relatif terhadap parent */ 
.kotak3 {      
    position: absolute;      
    top: 0;     
    right: 0; 
}  

/* Fixed - posisi tetap di layar */ 
.navbar {      
    position: fixed;      
    top: 0;     
    width: 100%; 
}  

/* Sticky - sticky navigation */ 
.header {      
    position: sticky;      
    top: 0; 
}             
            

Display

 
/* Block - element memenuhi lebar */ 
div, p, h1 { display: block; }  

/* Inline - element sebaris */ 
span, a, strong { display: inline; }  

/* Inline-block - mix dari block dan inline */ 
.tombol {      
    display: inline-block;     
    padding: 10px 20px; 
}  

/* None - sembunyikan element */ 
.sembunyi { display: none; }  

/* Flexbox - untuk layout */ 
.container {      
    display: flex;     
    justify-content: center;     
    align-items: center; 
}             
            

Z-Index dan Overflow

 
/* Z-Index - mengatur urutan element bertumpuk */ 
.layer1 { z-index: 1; } 
.layer2 { z-index: 2; } 
.layer3 { z-index: 3; }  

/* Overflow - mengatur konten yang meluber */ 
.scroll { overflow: scroll; } 
.hidden { overflow: hidden; } 
.auto { overflow: auto; }             
            

Media Query (Responsif)

 
/* Mobile (max-width 768px) */ 
@media max-width: 768px {     
    .container {         
        width: 100%;     
    }     
    .sidebar {         
        display: none;     
    } 
}  

/* Tablet (769px - 1024px) */ 
@media min-width: 769px and max-width: 1024px {     
    .container {         
        width: 90%;     
    } 
}  

/* Desktop (min-width 1025px) */ 
@media min-width: 1025px {     
    .container {         
        width: 80%;     
    } 
}             
            

📹 Video Tutorial Bagian 5:

📐 Bagian 6: Flexbox & Grid

Flexbox Container

 
.flex-container {     
    display: flex;          /* Main Axis */     
    flex-direction: row;        /* row | column */     
    justify-content: center;    /* start | end | center | space-between */     
    gap: 20px;                /* Jarak antar item */          
    /* Cross Axis */     
    align-items: center;      /* start | end | center | stretch */     
    flex-wrap: wrap;          /* wrap | nowrap */ 
}             
            

Flex Item

 
.flex-item {     
    /* Grow, Shrink, Basis */     
    flex: 1 0 200px;          
    /* Order */     
    order: 2;              /* Urutan tampil */          
    /* Align self */     
    align-self: center;      /* center | start | end */ 
}             
            

CSS Grid

 
.grid-container {     
    display: grid;          
    /* Kolom dan Baris */     
    grid-template-columns: 1fr 1fr 1fr;  /* 3 kolom */     
    grid-template-rows: auto 1fr auto;     
    gap: 20px;          
    /* Template Areas */     
    grid-template-areas:          
        "header header header"         
        "sidebar main main"         
        "footer footer footer"; 
}  

/* Grid Item dengan Areas */ 
.header { grid-area: header; } 
.sidebar { grid-area: sidebar; } 
.main { grid-area: main; } 
.footer { grid-area: footer; }             
            

Contoh Layout Website

 
/* Layout: Header - Main - Sidebar - Footer */ 
.layout {     
    display: grid;     
    grid-template-columns: 250px 1fr;     
    grid-template-rows: auto 1fr auto;     
    min-height: 100vh;     
    grid-template-areas:          
        "header header"         
        "sidebar main"         
        "footer footer"; 
}  

@media max-width: 768px {     
    .layout {         
        grid-template-columns: 1fr;         
        grid-template-areas:              
            "header"             
            "main"             
            "sidebar"             
            "footer";     
    } 
}             
            

📹 Video Tutorial Bagian 6:

🎬 Bagian 7: Animasi dan Transisi

Transisi CSS

 
.kotak {     
    width: 100px;     
    height: 100px;     
    background: blue;          
    /* Transition: property duration timing-function */     
    transition: all 0.3s ease; 
}  

.kotak:hover {     
    width: 200px;     
    background: red;     
    transform: rotate(45deg); 
}  

/* Timing Functions */ 
/* ease - Mulai lambat, cepat, akhir lambat */ 
/* linear - Kecepatan tetap */ 
/* ease-in - Mulai lambat, akhir cepat */ 
/* ease-out - Mulai cepat, akhir lambat */ 
/* ease-in-out - Mulai dan akhir lambat */             
            

Transform

 
.translate { transform: translate(50px, 100px); } 
.rotate { transform: rotate(45deg); } 
.scale { transform: scale(1.5); } 
.skew { transform: skewX(20deg); } 
.matrix { transform: matrix(1, 0, 0, 1, 0, 0); }  

/* Kombinasi */ 
.kombinasi {     
    transform: translate(50px, 50px) rotate(45deg) scale(1.2); 
}  

/* 3D Transform */ 
.rotate3d {     
    transform: rotateX(45deg);     
    transform: rotateY(45deg);     
    transform: rotateZ(45deg); 
}             
            

Keyframe Animation

 
/* Mendefinisikan animasi */ 
@keyframes fadeIn {     
    from { opacity: 0; }     
    to { opacity: 1; } 
}  

@keyframes slideIn {     
    from {         
        transform: translateX(-100%);     
    }     
    to {         
        transform: translateX(0);     
    } 
}  

@keyframes pulse {     
    0%, 100% { transform: scale(1); }     
    50% { transform: scale(1.1); } 
}  

/* Menggunakan animasi */ 
.animasi-fade {     
    animation: fadeIn 1s ease-in-out; 
}  

.animasi-slide {     
    animation: slideIn 0.5s forwards;     
    animation-delay: 0.5s; 
}  

.animasi-pulse {     
    animation: pulse 2s infinite; 
}             
            

📹 Video Tutorial Bagian 7:

🚀 Bagian 8: Proyek Website

💡 Ide Proyek Website

Portofolio Pribadi - Tampilkan karya dan skill
Website Sekolah - Profil dan informasi sekolah
Blog Pribadi - Tulis artikel dan cerita
Landing Page Produk - Promosi produk/jasa
Dashboard Admin - Panel pengelolaan data

Contoh: Website Portfolio Sederhana

 
<!DOCTYPE html> 
<html lang="id"> 
<head>     
    <meta charset="UTF-8">     
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Portfolio Saya</title>     
    <link rel="stylesheet" href="style.css"> 
</head> 
<body>     
    <header>         
        <nav>             
            <div class="logo">Portofolio</div>             
            <ul>                 
                <li><a href="#home">Home</a></li>                 
                <li><a href="#about">Tentang</a></li>                 
                <li><a href="#projects">Proyek</a></li>                 
                <li><a href="#contact">Kontak</a></li>             
            </ul>         
        </nav>     
    </header>          
    
    <section id="home">         
        <h1>Halo, Saya [Nama]</h1>         
        <p>Web Developer & Designer</p>     
    </section>          
    
    <section id="about">         
        <h2>Tentang Saya</h2>         
        <p>...</p>     
    </section>          
    
    <section id="projects">         
        <h2>Proyek Saya</h2>         
        <div class="project-grid">             
            <div class="project-card">Proyek 1</div>             
            <div class="project-card">Proyek 2</div>             
            <div class="project-card">Proyek 3</div>         
        </div>     
    </section>          
    
    <footer>         
        <p>&copy; 2026 Portofolio Saya</p>     
    </footer> 
</body> 
</html>             
            

📦 Bagian 9: Bootstrap Framework

Apa itu Bootstrap?

Bootstrap adalah framework CSS paling populer untuk membuat website responsif dan mobile-first. Bootstrap menyediakan komponen UI siap pakai seperti navbar, card, modal, dan lain-lain.

Mengapa Menggunakan Bootstrap?

🎨 Mudah Digunakan - Tidak perlu menulis CSS dari nol
📱 Responsif Otomatis - Tampilan menyesuaikan device
🧩 Komponen Lengkap - Navbar, carousel, modal, dll
🌐 Dukungan Browser - Kompatibel dengan semua browser modern

Cara Menggunakan Bootstrap

 
<!-- Menggunakan CDN (Tanpa Download) --> 
<head>     
    <meta charset="UTF-8">     
    <meta name="viewport" content="width=device-width, initial-scale=1.0">     
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> 
</head> 
<body>     
    <!-- Konten Bootstrap di sini -->     
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> 
</body>             
            

Sistem Grid Bootstrap

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

<!-- col-12: semua device, col-md-6: tablet, col-lg-4: desktop -->             
            

Komponen Bootstrap Populer

 
<!-- Navbar --> 
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">     
    <div class="container">         
        <a class="navbar-brand" href="#">Logo</a>         
        <button class="navbar-toggler" type="button">             
            <span class="navbar-toggler-icon"></span>         
        </button>     
    </div> 
</nav>  

<!-- Card --> 
<div class="card" style="width: 18rem;">     
    <img src="gambar.jpg" class="card-img-top" alt="...">     
    <div class="card-body">         
        <h5 class="card-title">Judul Kartu</h5>         
        <p class="card-text">Deskripsi kartu</p>         
        <a href="#" class="btn btn-primary">Baca Selengkapnya</a>     
    </div> 
</div>  

<!-- Button --> 
<button class="btn btn-primary">Primary</button> 
<button class="btn btn-secondary">Secondary</button> 
<button class="btn btn-success">Success</button> 
<button class="btn btn-danger"> Danger</button> 
<button class="btn btn-warning">Warning</button> 
<button class="btn btn-info">Info</button>             
            

Bootstrap Utilities

 
<!-- Margin dan Padding --> 
<div class="m-3 p-3">Margin 3 & Padding 3</div> 
<div class="mt-3 mb-3 ms-3 me-3">Margin top, bottom, left, right</div>  

<!-- Text Utilities --> 
<p class="text-start">Rata Kiri</p> 
<p class="text-center">Rata Tengah</p> 
<p class="text-end">Rata Kanan</p> 
<p class="text-primary">Teks Primary</p> 
<p class="text-white bg-dark">Teks Putih Background Gelap</p>  

<!-- Display --> 
<h1 class="display-1">Display 1</h1> 
<h1 class="display-2">Display 2</h1> 
<h1 class="display-3">Display 3</h1> 
<h1 class="display-4">Display 4</h1>             
            

📹 Video Tutorial Bootstrap:

🎀 Bagian 10: Sass/SCSS - CSS Preprocessor

Apa itu Sass?

Sass (Syntactically Awesome Style Sheets) adalah CSS preprocessor yang memperluas kemampuan CSS dengan fitur seperti variabel, nesting, mixins, dan inheritance. Sass membantu menulis CSS yang lebih modular dan mudah dikelola.

Mengapa Menggunakan Sass?

📦 Variabel - Simpan nilai untuk digunakan kembali
🧩 Nesting - Tulis selector bersarang seperti HTML
🔄 Mixins - Kumpulan style yang bisa digunakan ulang
📊 Operator - Lakukan perhitungan matematika
🔨 Modular - Pisahkan file menjadi bagian-bagian kecil

Instalasi Sass

 
<!-- Install Sass via npm --> 
npm install -g sass  

<!-- Compile file sass ke css --> 
sass input.scss output.css  

<!-- Watch mode - auto compile saat ada perubahan --> 
sass --watch input.scss output.css  

<!-- Compile seluruh folder --> 
sass --watch styles/scss:styles/css             
            

Variabel Sass

 
// Definisikan variabel 
$primary-color: #3498db; 
$secondary-color: #2ecc71; 
$font-stack: 'Arial', sans-serif; 
$border-radius: 5px;  

// Gunakan variabel 
body {     
    font-family: $font-stack;     
    color: $primary-color; 
}  

.button {     
    background-color: $primary-color;     
    border-radius: $border-radius;     
    padding: 10px 20px; 
}  

.button-secondary {     
    background-color: $secondary-color;     
    border-radius: $border-radius; 
}             
            

Nesting (Bersarang)

 
// CSS Biasa 
nav ul {     
    margin: 0;     
    padding: 0;     
    list-style: none; 
}  

nav ul li {     
    display: inline-block; 
}  

nav ul li a {     
    text-decoration: none;     
    color: blue; 
}  

// Dengan Sass (Nesting) 
nav {     
    ul {         
        margin: 0;         
        padding: 0;         
        list-style: none;                  
        li {             
            display: inline-block;                          
            a {                 
                text-decoration: none;                 
                color: blue;                                  
                &:hover {                     
                    color: red;                 
                }             
            }         
        }     
    } 
}             
            

Mixins

 
// Definisikan mixin 
@mixin flex-center {     
    display: flex;     
    justify-content: center;     
    align-items: center; 
}  

@mixin button-style($color) {     
    background-color: $color;     
    color: white;     
    padding: 10px 20px;     
    border: none;     
    border-radius: 5px;     
    cursor: pointer;          
    &:hover {         
        background-color: darken($color, 10%);     
    } 
}  

// Gunakan mixin 
.container {     
    @include flex-center; 
}  

.btn-primary {     
    @include button-style(#3498db); 
}  

.btn-danger {     
    @include button-style(#e74c3c); 
}             
            

Extend/Inheritance

 
// Base button style 
%button-base {     
    padding: 10px 20px;     
    border: none;     
    border-radius: 5px;     
    cursor: pointer;     
    font-size: 16px; 
}  

// Extend base style 
.button-primary {     
    @extend %button-base;     
    background-color: #3498db;     
    color: white; 
}  

.button-secondary {     
    @extend %button-base;     
    background-color: #95a5a6;     
    color: white; 
}  

.button-outline {     
    @extend %button-base;     
    background-color: transparent;     
    border: 2px solid #3498db;     
    color: #3498db; 
}             
            

Operator Matematika

 
.container {     
    width: 100%; 
}  

.sidebar {     
    width: 300px; 
}  

.content {     
    width: 600px - 300px;  // Hasil: 300px     
    // Atau menggunakan operator     
    width: calc(100% - 300px); 
}  

// Contoh dengan operator 
$grid-columns: 12; 
$grid-gutter: 20px;  

.col-6 {     
    width: (100% / 2); 
}  

.col-4 {     
    width: (100% / 3); 
}  

.col-3 {     
    width: (100% / 4); 
}             
            

📹 Video Tutorial Sass:

📱 Bagian 11: Responsive Design Lanjutan

Apa itu Responsive Design?

Responsive Design adalah pendekatan desain web yang memastikan tampilan website optimal di berbagai ukuran layar, mulai dari smartphone hingga desktop.

Strategi Responsive Design

📐 Mobile-First - Desain dari ukuran terkecil dulu
🔄 Fluid Layout - Gunakan persentase, bukan fixed pixel
🖼️ Responsive Images - Gambar menyesuaikan ukuran layar
📊 Media Queries - Atur style berdasarkan kondisi tertentu

Breakpoints yang Direkomendasikan

 
/* Extra small devices (phones) */ 
@media max-width: 575px {     
    .container { width: 100%; } 
}  

/* Small devices (landscape phones) */ 
@media min-width: 576px and max-width: 767px {     
    .container { width: 540px; } 
}  

/* Medium devices (tablets) */ 
@media min-width: 768px and max-width: 991px {     
    .container { width: 720px; } 
}  

/* Large devices (desktops) */ 
@media min-width: 992px and max-width: 1199px {     
    .container { width: 960px; } 
}  

/* Extra large devices (large desktops) */ 
@media min-width: 1200px {     
    .container { width: 1140px; } 
}             
            

Responsive Navigation

 
/* Default - Mobile */ 
.nav-menu {     
    display: none;     
    flex-direction: column;     
    width: 100%;     
    position: absolute;     
    top: 60px;     
    left: 0; 
}  

.nav-menu.active {     
    display: flex; 
}  

.hamburger {     
    display: block; 
}  

/* Desktop - min-width 768px */ 
@media min-width: 768px {     
    .nav-menu {         
        display: flex;         
        flex-direction: row;         
        position: static;         
        width: auto;     
    }          
    .hamburger {         
        display: none;     
    } 
}             
            

Responsive Images

 
/* Responsive Image Dasar */ 
img {     
    max-width: 100%;     
    height: auto; 
}  

/* Picture Element - Multiple Sources */ 
<picture>     
    <source media="(min-width: 1200px)" srcset="large.jpg">     
    <source media="(min-width: 768px)" srcset="medium.jpg">     
    <img src="small.jpg" alt="Responsive Image"> 
</picture>  

/* Srcset - Resolution Switching */ 
<img      
    src="small.jpg"     
    srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"     
    sizes="(max-width: 600px) 100vw, 50vw"     
    alt="Responsive" 
>             
            

Responsive Typography

 
/* Fluid Typography dengan clamp() */ 
h1 {     
    font-size: clamp(1.5rem, 5vw, 3rem);     
    line-height: 1.2; 
}  

p {     
    font-size: clamp(1rem, 2vw, 1.25rem); 
}  

/* Viewport Units */ 
.hero {     
    height: 100vh;     
    width: 100vw; 
}  

.section-padding {     
    padding: 5vh 5vw; 
}             
            

Responsive Grid System

 
.grid {     
    display: grid;     
    grid-template-columns: 1fr;     
    gap: 20px; 
}  

@media min-width: 576px {     
    .grid {         
        grid-template-columns: repeat(2, 1fr);     
    } 
}  

@media min-width: 992px {     
    .grid {         
        grid-template-columns: repeat(4, 1fr);     
    } 
}  

/* Auto-fit untuk responsive columns */ 
.auto-grid {     
    display: grid;     
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));     
    gap: 20px; 
}             
            

CSS Container Queries

 
/* Container Queries - Baru! */ 
.card-container {     
    container-type: inline-size; 
}  

.card {     
    display: flex;     
    flex-direction: column; 
}  

@container (min-width: 400px) {     
    .card {         
        flex-direction: row;     
    } 
}             
            

📹 Video Tutorial Responsive Design:

🔍 Bagian 12: SEO Dasar untuk Website

Apa itu SEO?

SEO (Search Engine Optimization) adalah teknik mengoptimalkan website agar muncul di posisi tinggi di hasil pencarian Google. SEO membantu meningkatkan traffic organik ke website Anda.

Mengapa SEO Penting?

🔎 Visibilitas - Website lebih mudah ditemukan
📈 Traffic - Tingkatkan kunjungan organik
💰 Biaya Efektif - Gratis dibanding iklan
⏰ Kredibilitas - Website di halaman pertama dipercaya lebih

On-Page SEO Elements

 
<!-- Title Tag - Sangat Penting! --> 
<head>     
    <title>Judul Halaman yang Optimasi SEO | Nama Website</title> 
</head>  

<!-- Meta Description --> 
<meta name="description" content="Deskripsi singkat tentang halaman ini. Include kata kunci utama. Panjang ideal 150-160 karakter.">  

<!-- Meta Keywords (tidak terlalu penting sekarang) --> 
<meta name="keywords" content="tutorial html, belajar css, pemrograman web">  

<!-- Canonical URL - Hindari konten duplikat --> 
<link rel="canonical" href="https://example.com/halaman-utama">  

<!-- Viewport untuk Mobile-Friendly --> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">             
            

Struktur Heading yang Benar

 
<!-- Hanya satu H1 per halaman --> 
<h1>Judul Utama Halaman (Menggunakan Kata Kunci)</h1>  

<h2>Sub Judul (Subtopik Utama)</h2> 
<h3>Sub-sub Judul (Detail)</h3> 
<h3>Sub-sub Judul Lainnya</h3> 
<h4>Detail Lebih Spesifik</h4>  

<!-- Contoh Struktur Blog Post --> 
<article>     
    <h1>Cara Belajar Pemrograman untuk Pemula</h1>     
    <p class="lead">Artikel lengkap tentang...</p>          
    
    <h2>1. Mengapa Belajar Pemrograman?</h2>     
    <h3>1.1 Benefits of Programming</h3>          
    
    <h2>2. Cara Memulai</h2>     
    <h3>2.1 Pilih Bahasa Pemrograman</h3>     
    <h3>2.2 Ikut Kursus Online</h3> 
</article>             
            

Optimasi Gambar untuk SEO

 
<!-- Alt Text yang Deskriptif --> 
<img src="gambar-laptop-coding.jpg"        
       alt="Seseorang sedang belajar coding dengan laptop di cafe"       
       width="800"       
       height="600" 
>  

<!-- Lazy Loading - Loading lebih cepat --> 
<img src="gambar.jpg" alt="Deskripsi" loading="lazy">  

<!-- Responsive Images dengan srcset --> 
<img      
    src="small.jpg"     
    srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"     
    sizes="(max-width: 600px) 100vw, 50vw"     
    alt="Contoh gambar responsif" 
>  

<!-- Nama File yang Deskriptif --> 
❌ img_001.jpg 
✅ cara-belajar-html-untuk-pemula.jpg             
            

Internal Linking

 
<!-- Link ke halaman lain dengan anchor text yang relevan --> 
<a href="/tutorial-css" title="Tutorial CSS Lengkap">     
    Pelajari juga tutorial CSS kami 
</a>  

<!-- Breadcrumb Navigation --> 
<nav aria-label="breadcrumb">     
    <ol class="breadcrumb">         
        <li class="breadcrumb-item"><a href="/">Home</a></li>         
        <li class="breadcrumb-item"><a href="/tutorial">Tutorial</a></li>         
        <li class="breadcrumb-item active">HTML</li>     
    </ol> 
</nav>             
            

Schema Markup (Structured Data)

 
<!-- JSON-LD untuk Organization --> 
<script type="application/ld+json"> 
{     
    "@context": "https://schema.org",     
    "@type": "Organization",     
    "name": "Nama Organisasi",     
    "url": "https://www.example.com",     
    "logo": "https://www.example.com/logo.png",     
    "contactPoint": {         
        "@type": "ContactPoint",         
        "telephone": "+62-123-4567",         
        "contactType": "Customer Service"     
    } 
} 
</script>  

<!-- JSON-LD untuk Article --> 
<script type="application/ld+json"> 
{     
    "@context": "https://schema.org",     
    "@type": "Article",     
    "headline": "Judul Artikel",     
    "image": "https://www.example.com/gambar.jpg",     
    "author": {         
        "@type": "Person",         
        "name": "Nama Penulis"     
    },     
    "datePublished": "2026-01-01",     
    "dateModified": "2026-01-15" 
} 
</script>             
            

SEO Checklist

 
✅ ON-PAGE SEO CHECKLIST:  
1. Title Tag 
   - Panjang 50-60 karakter 
   - Gunakan kata kunci di awal 
   - Unique untuk setiap halaman  
2. Meta Description 
   - Panjang 150-160 karakter 
   - Gunakan call-to-action 
   - Include kata kunci  
3. Heading Structure 
   - Satu H1 per halaman 
   - Gunakan H2-H6 secara berurut  
4. URL Structure 
   - Short & descriptive 
   - Gunakan hyphen sebagai separator 
   - Include kata kunci  
5. Image Optimization 
   - Alt text untuk semua gambar 
   - Kompres ukuran file 
   - Gunakan lazy loading  
6. Mobile-Friendly 
   - Responsive design 
   - Test dengan Google Mobile-Friendly Test  
7. Page Speed 
   - Optimize images 
   - Minify CSS/JS 
   - Use CDN             
            

📹 Video Tutorial SEO: