Dokumen ini membahas tentang pentingnya membuat panduan pembuatan front-end situs web sebelum memulai koding. Panduan ini bertujuan untuk menjaga konsistensi desain dan kode serta mempermudah pemeliharaan dan perbaikan di kemudian hari. Diberikan contoh panduan penamaan untuk HTML dan CSS seperti penggunaan tanda kutip, susunan atribut, dan penamaan class/id yang baik. Secara umum panduan ini digunakan untuk memudahkan pro

1. Pendahuluan
Eksperimen CSS
Kuliahkita - Georgius Rinaldo
dodo@kuliahkita.com

2. Pendahuluan
Jika Anda sudah pernah memrogram web, pasti Anda sudah tahu
mengenai istilah “front-end”.
Front-end adalah antarmuka dari sebuah web atau situs yang dibuat
sebagai sarana interaksi dengan pengguna.
Misal:
● Menampilkan data
● Memberi input
● dll

3. Komponen Front-End
Front-end ini sendiri dapat terdiri dari 3 bagian yaitu:
1. HTML - Pembangun halaman situs
2. CSS - Pemberi style atau cara menampilkan situs
3. Javascript - Biasa dipakai untuk mendefinisikan interaksi situs
Komponen yang wajib ada adalah HTML-CSS, sedangkan javascript
bisa opsional.

4. Panduan Pembuatan
Sebelum membuat front-end dari sebuah situs, ada baiknya membuat
panduan atau aturan terlebih dahulu.
Hal ini bertujuan untuk menjaga konsistensi desain dan kode yang
akan dibuat. Selain itu tentunya juga akan mempermudah proses
maintenance dan perbaikan jika ada.

5. Contoh Panduan HTML
1. Menggunakan kutip dua (“) bukan kutip satu (‘)
2. Susunan atribut adalah sebagai berikut
a. Class
b. Id
c. Attribute default
d. Attribute global
e. Data Attribute
3. Penamaan class dan id
a. Hanya boleh menggunakan alfanumerik, tanda
dash ‘-’, dan underscore ‘_’, dan diawali alfabet
b. Semua class harus lower case
c. Semua id harus camel case

6. Contoh Panduan HTML
Pada contoh di atas dilihat bahwa contoh yang buruk menggunakan
kutip satu dan penamaan yang terbalik antara id dan kelas.
Kemudian contoh pertama diperbaiki pada contoh kedua.
<!-- Contoh Penamaan HTML -->
<!-- Buruk -->
<a class=’kelasSaya’ id=’kelas-saya’ href=’...’></a>
<a class="kelasLainnya" id="kelas-lainnya" href="..."></a>
<!-- Baik -->
<a class="kelas-saya" id="kelasSaya" href="..."></a>
<a class="kelas-saya-yang-lainnya" id="kelasLainnya" href="..."></a>

7. Contoh Panduan CSS
1. Jangan memberi nilai z-index terlalu tinggi. Maksimal 50.
2. Gunakan indentasi yang baik (spasi dan newline)
3. Hindari penggunaan id dan !important dalam CSS karena memiliki
specificity yang tinggi.
o !important digunakan untuk override 3rd party CSS
4. JANGAN memberi style pada tag, gunakanlah kelas
5. dll

8. Panduan Umum
Dengan adanya panduan dan kesepakatan, tentunya akan lebih mudah
berkomunikasi dengan tim.
Selain itu, panduan ini digunakan untuk mempermudah proses dari
pembuatan atau pengembangan front-end.