1 of 15

PEMROGRAMAN WEB – KELAS XI RPL

Framework CSS

& Template Website

Pengantar pengenalan framework CSS serta pemanfaatan template dalam pengembangan tampilan website

Konsentrasi Keahlian Rekayasa Perangkat Lunak (RPL)

Oleh Dwi Nuryani, S.Kom

2 of 15

Peta Konsep

Alur pembelajaran materi dari konsep dasar hingga praktik langsung

1

Pengenalan

Framework CSS

→

2

Jenis-jenis

Framework CSS

→

3

Instalasi &

Penggunaan Bootstrap

→

4

Grid System

& Komponen

5

Konsep

Template Website

→

6

Sumber &

Lisensi Template

→

7

Kustomisasi

Template

→

8

Praktikum:

Landing Page WEBSITE SEKOLAH

Framework CSS & Template Website | Pemrograman Web – XI RPL

2

3 of 15

BAB 1

Apa itu

Framework CSS?

Kumpulan kode CSS siap pakai

Framework CSS adalah kumpulan file CSS (dan terkadang JavaScript) yang sudah disusun sebelumnya, berisi kelas-kelas siap pakai untuk mengatur layout, tipografi, warna, tombol, formulir, dan berbagai komponen antarmuka lainnya.

“Diibaratkan sebagai kotak perkakas (toolbox) berisi komponen visual siap pakai yang tinggal dipasang ke dalam struktur HTML.”

Tanpa framework CSS, pengembang harus menulis seluruh kode tata letak, warna, dan komponen dari nol (from scratch) untuk setiap proyek.

Framework CSS & Template Website | Pemrograman Web – XI RPL

3

4 of 15

Mengapa Framework CSS Digunakan?

1

Lebih Cepat

Mempercepat proses pengembangan (development) tampilan website.

2

Konsisten

Menjamin konsistensi desain pada seluruh halaman.

3

Responsif

Menyediakan sistem grid untuk membuat layout responsif dengan mudah.

4

Didukung Komunitas

Komunitas besar sehingga dokumentasi dan referensi mudah ditemukan.

5

Cross-Browser

Kompatibel di berbagai browser karena telah diuji secara luas.

Framework CSS & Template Website | Pemrograman Web – XI RPL

4

5 of 15

Kelebihan dan Kekurangan

Framework CSS Murni (Vanilla) vs Framework CSS

Kelebihan

• Proses pengembangan lebih cepat

• Tampilan konsisten dan rapi

• Sudah teruji responsif di berbagai perangkat

• Dokumentasi dan komunitas luas

Kekurangan

• Ukuran file (bundle size) bisa besar jika tidak dioptimasi

• Tampilan cenderung mirip antar proyek jika tidak dikustomisasi

• Perlu waktu mempelajari dokumentasi dan aturan penamaan class

• Ketergantungan terhadap struktur/aturan framework tertentu

Framework CSS & Template Website | Pemrograman Web – XI RPL

5

6 of 15

Mengenal Berbagai Framework CSS

BAB 2 – Empat framework CSS populer dalam industri pengembangan web

B

Bootstrap

COMPONENT-BASED

Framework paling populer (Twitter). Grid 12 kolom, komponen siap pakai (navbar, card, modal).

T

Tailwind CSS

UTILITY-FIRST

Class-class kecil (flex, pt-4, text-center) dikombinasikan langsung pada elemen HTML.

B

Bulma

FLEXBOX, TANPA JS

Modern berbasis Flexbox, ringan, murni CSS, sintaks mudah dipahami pemula.

F

Foundation

COMPONENT-BASED

Dikembangkan ZURB, fleksibel, sering dipakai proyek enterprise/skala besar.

Framework CSS & Template Website | Pemrograman Web – XI RPL

6

7 of 15

Perbandingan Framework CSS

Framework

Basis

Kurva Belajar

Ciri Khas

Bootstrap

Component-based

