7 Hal CSS Basic yang bisa membuatmu menjadi Fronted Master

Orang-orang memperlakukan pengembangan frontend seperti binatang mitos yang hanya bisa dijinakkan oleh sedikit orang. Orang yang menguasai frontend sangatlah sedikit karena saking sulitnya pengembangan frontend. Tapi kenyataannya, itu tidak sesulit yang anda dipikirkan. Anda hanya perlu menguasai beberapa hal ini dan anda akan menjadi Frontend Master dalam waktu singkat. Seperti kata pepatah terkenal:

Seorang master bukanlah seseorang yang berlatih 10.000 gerakan berbeda, dia adalah seseorang yang berlatih 1 gerakan 10.000 kali.

Tata letak menggunakan Flexbox & Grid

Perbedaan Flexbox dan Grid Layout

Flexbox dan Grid adalah dua alat CSS paling efektif yang dapat anda gunakan untuk membuat tata letak. Mungkin sedikit sulit pada awalnya, tetapi begitu anda menguasainya, itu akan menjadi alat yang sangat membantu untuk anda.

Menggunakan Media Queries untuk Perangkat yang Berbeda

Beda perangkat, berbeda juga tampilannya

Kita tidak pernah tahu perangkat yang akan digunakan pengunjung saat membuka situs web anda. Jadi, sangat penting untuk memastikan bahwa situs web anda terlihat responsif pada perangkat dari segala bentuk dan ukuran. Media Query memecahkan masalah tersebut dengan memungkinkan developer untuk menentukan style untuk setiap ukuran layar.

Memanfaatkan Pseudo-classes & Pseudo-elements

First Letter merupakan contoh dari Pseudo-elements

Pseudo-classes dan Pseudo-elements adalah CSS selector yang memungkinkan anda untuk memilih elemen ketika kondisi tertentu telah terpenuhi atau bagian tertentu dari suatu elemen. Ini dapat digunakan untuk menambahkan interaktivitas, spesifik desain dan lainnya. Seperti memperbarui style tombol saat diarahkan(hover) atau ditekan(press), memberikan style huruf pertama paragraf secara berbeda dan lain-lain.

Menambahkan Animasi

See the Pen Super Simple CSS Spinner by Thomas Mandelid (@mandelid) on CodePen.

Ingin membuat situs anda terihat lebih bagus dan menonjol? Animasi adalah alat yang hebat dan tepat untuk mencapai hal itu! Ini bisa sesederhana menambahkan transisi properti ke elemen yang digunakan dalam kombinasi dengan pseudo-classes atau sesuatu yang lebih kompleks seperti membuat animasi khusus menggunakan keyframes.

Shadow = Life

Perbedaan Dengan atau Tampa Bayangan

Shadow/banyangan adalah cara yang bagus untuk menambahkan kedalaman ke situs web anda sehingga elemen terlihat menonjol. CSS memungkinkan anda untuk menambahkan berbagai jenis bayangan, yaitu box-shadow, text-shadow, dan drop-shadow. Kita harus mengetahui dimana dan kapan waktu yang tepat untuk menggunakan bayangan pada elemen diwebsite. Tetapi warnanya tidak harus hitam.

Posisi Elemen

Jenis jenis posisi elemen

Cara memposisikan elemen sangat penting untuk pengembangan frontend. Dengan tidak mengetahui bagaimana posisi elemen static , relative , absolute , fixed , dan sticky, anda akan membatasi kemampuan anda secara drastis.

Mengatur border-radius

Properti border-radius ini memungkinkan pengembang untuk membuat UI yang tidak terlihat kaku. Ini adalah alat yang hebat untuk mengembangkan UX yang sangat profesional.