CSS (Cascading Style Sheets) adalah bahasa stylesheet yang digunakan untuk mengontrol tampilan dan format halaman web. Dalam tutorial ini, kita akan memulai perjalanan dalam dunia desain web dengan memahami konsep dasar CSS.

## 1. Apa Itu CSS

**CSS** merupakan singkatan dari Cascading Style Sheets. Ini adalah bahasa yang digunakan untuk menggambarkan presentasi dari dokumen yang ditulis dalam HTML atau XML. Dengan CSS, Anda dapat mengubah warna, font, tata letak, dan aspek visual lainnya dari elemen HTML.

## 2. Menambahkan CSS ke HTML

Anda dapat menambahkan CSS ke dalam dokumen HTML menggunakan 3 cara yaitu:
1. **Inline CSS:** Menambahkan gaya langsung ke elemen HTML.
    ```html
    <p style="color: blue;">Ini adalah paragraf dengan warna biru.</p>
    ```

2. **Internal CSS:** Menyertakan gaya di dalam tag `<style>` di bagian `<head>` dokumen.
    ```html
    <head>
      <style>
        p {
          color: green;
        }
      </style>
    </head>
    <body>
      <p>Ini adalah paragraf dengan warna hijau.</p>
    </body>
    ```

3. **External CSS:** Menyertakan file CSS eksternal.
    ```html
    
    /* style.css */
    p {
      color: red;
    }

    
    <head>
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <p>Ini adalah paragraf dengan warna merah.</p>
    </body>
    ```

## 3. Perbedaan HTML dan CSS

HTML (Hypertext Markup Language) dan CSS memiliki peran yang berbeda dalam pengembangan web:
- **HTML** digunakan untuk membuat struktur dan konten halaman web.
- **CSS** digunakan untuk mengontrol tata letak dan tampilan visual elemen HTML.

**Gambaran perbedaan HTML & CSS:**

