Setelah berjam-jam berkutik dengan kode HTML, CSS, dan JS tanpa menghasilkan solusi, saya dapat menarik suatu kesimpulan. Kesimpulan tersebut terkait kesalahan yang sering dilakukan oleh Programmer Web Newbie (Pemula) saat memulai coding, yakni masalah ketidaktahuan.
Kebuntuan penulisan kode selama berjam-jam dapat dialami apabila programmer web tidak menyadari 5 fakta unik yang akan dibahas dalam tulisan ini. Fakta-fakta tersebut unik karena kadang susah untuk dijelaskan dengan kata-kata. Selain itu, fakta ini kadang hanya bisa difahami setelah membaca beberapa teori yang terpisah.
Untuk menjawab kegalauan tersebut dan untuk menghindari kebuntuan selama berjam-jam, programmer pemula perlu mengerti tentang 5 fakta berikut ini:
1. Pemisahan file HTML, CSS, JS
Pisahkan kode HTML dari kode style CSS dan script JS. Hal ini bermanfaat saat debug (pemeriksaan kode yang error). Kode yang terpisah akan mempermudah dan mempercepat anda mencari kesalahan yang mungkin ada.
Hindari membuat style dalam kode HTML maupun JS (beresiko memperumit struktur kode).
baca juga: https://www.w3.org/wiki/The_web_standards_model_-_HTML_CSS_and_JavaScript
2.Penggunaan CSS Reset
Kadang kita telah menggunakan kode syle yang benar. Namun demikian, tidak terjadi perubahan pada tampilan. Hal ini dikarenakan browser masih menyimpan cache style css anda. Gunakan CSS reset agar browser menghapus cache style saat direload/ refresh.
baca juga: http://html5doctor.com/html-5-reset-stylesheet/
3.Perbedaan id dan class dalam CSS
Kadang kita mencampuradukkan id dan class dalam mendesain halaman web. Hal ini sangat berbahaya jika kita tidak benar-benar memahaminya. Anda dapat menggunakan id yang bersifat global dan unik dalam kode css. Sebagai kebalikannya, fungsi class bersifat lokal dan tidak unik jika digunakan. Pencampuran penggunaan id dan class dapat membuat style halaman web tidak berubah jika programmer tidak paham betul.
baca juga: https://css-tricks.com/the-difference-between-id-and-class/
4. Karakteristik inline-block dan block
Programer pemula juga perlu memahami bahwa ada perbedaan karakteristik objek inline-block dan block. Secara sederhana, anda pasti faham dengan picture wrap pada program MS Word. Perbedaan tersebut hampir sama dengan perbedaan inline-block dan block. Inline-block terpengaruh dengan text align sedangkan block tidak terpengaruh. Ada perbedaan kode terkait perataan (align) suatu inline-block dengan block.
baca juga: https://www.impressivewebs.com/difference-block-inline-css/
5. Posisi absolute dan relative dari suatu block
Posisi mempengaruhi suatu block terkait penempatannya. Posisi absolute berarti mengacu kepada window browser (koordinat 0,0). Sedangkan posisi relatif berarti mengacu pada suatu objek lain dalam halawam web.
Apabila programmer tidak memberikan jenis posisi kepada suatu block, maka akan terjadi error tampilan. Error tersebut biasanya meliputi salah penempatan, pergeseran, padding, margin, background, dan lain-lain.
baca juga: https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Demikianlah kelima hal yang perlu diperhatikan sebelum anda menulis kode untuk web anda. Semoga bermanfaat.
Salam 🤠💡🍃✨🙏🏼
The Bhinneka Tunggal Ika 