Apakah Anda ingin meningkatkan keterampilan pengembangan front-end Anda? Lihat saja 10 keterampilan CSS dasar ini yang akan mengubah Anda menjadi profesional dalam waktu singkat!

1) Memahami Model Kotak

Model kotak adalah dasar dari tata letak CSS. Ini terdiri dari empat bagian :

1. isi,
2. Lapisan,
3. Berbatasan,
4. Batas.

.box {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  padding: 20px;
  margin: 10px;
}

Pemilih CSS digunakan untuk menargetkan elemen HTML dan menerapkan gaya padanya. Mengetahui cara menggunakan pemilih dengan benar sangat penting untuk membuat halaman web yang dirancang dengan baik. Selektor umum meliputi:

• Kelas,
• Pengenal,
• pemilih elemen.

/* Class selector */
.button {
  background-color: blue;
  color: white;
}
/* ID selector */
#title {
  font-size: 24px;
}
/* Element selector */
p {
  line-height: 1.5;
}

body {
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 16px;
  font-weight: 400;
}

CSS menawarkan beberapa teknik tata letak, antara lain:

1. Mengapung ,
2. Kotak fleksibel ,
3. Kisi .

/* Float layout */
.left {
  float: left;
  width: 50%;
}
.right {
  float: right;
  width: 50%;
}
/* Flexbox layout */
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* Grid layout */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

Desain responsif adalah teknik yang digunakan untuk membuat halaman web yang menyesuaikan dengan ukuran layar yang berbeda . Gunakan kueri media dan unit responsif seperti emdan remuntuk mendapatkan desain yang responsif.

@media only screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

Animasi dapat membuat halaman web Anda lebih menarik dan interaktif. CSS menawarkan beberapa properti animasi, termasuk:

• transisi ,
• Transformasi ,
• Bingkai utama .

/* Transition animation */
.button {
  transition: background-color 0.5s ease;
}
.button:hover {
  background-color: red;
}
/* Transform animation */
.box {
  transform: rotate(45deg);
}
/* Keyframes animation */
@keyframes slide {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 100px;
  }
}
.box {
  animation: slide 1s ease infinite alternate;
}

:root {
  --primary-color: #007bff;
}
.button {
  background-color: var(--primary-color);
}

Peramban yang berbeda merender CSS secara berbeda, jadi penting untuk menguji laman web Anda di berbagai peramban untuk memastikan kompatibilitas lintas peramban .

/* Vendor prefixes */
.box {
  -webkit-box-shadow: 0px 0px 10px #000;
  box-shadow: 0px 0px

Preprosesor CSS seperti Sass dan Less memungkinkan Anda menulis kode CSS yang lebih efisien dan modular. Mereka menawarkan fitur seperti variabel , mixin , dan nesting .

/* Sass code */
$primary-color: #007bff;
.button {
  background-color: $primary-color;
}

Kerangka kerja CSS seperti Bootstrap dan Foundation menyediakan kode CSS yang telah ditulis sebelumnya untuk komponen UI umum seperti tombol, formulir, dan tabel. Mereka dapat menghemat waktu Anda dan meningkatkan konsistensi desain Anda.

<!-- Bootstrap example -->
<div class="container">
  <h1>My Website</h1>
  <p>Welcome to my website!</p>
  <button class="btn btn-primary">Get Started</button>
</div>

Selamat membuat kode!