![gambaran.png](https://res.cloudinary.com/developerpemula/image/upload/v1701142729/developerpemula/assets/gambaran_jrpddq.png)

jika **HTML** adalah kerangka bangunan sebuah rumah, maka **CSS** adalah cat dan dekorasi yang membuat rumah itu terlihat indah dan sesuai dengan gaya Anda.

Dengan memahami perbedaan ini, Anda dapat memanfaatkan kekuatan kedua teknologi ini untuk membuat halaman web yang menarik dan terstruktur.

Oke mungkin, sampai disini dulu tutorial ini.. Semoga dapat dipahami dengan mudah.
Jangan lupa untuk menjaga diri Anda tetap up-to-date dengan perkembangan terbaru dalam CSS dan teknologi web lainnya. Dunia web terus berkembang, dan dengan tetap belajar, Anda akan selalu siap mengikuti perkembangan tersebut. 
Selamat belajar!

Pelajari konsep dasar CSS, cara menambahkan CSS ke HTML, dan perbedaan antara HTML dan CSS. Tutorial pengenalan untuk memulai perjalanan Anda dalam desain web dengan CSS.

Belajar CSS untuk Pemula: Pengenalan CSS

Pada bagian ini, kita akan membahas penggunaan selektor CSS, yang merupakan kunci untuk memilih elemen HTML dan menerapkan gaya pada halaman web.

## 1. Pengenalan Selektor CSS

Sebelum masuk ke selektor css, kita harus tau dulu cara **Deklarasi CSS** dimana aturan yang mendefinisikan tampilan elemen yang dipilih oleh selector. Setiap deklarasi terdiri dari property dan nilai, yang dipisahkan oleh titik dua dan diakhiri dengan titik koma.

**Gambaran deklarasi css:**

![gambarancss.png](https://res.cloudinary.com/developerpemula/image/upload/v1701142571/developerpemula/assets/deklarasi-css_bmck5k.png)


Oke sekarang kita kembali ke Selektor. **Selektor CSS** adalah pola atau aturan yang digunakan untuk memilih elemen tertentu di dalam dokumen HTML. Dengan menggunakan selektor, kita dapat menentukan elemen atau kelompok elemen mana yang akan diubah tampilannya.

Contoh penggunaan selektor sederhana:
```css
/* Memilih semua elemen paragraf */
p {
  color: blue;
}
```

## 2. Selektor Kelas dan ID

1. Selektor Kelas: Digunakan untuk memilih elemen berdasarkan class yang diberikan. Selektor kelas dimulai dengan tanda titik (.) diawal

contoh:

    ```css
    /* Memilih elemen dengan class 'teks-merah' */
      .teks-merah {
        color: red;
       }
    ```
2. Selektor ID: Digunakan untuk memilih elemen berdasarkan ID yang diberikan. ID harus unik di dalam satu halaman. Selektor ID dimulai dengan tanda pagar (#) diawal

contoh:

    ```css
    /* Memilih elemen dengan ID 'header' */
      #header {
       background-color: gray;
      }
    ```

## 3. Selektor Elemen Bersarang

Selektor dapat bersarang untuk memilih elemen yang berada di dalam elemen lain. Misalnya, untuk memilih paragraf yang berada di dalam div:

    ```css
     /* Memilih paragraf di dalam div */
      div p {
       font-weight: bold;
      }
    ```

Dengan penggunaan selektor, Anda dapat memberikan gaya secara tepat pada elemen yang diinginkan dalam halaman web Anda.

Oke mungkin, sampai disini dulu tutorial ini.. Semoga dapat dipahami dengan mudah.
Jangan lupa untuk menjaga diri Anda tetap up-to-date dengan perkembangan terbaru dalam CSS dan teknologi web lainnya. Dunia web terus berkembang, dan dengan tetap belajar, Anda akan selalu siap mengikuti perkembangan tersebut. 
Selamat belajar!


Pelajari penggunaan selektor CSS untuk memilih dan menerapkan gaya pada elemen HTML. Tutorial pemula tentang bagaimana mengontrol tampilan halaman web dengan selektor CSS.

Belajar CSS untuk Pemula: Selektor CSS

## Belajar CSS untuk Pemula: Properti dan Nilai CSS

Dalam bagian ini, kita akan mempelajari berbagai properti dan nilai CSS yang dapat digunakan untuk mengubah tampilan elemen HTML. Mari kita lihat contoh-contoh praktisnya.

## 1. Properti Warna dan Font

### Mengubah Warna Teks
```html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
    .teks-merah {
      color: red;
     }
</style>
</head>
<body>

<p class="teks-merah">Ini adalah teks merah.</p>

</body>
</html>
```
Pada code tersebut kita menggunakan **internal css**, berikut outputnya:

![text-red.png](https://res.cloudinary.com/developerpemula/image/upload/v1701148411/developerpemula/assets/red_y1q0xt.png)

### Mengatur Warna Latar Belakang
```html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.latar-hijau {
  background-color: green;
  color: white;
}
</style>
</head>
<body>

<div class="latar-hijau">Ini adalah latar belakang hijau.</div>

</body>
</html>
```
Pada code tersebut kita menggunakan **internal css**, berikut outputnya:

![bg-green.png](https://res.cloudinary.com/developerpemula/image/upload/v1701148582/developerpemula/assets/bg_axo8fr.png)

### Mengubah Font
```html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.font-tebal {
  font-weight: bold;
}
</style>
</head>
<body>

<p class="font-tebal">Ini adalah teks tebal.</p>

</body>
</html>
```
Pada code tersebut kita menggunakan **internal css**, berikut outputnya:

![bold.png](https://res.cloudinary.com/developerpemula/image/upload/v1701148701/developerpemula/assets/bold_p9z40a.png)


## 2. Properti Ukuran dan Tata Letak

### Mengatur Ukuran Teks
```html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
    .ukuran-besar {
      font-size: 18px;
     }
</style>
</head>
<body>

<p class="ukuran-besar">Ini adalah teks ukuran besar.</p>

</body>
</html>
```
Pada code tersebut ukuran dari tag p akan menjadi sebesar **18px**.

### Menentukan Lebar dan Tinggi Elemen
```html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.kotak {
  width: 100px;
  height: 100px;
  background-color: yellow;
}
</style>
</head>
<body>

<div class="kotak">Ini adalah kotak dengan lebar 100px dan tinggi 100px.</div>

</body>
</html>
```
Pada code tersebut tag div lebar tingginya akan sebesar **100px**.

Dengan penggunaan properti dan nilai CSS, Anda dapat mengontrol dengan presisi tampilan elemen HTML di halaman web Anda. 

Oke mungkin, sampai disini dulu tutorial ini.. Semoga dapat dipahami dengan mudah.
Jangan lupa untuk menjaga diri Anda tetap up-to-date dengan perkembangan terbaru dalam CSS dan teknologi web lainnya. Dunia web terus berkembang, dan dengan tetap belajar, Anda akan selalu siap mengikuti perkembangan tersebut. 
Selamat belajar!


Pelajari properti dan nilai CSS untuk mengubah tampilan elemen HTML. Tutorial pemula dengan contoh HTML untuk memahami penggunaan properti CSS secara praktis.

Belajar CSS untuk Pemula: Properti dan Nilai CSS

Dalam pengembangan web dengan CSS, **Box Model** adalah konsep dasar yang menggambarkan cara setiap elemen HTML direpresentasikan sebagai sebuah kotak yang terdiri dari margin, border, padding, dan konten. Mari kita pelajari lebih lanjut.

## 1. Konsep Dasar Box Model

Setiap elemen HTML dapat dianggap sebagai sebuah kotak dengan empat bagian utama:
- **Content:** Bagian dalam kotak yang berisi konten sebenarnya.
- **Padding:** Ruang di antara konten dan border.
- **Border:** Garis pembatas antara padding dan margin.
- **Margin:** Ruang di sekeliling border, memisahkan elemen ini dari elemen lain di halaman.

**Berikut gambarannya:**

![Box Model](https://res.cloudinary.com/developerpemula/image/upload/c_scale,w_400/v1701150587/developerpemula/assets/box_lxfhtj.png)

## 2. Properti Margin

Properti **margin** digunakan untuk mengatur ruang di sekeliling elemen. Misalnya:
```html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.elemen {
  margin: 20px;
  border: 2px solid blue;
}
</style>
</head>
<body>

<div class="elemen">Ini adalah elemen dengan margin 20px.</div>

</body>
</html>
```

Berikut outputnya:

![Margin](https://res.cloudinary.com/developerpemula/image/upload/v1701151153/developerpemula/assets/margin_uzj0ih.png)

## 3. Properti Border
Properti border digunakan untuk menentukan gaya, lebar, dan warna border. Misalnya:

```html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.elemen {
  border: 3px solid red;
}
</style>
</head>
<body>

<div class="elemen">Ini adalah elemen dengan border 3px solid red.</div>

</body>
</html>
```
Berikut outputnya:

![Border](https://res.cloudinary.com/developerpemula/image/upload/v1701151160/developerpemula/assets/border_cx1bgx.png)

## 4. Properti Padding

Properti padding digunakan untuk mengatur ruang antara konten dan border. Misalnya:

```html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.elemen {
  padding: 15px;
  border: 1px dashed green;
}
</style>
</head>
<body>

<div class="elemen">Ini adalah elemen dengan padding 15px.</div>

</body>
</html>
```
Berikut outputnya:

![Padding](https://res.cloudinary.com/developerpemula/image/upload/v1701151431/developerpemula/assets/padding_z1fvcs.png)

Dengan memahami Box Model, Anda dapat mengelola dan mengatur layout halaman web dengan lebih efektif. 

Oke mungkin, sampai disini dulu tutorial ini.. Semoga dapat dipahami dengan mudah.
Jangan lupa untuk menjaga diri Anda tetap up-to-date dengan perkembangan terbaru dalam CSS dan teknologi web lainnya. Dunia web terus berkembang, dan dengan tetap belajar, Anda akan selalu siap mengikuti perkembangan tersebut. 
Selamat belajar!


Pahami konsep Box Model dalam CSS, termasuk margin, border, padding, dan content. Tutorial pemula dengan contoh praktis untuk mengontrol layout elemen HTML.

Belajar CSS untuk Pemula: Box Model

Pada bagian ini, kita akan mempelajari penggunaan **pseudo-classes** dan **pseudo-elements** dalam CSS untuk memberikan gaya pada elemen HTML secara spesifik.

## 1. Pseudo-classes

**Pseudo-classes** memungkinkan kita memilih dan memberikan gaya pada elemen berdasarkan keadaan atau kondisi spesifiknya. Berikut adalah beberapa contoh penggunaan pseudo-classes:

### Hover
```css
a:hover {
  color: red;
}
```
Pada code diatas ketika mouse diarahkan ke elemen/tag a maka akan berubah warna menjadi merah

### First-child
```css
li:first-child {
  font-weight: bold;
}
```
Pada code diatas untuk memberikan gaya pada elemen pertama di dalam parentnya.

### nth-child
```css
li:nth-child(odd) {
  background-color: lightgray;
}
```
Pada code diatas untuk memberikan gaya pada elemen ke-odd di dalam parentnya.

### 2. Pseudo-elements

**Pseudo-elements** memungkinkan kita memilih dan memberikan gaya pada bagian spesifik dari elemen. Berikut adalah beberapa contoh penggunaan pseudo-elements:

**Before**
```css
p::before {
  content: "→ ";
  color: blue;
}
```
CSS diatas untuk menambahkan konten sebelum isi sebenarnya dari elemen

**Before**
```css
p::after {
  content: " ←";
  color: green;
}
```
CSS diatas untuk menambahkan konten setelah isi sebenarnya dari elemen

## 3. Contoh Penggunaan
### Membuat Efek Tombol

```html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.tombol {
  background-color: #4caf50;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.tombol:hover {
  background-color: red;
}
</style>
</head>
<body>

<button class="tombol">Klik Saya</button>

</body>
</html>
```

**Berikut outputnya ketika mouse tidak menyentuh:**

![button](https://res.cloudinary.com/developerpemula/image/upload/v1701153613/developerpemula/assets/button_a50xut.png)

**Berikut outputnya ketika mouse menyentuh:**

![buttonred](https://res.cloudinary.com/developerpemula/image/upload/v1701153673/developerpemula/assets/buttonred_lflsbp.png)

Dengan penggunaan pseudo-classes dan pseudo-elements, Anda dapat memberikan gaya dengan lebih spesifik dan dinamis pada elemen-elemen dalam halaman web Anda. Teruslah eksplorasi untuk menciptakan desain yang lebih menarik dan interaktif.

Oke mungkin, sampai disini dulu tutorial ini.. Semoga dapat dipahami dengan mudah.
Jangan lupa untuk menjaga diri Anda tetap up-to-date dengan perkembangan terbaru dalam CSS dan teknologi web lainnya. Dunia web terus berkembang, dan dengan tetap belajar, Anda akan selalu siap mengikuti perkembangan tersebut. 
Selamat belajar!


Pahami penggunaan pseudo-classes dan pseudo-elements dalam CSS untuk memberikan gaya pada elemen HTML secara spesifik. Tutorial pemula dengan contoh praktis dan penjelasan mendalam.

Belajar CSS untuk Pemula: Pseudo-classes dan Pseudo-elements

## Belajar CSS untuk Pemula: Grid

**Grid** adalah model tata letak CSS yang memungkinkan pembuatan tata letak halaman web dengan struktur grid yang responsif dan efisien.

## 1. Konsep Dasar Grid
- **Container Grid:** Elemen yang berfungsi sebagai wadah untuk elemen-elemen grid.
- **Item Grid:** Elemen-elemen di dalam container grid yang diatur menggunakan properti grid.


## 2. Container dan Item
### Container Grid
```css
/* CSS */
.container-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
```
### Item Grid
```css
/* CSS */
.item-grid {
  grid-column: span 2; /* Menempati 2 kolom */
}
```

## 3. Properti Grid

Beberapa properti utama Grid:

  1. grid-template-columns dan grid-template-rows: Menentukan jumlah dan lebar kolom atau baris.
  2. grid-gap: Menentukan jarak antara item-grid.
  3. grid-column dan grid-row: Menentukan posisi kolom atau baris yang ditempati oleh item-grid.

## 4. Contoh Penggunaan

**Membuat Tata Letak Grid Sederhana**
```html
<!DOCTYPE html>
<html>
<head>
<title>Dev Pemula</title>

<style>
.container-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
</style>
</head>
<body>

<div class="container-grid">
  <div class="item-grid">Item 1</div>
  <div class="item-grid">Item 2</div>
  <div class="item-grid">Item 3</div>
  <div class="item-grid">Item 4</div>
  <div class="item-grid">Item 5</div>
  <div class="item-grid">Item 6</div>
</div>

</body>
</html>
```

**Berikut outputnya:**

![grid](https://res.cloudinary.com/developerpemula/image/upload/v1701187193/developerpemula/assets/grid_fuchkw.png)

Dengan Grid, Anda dapat merancang tata letak halaman web dengan struktur grid yang responsif dan efisien. Teruslah belajar untuk memanfaatkan fitur-fitur Grid dan meningkatkan kemampuan desain tata letak Anda.

Oke mungkin, sampai disini dulu tutorial ini.. Semoga dapat dipahami dengan mudah.
Jangan lupa untuk menjaga diri Anda tetap up-to-date dengan perkembangan terbaru dalam CSS dan teknologi web lainnya. Dunia web terus berkembang, dan dengan tetap belajar, Anda akan selalu siap mengikuti perkembangan tersebut. 
Selamat belajar!


Pahami konsep dan penggunaan Grid dalam CSS untuk membuat tata letak halaman web dengan struktur grid yang responsif dan efisien. Tutorial pemula dengan contoh penggunaan Grid.

Belajar CSS untuk Pemula: Grid

## Belajar CSS untuk Pemula: Transisi dan Animasi CSS

**Transisi** dan **Animasi** CSS adalah cara yang efektif untuk memberikan efek visual yang menarik pada elemen-elemen dalam halaman web Anda.

## 1. Pengenalan Transisi CSS
Transisi CSS memungkinkan Anda mengubah nilai properti dari satu keadaan ke keadaan lainnya dengan lembut, sehingga menciptakan perubahan yang halus.

## 2. Penggunaan Transisi

```css
/* CSS */
.transisi-elemen {
  transition: width 0.3s ease-in-out;
}

.transisi-elemen:hover {
  width: 200px;
}
```
## 3. Pengenalan Animasi CSS

Animasi CSS memberikan kendali yang lebih besar terhadap perubahan properti dengan memberikan lebih banyak kontrol, termasuk kecepatan dan iterasi animasi.

### Penggunaan Animasi

```css
/* CSS */
@keyframes animasi-geser {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(200px);
  }
}

.animasi-elemen {
  animation: animasi-geser 2s ease-in-out infinite alternate;
}
```

## 4. Contoh Penggunaan

**Menganimasikan Perubahan Warna**
```html
<!DOCTYPE html>
<html>
<head>
<title>Dev Pemula</title>

<style>
.animasi-warna {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: background-color 0.5s ease-in-out;
}

.animasi-warna:hover {
  background-color: red;
}
</style>
</head>
<body>
<div class="animasi-warna"></div>
</body>
</html>
```
Dari code diatas saat kursor menyentuh tag div akan berganti warna menjadi merah dengan efek transisinya.

Dengan transisi dan animasi CSS, Anda dapat menambahkan elemen visual yang menarik dan dinamis pada halaman web Anda. Teruslah belajar untuk meningkatkan keterampilan desain dan interaktivitas halaman web.

Oke mungkin, sampai disini dulu tutorial ini.. Semoga dapat dipahami dengan mudah.
Jangan lupa untuk menjaga diri Anda tetap up-to-date dengan perkembangan terbaru dalam CSS dan teknologi web lainnya. Dunia web terus berkembang, dan dengan tetap belajar, Anda akan selalu siap mengikuti perkembangan tersebut. 
Selamat belajar!


Pelajari cara menggunakan transisi dan animasi CSS untuk memberikan efek visual yang menarik pada elemen-elemen dalam halaman web. Tutorial pemula dengan contoh penggunaan transisi dan animasi CSS.

Belajar CSS untuk Pemula: Transisi dan Animasi CSS


## 1. Pengenalan Responsif Web Design

**Responsif Web Design** adalah konsep desain web yang memastikan bahwa halaman web dapat menyesuaikan diri dengan baik di berbagai perangkat dan ukuran layar, termasuk desktop, tablet, dan ponsel. Hal ini diperlukan untuk memberikan pengalaman pengguna yang optimal, terutama dengan semakin banyaknya orang yang mengakses web melalui perangkat seluler.

## 1. Pengenalan Transisi CSS
Transisi CSS memungkinkan Anda mengubah nilai properti dari satu keadaan ke keadaan lainnya dengan lembut, sehingga menciptakan perubahan yang halus.

## 2. Media Queries

Media queries adalah alat utama dalam responsif web design. Mereka memungkinkan kita mengatur gaya CSS berdasarkan karakteristik perangkat dan layar yang digunakan oleh pengguna. Misalnya, kita dapat mengubah ukuran font atau mengatur tata letak kolom berdasarkan lebar layar.

### Contoh Penggunaan Media Queries

```css
/* CSS */
@media screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
}
```
## 3. Fleksibilitas dan Ukuran Font

Untuk mencapai responsif web design, penting untuk menggunakan unit fleksibel seperti **persentase** dan **em** daripada unit yang kaku seperti piksel. Ini memungkinkan elemen-elemen untuk menyesuaikan ukuran mereka berdasarkan elemen tetangga atau ukuran font root.

### Contoh Penggunaan Persentase dan Em

```css
/* CSS */
.container {
  width: 80%;
  font-size: 1.2em;
}
```

## 4. Tata Letak Responsif

Menggunakan teknik tata letak responsif, seperti Flexbox dan Grid, memungkinkan kita untuk menyusun elemen-elemen dengan cara yang responsif terhadap perubahan ukuran layar.

### Contoh Penggunaan Persentase dan Em

```css
/* CSS */
.container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: 100%;
  margin: 10px;
  box-sizing: border-box;
}

@media screen and (min-width: 600px) {
  .box {
    width: 48%;
  }
}
```

## 5. Contoh Implementasi Responsif

Dengan semua konsep di atas, mari terapkan responsif web design kalian dapat mencobanya pada code berikut, dan coba kecilkan browser kalian.

```html
<!DOCTYPE html>
<html>
<head>
<title>Dev Pemula</title>

<style>
.responsive-layout {
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: 100%;
  margin: 10px;
  box-sizing: border-box;
}

@media screen and (min-width: 600px) {
  .box {
    width: 48%;
  }
}
</style>
</head>
<body>
<div class="responsive-layout">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>
</body>
</html>

```

Dengan responsif web design, Anda dapat menciptakan pengalaman pengguna yang lebih baik dan menjangkau audiens yang lebih luas. Teruslah belajar dan eksperimen dengan teknik responsif web design untuk meningkatkan keterampilan desain Anda.


Oke mungkin, sampai disini dulu tutorial ini.. Semoga dapat dipahami dengan mudah.
Jangan lupa untuk menjaga diri Anda tetap up-to-date dengan perkembangan terbaru dalam CSS dan teknologi web lainnya. Dunia web terus berkembang, dan dengan tetap belajar, Anda akan selalu siap mengikuti perkembangan tersebut. 
Selamat belajar!


Pelajari cara mendesain halaman web yang responsif dengan menggunakan CSS. Mulai dari pengenalan responsif web design, penggunaan media queries, fleksibilitas dan ukuran font, hingga contoh implementasi responsif.

developer<PEMULA/>

developer<PEMULA/>

Tutorial CSS3

8 Artikel 📖

1. Belajar CSS untuk Pemula: Pengenalan CSS

2. Belajar CSS untuk Pemula: Selektor CSS

3. Belajar CSS untuk Pemula: Properti dan Nilai CSS

4. Belajar CSS untuk Pemula: Box Model

5. Belajar CSS untuk Pemula: Pseudo-classes dan Pseudo-elements

6. Belajar CSS untuk Pemula: Grid

7. Belajar CSS untuk Pemula: Transisi dan Animasi CSS

8. Belajar CSS untuk Pemula: Responsif Web Design