CSS singkatan dari Cascading Style Sheet. Dengan menggunakan css, kita bisa mengatur gaya dari halaman situs kita. Gaya disini mencakup seperti jenis font yang digunakan, warna, ukuran, posisinya, dan beberapa atribut lainnya. Nah, untuk mengenal lebih banyak mengenai apa saja sih yang bisa kita lakukan dengan css? Ada satu situs yang sangat menarik, yaitu CSS Zen Garden.Com. Situs ini mendemonstrasikan apa saja yang bisa dilakukan hanya dengan css.

Pada paragraf keduanya, kita bisa melihat contoh dari file HTML dan contoh dari file CSS yang digunakan oleh halaman ini. Kita coba download file HTML-nya. Dan bisa kita lihat disini bahwa struktur HTML-nya menggunakan elemen-elemen yang sudah kita pelajari pada tutorial sebelumnya ya, misalnya menggunakan heading, paragraf, link, dan pada bagian akhir halaman menggunakan list.

Situs ini menantang para kontributornya untuk mengembangkan css untuk file HTML ini, agar konten yang sama dapat ditampilkan dengan cara sekreatif mungkin. Dan dalam tantangan ini, kontributor hanya boleh mengubah file css saja. Tidak boleh mengubah file HTML-nya.

Pada sidebar kanan, kita bisa melihat beberapa contoh dari CSS yang terbaik. Misalkan kita klik Mid Century Modern. Sekarang kita bisa lihat bahwa tampilan dari halaman tersebut berubah total. Padahal konten atau file HTML-nya adalah sama persis ya. Jadi hanya dengan merubah css-nya saja, kita bisa merombak total tampilan layar sehingga tampilannya jauh lebih menarik.

Dan kita bisa coba lihat juga beberapa contoh lain dari sidebar. Semuanya menampilkan konten yang sama, namun menggunakan kreativitas yang unik, sehingga kita merasa seolah-olah kita sedang melihat situs yang berbeda.

Sebagai contoh berikutnya, kita coba buka salah satu situs portal berita besar Indonesia yaitu detik.com. Kita lihat disini tampilannya sudah rapi ya. Konten tersusun dengan baik dan gampang untuk dibaca. Selanjutnya saya akan hapus seluruh gaya dari css halaman ini.

Dan bisa kita lihat disini, pada saat halaman tidak memiliki css, maka yang kita lihat hanya HTML dengan menggunakan elemen-elemen yang telah kita pelajari dari materi kursus sebelumnya. Disini menggunakan Heading, lalu diikuti dengan list, image, dan link. Dan pada konten berikutnya juga kurang lebih menggunakan elemen-elemen yang sama ya.

Jadi disini kita bisa melihat bahwa dengan adanya css, maka browser dapat mengatur warna, posisi dan ukuran dari masing-masing konten, sehingga bisa lebih enak untuk kita baca.

Selanjutnya kita buka situs SkysenSolution.Com. Situs ini saya kembangkan sendiri dengan menerapkan ilmu yang saya ajarkan dalam kursus Front End Developer. Situs ini menggunakan framework CSS yang bernama Bootstrap, sehingga tampilannya sudah responsive. Responsive artinya halaman situs tetap nyaman untuk dibaca di tablet ataupun smartphone. Untuk mensimulasikan bagaimana situs ini dilihat di tablet, maka kita bisa mengecilkan ukuran jendela browser kita.

Kita bisa melihat bahwa tampilan konten menyesuaikan dengan ukuran jendela. Yang tadinya dibagi menjadi 4 kolom, sekarang menjadi 2 kolom. Setelah saya kecilkan lagi konten berubah menjadi 1 kolom. Dan satu hal yang paling penting ya, konten tetap nyaman untuk dibaca.

Pada saat kita mengembangkan satu proyek situs seperti ini, kita menggunakan satu css yang sama untuk seluruh halaman situs. Jadi bisa kita lihat disini, walaupun situs terdiri dari beberapa halaman, namun situs tetap konsisten menggunakan gaya yang sama. Dan apabila saya hendak mengubah salah satu style dari elemen situs, saya cukup mengubah di satu tempat, dan seluruh situs akan turut berubah.

