msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '5fb78cc2d1'
${ noResults }
Web-Dev-For-Beginners/translations/id/3-terrarium/2-intro-to-css/assignment.md

2.9 KiB
Raw Blame History

Tugas Refactoring CSS

Tujuan

Refaktor proyek terrarium untuk menggunakan Flexbox atau CSS Grid sebagai tata letak. Perbarui HTML dan CSS sesuai kebutuhan untuk mencapai desain yang modern dan responsif. Anda tidak perlu mengimplementasikan elemen yang dapat diseret—fokus hanya pada tata letak dan gaya.

Instruksi

  1. Buat versi baru dari aplikasi terrarium. Perbarui markup dan CSS untuk menggunakan Flexbox atau CSS Grid sebagai tata letak.
  2. Pastikan seni dan elemen tetap ada seperti pada versi asli.
  3. Uji desain Anda di setidaknya dua browser berbeda (misalnya, Chrome, Firefox, Edge).
  4. Ambil tangkapan layar dari terrarium Anda di setiap browser untuk menunjukkan kompatibilitas lintas-browser.
  5. Kirimkan kode yang telah diperbarui dan tangkapan layar.

Rubrik

Kriteria Unggul Memadai Perlu Peningkatan
Tata Letak Sepenuhnya direfaktor menggunakan Flexbox atau CSS Grid; menarik secara visual dan responsif Beberapa elemen direfaktor; penggunaan Flexbox atau Grid sebagian Sedikit atau tidak ada penggunaan Flexbox atau Grid; tata letak tidak berubah
Lintas-Browser Tangkapan layar disediakan untuk beberapa browser; tampilan konsisten Tangkapan layar untuk satu browser; ketidakkonsistenan kecil Tidak ada tangkapan layar atau ketidakkonsistenan besar
Kualitas Kode HTML/CSS bersih, terorganisir dengan baik; komentar jelas Beberapa organisasi; sedikit komentar Kode tidak terorganisir; tidak ada komentar

Tips

  • Tinjau panduan Flexbox dan CSS Grid.
  • Gunakan alat pengembang browser untuk menguji responsivitas.
  • Berikan komentar pada kode Anda untuk kejelasan.

Penafian:
Dokumen ini telah diterjemahkan menggunakan layanan penerjemahan AI Co-op Translator. Meskipun kami berupaya untuk memberikan hasil yang akurat, harap diketahui bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang otoritatif. Untuk informasi yang bersifat kritis, disarankan menggunakan jasa penerjemahan manusia profesional. Kami tidak bertanggung jawab atas kesalahpahaman atau penafsiran yang keliru yang timbul dari penggunaan terjemahan ini.