Mudah

Komponen lengkap & siap pakai

Tailwind CSS

Utility-first

Sedang

Class kecil, sangat fleksibel

Bulma

Flexbox, tanpa JS

Mudah

Ringan & sintaks sederhana

Foundation

Component-based

Sulit

Fleksibel untuk proyek besar

Bootstrap dipilih sebagai fokus praktik pada materi ini karena paling umum digunakan di industri dan paling mudah dipelajari oleh pemula.

Framework CSS & Template Website | Pemrograman Web – XI RPL

7

8 of 15

Instalasi dan Penggunaan Bootstrap

BAB 3 – Dua cara memasang Bootstrap ke dalam proyek web

A. Melalui CDN

Cara termudah tanpa perlu mengunduh file — cukup tambahkan tautan CDN pada <head> dan sebelum </body>.

<link href="...bootstrap.min.css"� rel="stylesheet">��<script src="...bootstrap.bundle.min.js">�</script>

B. Instalasi Lokal

Bootstrap dapat diunduh dari situs resmi getbootstrap.com, atau diinstal melalui Node Package Manager (NPM):

npm install bootstrap

Cocok untuk proyek berskala besar yang memerlukan bundling, kustomisasi Sass, atau integrasi dengan build tool modern.

Framework CSS & Template Website | Pemrograman Web – XI RPL

8

9 of 15

Grid System & Komponen Bootstrap

Sistem Grid 12 Kolom

col-md-4

col-md-4

col-md-4

container → row → col-* | total kolom maksimal 12 per baris. Awalan col-, col-sm-, col-md-, col-lg-, col-xl- membuat layout responsif.

Komponen Umum

Navbar

Card

Button

Modal

Carousel

Form

Contoh: Komponen Card

<div class="card">� <img src="..." class=� "card-img-top">� <div class="card-body">� <h5 class="card-title">� Judul Kartu</h5>� <a class="btn btn-� primary">Detail</a>� </div>

</div>

Kelas Utility Populer

m-* / p-*

text-center

d-flex

bg-primary

fw-bold

container

Framework CSS & Template Website | Pemrograman Web – XI RPL

9

10 of 15

BAB 4

Template Website

Kerangka desain halaman web yang telah dibuat sebelumnya — terdiri atas struktur HTML, CSS, dan terkadang JavaScript — yang dapat digunakan kembali (reusable) dan dimodifikasi sesuai kebutuhan proyek. Template biasanya dibangun di atas framework CSS tertentu (misalnya Bootstrap) sehingga sudah responsif.

Manfaat Menggunakan Template

✓

Mempercepat proses desain awal (prototyping)

✓

Membantu pemula memahami struktur halaman yang baik

✓

Menghemat waktu — tidak perlu membangun dari nol

✓

Referensi praktik terbaik (best practice) tata letak

Struktur umum:

HTML + CSS + (JS)

Framework CSS & Template Website | Pemrograman Web – XI RPL

10

11 of 15

Sumber Template yang Legal

Perhatikan lisensi sebelum menggunakan template pada proyek

Start Bootstrap

startbootstrap.com

Template berbasis Bootstrap, gratis & open-source

BootstrapMade

bootstrapmade.com

Template gratis & premium berbasis Bootstrap

HTML5 UP

html5up.net

Template modern berbasis HTML/CSS murni

Tooplate

tooplate.com

Koleksi template gratis berbagai keperluan

Etika dan Lisensi

Setiap template memiliki ketentuan lisensi berbeda (misalnya MIT License atau Creative Commons). Sebelum digunakan pada proyek — apalagi proyek komersial — wajib membaca dan mematuhi ketentuan lisensi, termasuk mencantumkan kredit (attribution) kepada pembuat aslinya.

Framework CSS & Template Website | Pemrograman Web – XI RPL

11

12 of 15

Langkah Kustomisasi Template

Dari mengunduh template hingga siap dipublikasikan

