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 'ee99c69bc7'
${ noResults }
Web-Dev-For-Beginners/translations/tl/3-terrarium/2-intro-to-css/assignment.md

2.9 KiB
Raw Blame History

CSS Refactoring Assignment

Layunin

I-refactor ang terrarium project upang gumamit ng Flexbox o CSS Grid para sa layout. I-update ang HTML at CSS kung kinakailangan upang makamit ang modernong, responsive na disenyo. Hindi mo kailangang mag-implement ng draggable elements—mag-focus lamang sa layout at styling.

Mga Instruksyon

  1. Gumawa ng bagong bersyon ng terrarium app. I-update ang markup at CSS upang gumamit ng Flexbox o CSS Grid para sa layout.
  2. Siguraduhing nasa tamang lugar ang art at mga elemento tulad ng sa orihinal na bersyon.
  3. Subukan ang iyong disenyo sa hindi bababa sa dalawang magkaibang browser (hal., Chrome, Firefox, Edge).
  4. Kumuha ng screenshots ng iyong terrarium sa bawat browser upang ipakita ang cross-browser compatibility.
  5. I-submit ang iyong updated na code at screenshots.

Rubric

Pamantayan Napakahusay Katamtaman Kailangan ng Pagpapabuti
Layout Ganap na na-refactor gamit ang Flexbox o CSS Grid; visually appealing at responsive Bahagyang na-refactor; may partial na paggamit ng Flexbox o Grid Kaunti o walang paggamit ng Flexbox o Grid; hindi binago ang layout
Cross-Browser May screenshots para sa maraming browser; consistent ang appearance Screenshots para sa isang browser; may kaunting inconsistencies Walang screenshots o may malalaking inconsistencies
Kalidad ng Code Malinis, maayos na HTML/CSS; malinaw ang mga komento Bahagyang maayos; kaunting komento Magulo ang code; walang komento

Mga Tips

  • Bisitahin ang Flexbox at CSS Grid na mga gabay.
  • Gamitin ang browser developer tools upang subukan ang responsiveness.
  • Maglagay ng komento sa iyong code para sa kalinawan.

Paunawa:
Ang dokumentong ito ay isinalin gamit ang AI translation service na Co-op Translator. Bagama't sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.