Eksperimen CSS - 01 Pendahuluan
Download as PPTX, PDF1 like481 views
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
Eksperimen CSS - 01 Pendahuluan
- 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.