1

Unduh template dari sumber terpercaya & sesuai lisensi

2

Ekstrak file, amati struktur folder (css/, js/, img/, index.html)

3

Buka index.html dengan code editor (mis. VS Code)

4

Ubah teks, logo, gambar, dan warna sesuai kebutuhan

5

Sesuaikan navigasi, tautan, dan formulir

6

Uji tampilan di berbagai ukuran layar (responsif)

7

Validasi & uji fungsi sebelum publikasi (hosting)

Tips

Struktur informasi harus jelas, tampilan responsif, dan konten sesuai identitas — bukan sekadar meniru contoh mentah-mentah.

Framework CSS & Template Website | Pemrograman Web – XI RPL

12

13 of 15

Rubrik Penilaian

Kelengkapan komponen

30%

Grid & responsivitas

25%

Kerapian & struktur kode

20%

Kreativitas & kustomisasi

15%

Ketepatan waktu

10%

Framework CSS & Template Website | Pemrograman Web – XI RPL

13

BAB 5 – PRAKTIKUM

Mengenal Studi Kasus Project

SMK Negeri 2 Karanganyar sedang mengembangkan Website Sistem Informasi Sekolah untuk diikutsertakan dalam Lomba Jagoan Hosting 2026. Berdasarkan ketentuan panitia lomba, website yang dibangun wajib mencakup 5 poin berikut, sekaligus dituntut dapat berjalan dengan lancar dan stabil (kuat di sisi front-end maupun back-end):

1

Landing Page Utama — Menampilkan profil sekolah, Lulusan Terbaik, Kerja Sama Industri, dan Prestasi.

2

Website PPDB — Sistem pendaftaran siswa baru secara online.

3

Promosi Produk Unggulan Sekolah (BLUD) — Etalase produk/jasa hasil unit produksi sekolah.

4

PKL & Career Center (BKK) — Informasi lowongan kerja, mitra industri, dan penyaluran lulusan.

5

AI Integrated Website (ChatBot) — Fitur chatbot berbasis AI untuk membantu pengunjung website.

14 of 15

Fokus Kerja — Unit 1

Peran peserta didik sebagai front-end developer pada tahap awal project

Target Unit 1

Website PPDB — Formulir Pendaftaran Siswa Baru

Pada Unit 1 ini, peserta didik berperan sebagai front-end developer yang bertugas membangun tampilan awal untuk poin ke-2, yaitu halaman “Formulir Pendaftaran Siswa Baru”, menggunakan HTML, CSS, dan JavaScript dasar.

Dipelajari pada unit berikutnya

Unit 2 & 3 — Backend (PHP) dan penyimpanan ke database agar website “berjalan dengan lancar dan stabil”.��Unit berikutnya — Poin lain: Landing Page, Promosi Produk BLUD, PKL & Career Center, serta ChatBot AI.

Peran: Front-End Developer

✓

Struktur halaman dengan HTML

✓

Tampilan & tata letak dengan CSS

✓

Validasi input dasar dengan JavaScript

✓

Formulir: nama, data siswa, dan berkas pendaftaran

Framework CSS & Template Website | Pemrograman Web – XI RPL

14

15 of 15

Rangkuman

1

Framework CSS adalah kumpulan kode CSS siap pakai yang mempercepat pembuatan tampilan website.

2

Framework populer: Bootstrap, Tailwind CSS, Bulma, dan Foundation — masing-masing punya karakteristik berbeda.

3

Bootstrap menggunakan sistem grid 12 kolom serta komponen siap pakai seperti navbar, card, dan button.

4

Template website adalah kerangka tampilan siap pakai yang dapat dikustomisasi, dengan tetap memperhatikan lisensi.

5

Kustomisasi dilakukan dengan mengubah konten, gambar, warna, dan struktur agar sesuai kebutuhan proyek.

Framework CSS & Template Website | Pemrograman Web – XI RPL

15