Workshop Day 2 Frontend

Guna CSS adalah?

• Membuat website interaktif

• Mendefinisikan konten apa saja yang ingin ditampilkan

• Styling elemen HTML yang sudah ditaruh

• Mengubah website menjadi webapp

.second-heading sebutannya adalah ... dan border adalah sebuah ...

• selector, property

• value, attribute

• value, property

• property, attribute

Jika kalian memiliki HTML seperti di gambar,

pilihan mana yang benar untuk mengubah ukuran tulisan dari tulisan "test" saja

• div a { font-size: 72px; }

• div p { font-size: 72px; }

• div { font-size: 72px; }

• p { font-size: 72px; }

property untuk mengubah warna dari tulisan adalah

• text-color

• color

• background-color

• col

Urutan box model pada gambar dari luar ke dalam adalah

• margin-border-padding-content

• border-padding-margin-content

• padding-margin-border-content

• content-border-margin-padding

Untuk mengubah button yang atas menjadi bawah, property apa yang harus ditambahkan?

• margin

• border

• padding

• display

Jika kamu mau membuat design dan markup seperti di gambar

dengan css yang di apply ke container sebagai berikut:

.container: { display: flex }

property apakah yang perlu ditambahkan untuk membuat 2 div anaknya berada di kedua ujung .container?

• justify-content: space-between

• justify-content: space-around

• align-items: center

• align-items: flex-start

Bagaimana cara membuat space antar div di anak .container menjadi 12px

dengan menambahkan 1 property di .container?

• gap: 12px;

• justify-content: space-around

• margin-top: 12px;

• padding: 12px 0;

Apa guna dari box-sizing: border-box?

• membuat width & height mengatur content, padding, dan border

  (dari border sampai content)

• membuat border menjadi 1px

• menambahkan padding untuk semua display

• membuat margin setiap content menjadi terlihat

Jika kamu memiliki .container dengan display: grid,

maka property apa yang harus kamu tambahkan di .container untuk membuat grid tersebut memiliki 3 column sama besar?

• grid-template-columns: 1fr 1fr 1fr

• column: 3

• grid: 3

• gap: 3