Sebagai contoh, kita buka source code dari situs ini. Kita buka file css-nya. Kita cari elemen heading 4. Nah sekarang misalnya kita ganti warnanya menjadi merah. Warna asalnya saya simpan dulu di bagian komentar ya, lalu saya ubah menjadi red. Dan kita lihat hasilnya. Kita ubah dahulu URL browser menjadi localhost. Dan disini kita bisa lihat bahwa judul pada seluruh halaman sudah berubah menjadi berwarna merah. Kita bisa ganti lagi misalnya menjadi Yellow, dan seluruh halaman akan menggunakan judul berwarna Yellow.

Kalau tadinya di situs CssZenGarden.Com kita melihat bahwa satu file HTML yang sama bisa menggunakan beberapa file css yang berbeda, agar cara menampilkan kontennya berbeda. Di proyek SkysenSolution.Com kita melihat bahwa seluruh file HTML menggunakan satu file css yang sama, sehingga kita cukup mengganti salah satu style pada css, dan seluruh proyek akan mengikuti style tersebut. Ini adalah beberapa contoh dari cara menggunakan CSS.

Jadi nantinya apabila teman-teman sudah menguasai materi CSS dan Bootstrap, maka kalian sudah bisa membuat sendiri situs dengan tampilan seperti SkysenSolution.Com. Walaupun masih terbatas hanya tampilan saja ya, karena kita masih belum bisa mengambil dan menyimpan data ke server.

Untuk bisa mengembangkan secara lengkap seluruh proyek situs, kita masih harus mempelajari pemograman Back End. Dalam proyek SkysenSolution.Com, kita menggunakan bahasa pemograman PHP dan database MySQL. Nantinya bila kita sudah menguasai seluruh materi Front End Developer, dan ditambah dengan Back End Developer, maka kita otomatis menjadi Full Stack Developer.

Sebagai Full Stack Developer, kita bisa bekerja sendirian untuk membangun seluruh situs secara lengkap, baik bagian depan maupun belakangnya. Contoh nyatanya seperti saya sendiri, yang mengembangkan situs SkysenSolution.Com, tanpa bantuan dari programmer lain. Situs ini saya kembangkan untuk berbagi ilmu secara online, yang sekarang sedang popular dengan istilah online learning.

Mungkin teman-teman ada yang bertanya, Mengapa mesti membuat situs khusus? Mengapa tidak menggunakan YouTube saja?

Alasan pertama adalah karena YouTube tidak bisa memutar video saya secara berurutan. Jadi misalkan kalau kita lihat disini materi HTML Dasar saya ada 10 video, agar lebih mudah kita sebut nomornya saja ya satu sampai sepuluh. Apabila kita memutar videonya langsung di YouTube, bisa saja pengunjung memulainya langsung dari tengah, misalnya video nomor 5. Dan kemudian suggestion dari YouTube tidak melanjutkan ke video nomor 6, melainkan melanjutkan ke video lain secara acak, dan bisa saja suggestion malah merujuk ke video milik orang lain. Dengan adanya situs SkysenSolution.Com, maka kita bisa dengan mudah melihat daftar isi dari kursus, dan memilih video secara berurutan.

Alasan kedua adalah karena biasanya pada saat mengajar materi pemograman, biasanya murid lebih suka apabila source code bisa diunduh, agar bisa dipelajari lebih lanjut. Sayangnya YouTube tidak memiliki fitur untuk ini, dan saya tidak mau menggunakan jasa File Sharing gratisan dari situs lain karena sering menyebabkan broken link. Nantinya kalau video saya sudah banyak, saya akan repot memperbaiki broken link di banyak video. Jadi saya mengembangkan situs SkysenSolution.Com, dimana murid yang sudah terdaftar bisa langsung mengunduh source code dari materi pelajaran yang bersangkutan.

Oke, sebelumnya saya meminta maaf ya karena materi beberapa menit terakhir sudah out-of-topic karena seharusnya kita membahas mengenai CSS. Namun disini saya ingin memperlihatkan kepada teman-teman bahwa betapa menariknya apabila kita sudah menguasai seluruh pemograman Full-Stack. Kita sudah bisa mengembangkan satu proyek penuh, dan mengisinya dengan fitur apa pun yang kita butuhkan. Yang menjadi batasan hanyalah kemampuan kita. Oleh karena itu kita harus banyak belajar dan rajin berlatih.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.