Beranda / PROJECT EDITING TAMPLATE CSS

PROJECT EDITING TAMPLATE CSS

admin novi Posting Komentar

📘 Panduan Membuat Project CSS

🎯 Tujuan

Peserta didik dapat mengunduh, mengedit, dan memodifikasi file template website menggunakan CSS untuk memahami cara kerja styling pada halaman web.

📝 Langkah-langkah

1. Kunjungi Link Template

  • Buka browser (Google Chrome/Mozilla/Edge).

  • Akses link template yang sudah ditentukan

Silahkan download tamplate CSS pada Link di Bawah ini

TAMPLATE 1

TAMPLATE 2

2. Pilih dan Download Template

  • Cari template yang sesuai dengan keinginanmu (misalnya tema portfolio, bisnis, atau blog).

  • Klik tombol Download.

  • File template biasanya berbentuk .zip.

3. Ekstrak File Template

  • Buka folder Downloads.

  • Klik kanan pada file .zip lalu pilih Extract Here / Extract to [Nama Template].

  • Akan muncul folder berisi file HTML, CSS, JS, dan gambar pendukung.

  • Ganti nama folder dengan CSS_NAMA_KELAS ( Contoh: CSS_ARSYA_12TKJ23 )

4. Buka File dengan Code Editor

  • Gunakan aplikasi editor Notepad++

  • Buka folder template hasil ekstrak tadi.

  • File utama bernama index.html

5. Pahami Struktur File

  • index.html → halaman utama website.

  • /css/style.css → berisi kode CSS untuk desain.

  • /images/ → berisi gambar pendukung.

6. Edit File CSS

  • Buka file index.html di dalam folder kemudian mulai tahap editing.

  • Cobalah mengganti beberapa kode, misalnya:

    • Warna latar belakang (background-color).

    • Jenis font (font-family).

    • Ukuran teks (font-size).

    • Warna teks (color).

  • Silahkan edit file lainnya yang ingin di edit

7. Simpan dan Lihat Hasil

  • Setelah mengedit, tekan CTRL + S (Save).

  • Buka file index.html di browser.

  • Lihat perubahan desain yang sudah kamu buat.

8. Modifikasi Lebih Lanjut

  • Ganti gambar di folder images dengan gambarmu sendiri.

  • Ubah tata letak elemen dengan properti CSS (misalnya margin, padding, border).

  • Tambahkan efek hover pada tombol/menu.

9. Dokumentasikan Project

  • Simpan hasil editan dalam satu folder.

  • Buat catatan singkat perubahan yang sudah kamu lakukan (contoh: mengganti warna background, mengubah font, menambahkan hover).

📂 Hasil Akhir + Kumpulkan Project

Peserta didik memiliki website sederhana dengan tampilan CSS hasil modifikasi sendiri dari template yang sudah dipilih.

PROJECT KUMPULKAN PADA LINK INI



Posting Komentar untuk "PROJECT EDITING TAMPLATE CSS"