Jika kamu ingin membuat website yang attractive, maka menggunakan HTML saja tidak cukup. Hal ini bukan tanpa alasan, karena kamu juga perlu style sheet language seperti CSS untuk mengatur visual website agar lebih menarik, interaktif, dan membuat user merasa nyaman. Karena alasan itu, di artikel kali ini, kita akan Belajar CSS mulai dari Pengertian, fungsinya, dan beberapa tips yang harus kamu ketahui. Simak pembahasan berikut.
Table of contents [Show]
Pengertian CSS
Menurut W3.org, Cascading Style Sheets atau yang biasa disebut CSS adalah mekanisme sederhana untuk menambahkan atau mengatur gaya (misalnya, font, warna, spasi) ke halaman Web.
Bahasa awamnya, CSS merupakan kumpulan kode yang digunakan untuk mendesain tampilan HTML dengan tujuan untuk mempercantik halaman. Ibaratnya, jika kerangka, pondasi, dan tembok rumah adalah kerangkanya (HTML) maka cat, pintu, genteng, dan jendela adalah CSS-nya.
Dengan menggunakan CSS ini, kamu bisa mengatur warna, jenis font, gambar, dan background. Bukan hanya itu, CSS juga bisa digunakan untuk mengatur layout seperti mengubah satu kolom teks menjadi layout dengan konten utama dan sidebar untuk informasi terkait, atau memberikan berbagai macam efek seperti animasi misalnya.
Baca Juga: 5 Hal yang Perlu Kamu Ketahui Apa Itu Full Stack Developer
Kenapa harus belajar CSS?
”Kenapa kita perlu repot-repot belajar HTML dan CSS kalau sudah ada banyak template di WordPress yang siap pakai?” Risers di sini pasti ada yang berpikir begitu. Jawabannya adalah dengan mempelajari CSS, selain kamu memahami fundamental CSS yang nantinya akan berguna dalam hal desain, marketing, dll, kamu juga bisa mendesain situsmu sesuai dengan keinginanmu.
Tentunya kalau cuma mengambil template gratis maupun berbayar, pasti akan ada juga kan website lain yang mempunyai template yang sama dengan kita bukan? Maka dari itu, dengan mempelajari CSS, kita bisa memodifikasi template yang kita dapat dan menampilkannya sesuai dengan brand personality atau gayamu sendiri.
Dengan membuat situs yang “stand out from the others” akan membuat pelanggan tertarik dan mudah mengingat bagaimana kamu merepresentasikan websitemu. Karena pada akhirnya, situs yang menarik akan menghasilkan banyak uang.
CSS membuat tampilan depan situs web bersinar dan menciptakan pengalaman pengguna yang baik. Tanpa CSS, situs web akan kurang enak dipandang dan kemungkinan jauh lebih sulit untuk dinavigasi. Maka dari itu, penting untuk mempelajari CSS, baik bagi programmer pemula maupun untuk web developer.
Baca Juga: Berikut 7 Bahasa Pemrograman yang Harus Dikuasai Full Stack Developer
Tips belajar CSS
Berikut adalah tips untuk belajar CSS yang bisa kalian ikuti. Ingat ini bukanlah cheat-sheet melainkan cara memanfaatkan alat agar pekerjaan lebih produktif.
Pilih Code Editor yang nyaman
Ada berbagai macam code editor di luar sana dengan kelebihan dan kekurangannya masing-masing. Melansir dari softwaretestinghelp.com, berikut rangkuman fitur, kelebihan, dan kekurangannya:
Sublime Text
Fitur:
- Menyediakan peralihan instan antar proyek
- Dukungan lintas platform
- Dapat membuat indeks untuk class, method, dan function secara otomatis.
Kelebihan:
- Mudah digunakan untuk pemula
- Dapat memilih dan mengedit beberapa baris.
Kekurangan:
- Tidak ada package manager
- Opsi print tidak tersedia
Notepad++
Fitur:
- Mendukung perekaman dan pemutaran Makro
- Menyediakan bookmark, auto completion, dan syntax highlighting
- Mendukung Multi-View dan Tab interfaces untuk Multi-documents
Kelebihan
- Menyediakan opsi periksa ejaan
- Mudah digunakan oleh pemula
- Dukungan komunitas yang baik dari GitHub
Kekurangan:
- Pengeditan file jarak jauh tidak tersedia untuk HTTP, SSH, dan WebDAV
- Jika menggunakan Notepad++ di Mac, diharuskan menggunakan bantuan alat pihak ketiga
Vim
Fitur:
- Syntax highlighting
- Mendukung pengeditan file terkompresi
- Memberikan dukungan untuk interaksi mouse
- Cek ejaan
Kelebihan:
- Merekam makro
- Mendukung banyak bahasa pemrograman
- Ketersediaan fungsi pencarian dan penggantian
Kekurangan:
- Susah untuk dipelajari
- Fitur iDE terbatas
Visual Studio Code
Fitur:
- Syntax highlighting
- Penyelesaian otomatis tipe variable, definisi fungsi, dan modul yang diimpor
- Debugging dengan breakpoint, call stack, dan konsol interaktif
- VSC dapat diperluas dan disesuaikan dengan pengguna
Kelebihan:
- Ringan dan tidak memakan banyak RAM
Kekurangan:
- Terkadang sistem berjalan lambat di Linux
Manfaatkan keyboard shortcut yang tersedia
Setiap kali kamu melakukan suatu tindakan, entah itu menyimpan, me-refresh, mengganti windows, atau hal lain, kamu akan bisa melakukan semua itu menjadi lebih cepat dan efisien dengan menghafal shortcut-nya.
Berikut adalah beberapa shortcut yang dapat meningkatkan produktivitas:
- Save: Ctrl + S
- Refresh: Ctrl + R
- New Tab: Ctrl + T
- Close tab: Ctrl + W
- Open a file: Ctrl + O
- Copy text: Ctrl + C
- Cut text: Ctrl + X
- Redo text: Ctrl + Y
- Undo text: Ctrl + Z
- Show Problems Panel: Ctrl + Shift + M
- Go to the next error: F8
- Go to previous error: Shift + F8
- Find and replace text: Ctrl + H
- Dan masih banyak lainnya
Memang membutuhkan waktu untuk menghafal dan mengimplementasikan shortcuts tersebut dalam workflow kalian, tetapi jika kalian sudah menguasainya, maka akan sangat terasa manfaatnya.
Buat akun GitHub
GitHub merupakan sebuah website yang digunakan untuk mengelola kode sebuah proyek dan menyimpannya. Jadi dengan menggunakan Github, kamu bisa mengupload codinganmu ke server GitHub dan melakukan coding secara online.
Proyek yang telah kamu unggah ini, nantinya juga dapat dikembangkan atau diperbaiki lagi oleh programmer lain di seluruh dunia. Oleh karena itu, GitHub seringkali disebut sebagai “Instagramnya Programmer” atau media sosialnya para developer.
Jadi apa untungnya membuat akun GitHub? Yang pertama adalah GitHub memudahkan para programmer untuk saling membantu satu sama lain dengan cara memperbaiki maupun menyempurnakan proyek yang diupload ke GitHub.
Yang kedua, GitHub memungkinkan untuk mengerjakan proyek secara bersama-sama meski berjauhan secara fisik karena GitHub sendiri digunakan secara online. Terakhir, GitHub bisa kamu jadikan sebagai tempat untuk menunjukkan hasil kerjamu, misalnya membuat portofolio. Dengan begitu, recruiter akan lebih mudah melihat hasil kerjamu sehingga kamu lebih mudah mendapatkan tawaran pekerjaan.
Pelajari fundamentalnya
Dalam struktrus CSS, ada tiga bagian penting yang terdiri dari selector, property, dan value. Jika kita perhatikan pada gambar di atas, property dan value-nya dibatasi oleh kurung kurawal. Kemudian setelah property ada titik dua (:) dan di akhir value diakhiri dengan titik koma (;). Jadi itu adalah syntax yang harus kalian tulis untuk membuat satu deklarasi dari CSS.
Sekarang kita bahas mengenai masing-masing komponen yang ada dalam deklarasi tersebut.
- Selector
Digunakan untuk memilih dan memanipulasi elemen spesifik pada HTML. Elemen yang dipilih berdasarkan tag, id, atau class.
- Property
Ini digunakan untuk memberikan style pada selector yang telah ditentukan. Misalnya, color, font-family, margin, padding, dan lainnya.
- Value
Value sendiri merupakan nilai dari property yang mana pasangannya sudah ditentukan. Kita tidak bisa sembarangan memberikan value pada setiap property tersebut. Contoh: width: 800px; margin:auto; background-color: white, dll.
Ikuti Bootcamp
Sudah belajar sendiri tapi masih kesulitan dan bingung ngga punya mentor? Tenang saja Risers, Harisenin Millenial School solusinya. Dengan mengikuti bootcamp Full Stack Developer, kamu akan belajar semua materi FSD yang diperlukan selama 3 bulan.
Setelah lulus, kamu juga akan mendapat pendampingan cari kerja juga. Jadi tidak perlu repot mencari ke sana-sini lagi. Pastinya dengan bimbingan mentor handal dan berpengalaman, kamu akan menjadi Rockstar Developer!
Yuk, langsung saja daftarkan dirimu di sini.
Penutup
Demikian tips belajar CSS dari Harisenin kali ini. Selain memang mudah dipelajari, CSS bisa memberikan efek yang sangat besar bagi developer maupun WordPress developer. Salah satunya efeknya adalah dengan membuat website yang user-friendly, menarik, dan beda dari website lain.
Semoga artikel dari Harisenin kali ini bermanfaat untuk kalian yang sedang belajar CSS. Akhir kata, jangan lupa terus asah kemampuanmu dan tetap percaya pada prosesnya ya. Good Luck further Risers!Baca Juga: Mengenal React Native: Kelebihan dan Tutorial bagi Pemula
