Untuk menjadi seorang programmer, banyak hal yang perlu kamu pelajari. Apalagi ketika kamu memutuskan untuk menjadi front end developer. Tips menjadi seorang front end developer? Kamu harus memahami struktur CSS. Namun sebelumnya, apa itu front end developer? Apa hubungannya front end developer dan CSS? Seberapa penting CSS?
Front end developer mempunyai tugas untuk membangun interface dan experience yang optimal untuk pengunjung dari website atau aplikasi. Front end developer bertugas untuk membuat scripting atau kode untuk menterjemahkan bahasa desain dari UI/UX designer dan Website designer ke bahasa coding.
Seorang front end developer juga memiliki tugas lain untuk menghubungkan atau melakukan integrasi dari website atau aplikasi yang sudah dibuat dengan data yang disiapkan oleh backend developer. Kali ini, kita tidak membahas backend developer secara intim, tetapi kita akan membahas front end developer.
Menjadi Front End Developer
Jika kamu melihat dunia front end developer pada beberapa tahun terakhir, kamu akan sering mendengar terminologi yang belum pernah kamu dengar sebelumnya seperti ES6, jQuery, React, Redux, CSS, SQL, dan lainnya. Tetapi bahasa yang sering akan kita gunakan jika ingin menjadi front end developer di tahun ini adalah CSS.
Cascading Style Sheets atau yang sudah kita sebut dengan CSS tadi adalah bahasa program yang akan kamu gunakan untuk mempresentasikan file HTML yang sudah kamu buat sebelumnya. CSS berfungsi untuk mengatur layout website, warna, font, dan semua style lainnya. Secara singkat, CSS akan membantu kamu dalam mengatur visual.
Bahasa program HTML dan CSS ini adalah skill paling dasar yang wajib banget kamu miliki apabila kamu ingin menjadi seorang front end developer. Secara singkat, HTML dan CSS adalah pondasi dari sebuah website pada saat web development.
Mengenal Struktur CSS
Dalam bahasa CSS, kamu akan mengenal istilah rule set. Rule set dalam CSS terdiri dari selector, block declaration, property, dan value. Selector akan memberikan style pada HTML yang kamu mau. Block declaration adalah code yang berisi deklarasi. Setiap deklarasi yang ada memiliki property dan values.
Property adalah elemen yang akan kamu ubah sementara values adalah jawaban dari elemen yang ingin kamu ubah tadi. Dalam bahasa CSS, ada tiga cara menginsert CSS yaitu external CSS, Internal CSS, dan Inline CSS.
External CSS bisa mengubah tampilan website dengan satu file. External style sheet tidak bisa mengandung elemen HTML. kemudian ada internal CSS yaitu cara memasukan CSS melalui file di luar HTML. terakhir ada inline CSS yang menyisipkan bahasa CSS pada sebuah elemen yang kamu pilih pada HTML.
Kemudian kamu akan bertemu dengan CSS comment terlebih dahulu yang mempunyai fungsi untuk menjelaskan suatu code yang nantinya bisa kamu gunakan di kemudian hari atau orang lain. Font comment ini akan berwarna hijau secara otomatis. Tujuannya agar kamu bisa menandakan code yang sudah kamu buat dalam CSS.
Dalam CSS, kamu juga akan bertemu dengan CSS selector. CSS selector terdiri dari beberapa jenis yaitu ID selector yaitu selector yang menggunakan atribut id pada HTML untuk memilih elemen yang kamu mau. ID selector digunakan untuk memilih satu elemen unik pada HTML.
Kemudian ada Class Selector yang akan kamu gunakan untuk memilih elemen HTML dengan kelas atribut tertentu. Penggunaannya biasanya menulis karakter titik dan akan diikuti oleh nama kelas. Dan yang terakhir adalah grouping selector yang memilih semua elemen HTML secara kelompok dan mengubah stylenya secara bersamaan.