Animal Trading cards

45. Dizaynni takrorlash

Mashq: Dizaynni takrorlash

Quyidagi ish maydonida videoda ko‘rsatilgan "tic-tac-toe" doska dizaynini qayta yaratishga harakat qiling. Bundan tashqari, ish maydonining pastki qismida rasmning nusxasi mavjud.

Buning uchun "CSS" qoidalarini tictactoe.css fayliga qo‘shing. "HTML" faylini tahrirlashingiz umuman hojat yo‘q!

46. Xulosa

Laboratoriya: Animal Trading Cards

HTML va CSS haqidagi bilimlaringizdan foydalanib, sevimli hayvoningiz tasvirlangan vebga asoslangan savdo kartasini yaratish.

1. Laboratoriya bilan tanishish

Boshlab olishingiz uchun nimalarni bilishingiz kerak?

To be successful in this Lab, you'll need to have skills in:

• 
  "HTML"ga doir bilim va ko‘nikmalar
  
  • 
    Elementga klass atributini qo‘shish
    
  • 
    Matn tarkibini o‘zgartirish
    
• 
  "CSS"ga doir bilim va ko‘nikmalar
  
  • 
    Chegara qo‘shish
    
  • 
    Ichki chegara(padding) qo‘shish
    
  • 
    Matnni kursiv ko‘rinishiga keltirish
    
  • 
    Ro‘yxat elementining ko‘rsatkichlarini o‘zgartirish
    

"Laboratoriya quyidagi fayllardan boshlanadi:

card.html clownfish.jpg design-prototype.jpg styles.css Sizning vazifangiz - ""design-prototype.jpg"" faylida ko‘rganlaringizni sinab ko‘rish va yangidan yaratish. Atributlarni qo‘shish va muayyan elementlarga stil berish uchun CSS selektorlardan foydalanish uchun ""card.html"" faylini o‘zgartirishingiz kerak bo‘ladi.

⚠️ Muhim ⚠️ Iltimos, ""card.html"" faylida mavjud id atributlarini olib tashlamang yoki o‘zgartirmang.

""card.html"" fayli ba’zi boshlang‘ich HTML bilan birga keladi. Ba’zi HTML elementlari allaqachon id atributlariga ega. Tekshirish kodi ushbu aniq elementlarda aniq identifikatorlarni talab qiladi, shuning uchun ularni olib tashlamang, aks holda tekshirish muvaffaqiyatsiz bo‘ladi.

🛠 Kerakli o‘zgartirishlar ⚙️ ""card.html"" fayliga quyidagi o‘zgarishlarni kiriting:

Sarlavhani sevimli hayvoningizning ismiga o‘zgartiring To‘ldiruvchi rasmni sevimli hayvoningizning surati bilan almashtiring.

Shuningdek, rasmning ""alt"" atributini hayvoningizning ismiga o‘zgartiring. Shunday qilib, alt = ""sizning hayvoningizning nomi"" sizning hayvoningizning haqiqiy nomi bilan almashtirilishi kerak.

Eslatma: 300 piksel kengligida rasmdan foydalanasiz. Agar sizning rasmingiz kattaroq bo‘lsa, CSS-da rasm kengligini 300 pikselga o‘rnatishingiz mumkin, ammo shuni yodda tutingki, sizning rasmingiz qisqarishi yoki buzilishi mumkin. Keyinchalik, moslashuvchan rasmlardan foydalanib, bu muammoni qanday hal qilish haqida gaplashamiz.

Qiziqarli fakt paragrafini tahrirlang

Asosiy xususiyatlarni tahrirlang Ma’lumot paragrafini tahrirlang 💃 Sahifaga stil bering 🕺 Dizayn prototipiga mos kelish uchun CSS ushbu uslublarni qo‘llashi kerak:

styles.css faylini HTMLga bog‘lang yoki aks holda CSS qo‘llanilmaydi. Qiziqarli faktlar id = ""card"" bilan

uchun ""animal-info"" CSS class qo‘shing. Hayvon haqida qiziqarli fakt matnini kursiv qiling Hayvonlar ro‘yxatidagi yorliqlarni qalin qilib belgilang (m-n, ""Habitat"") Hayvonlar ro‘yxatidagi bandlardan nuqtalarni olib tashlang Hayvonning nomi, tasviri va ma’lumotlari atrofida chegara qo‘shing hayvon to‘g‘risidagi ma’lumot atrofida chegara qo‘shing hayvonning nomi, tasviri va ma’lumotlari orasidagi bo‘sh joy qo‘shing (siz ""padding"" xusuiyatidan foydalanishingiz kerak bo‘ladi). ✅ Kodingizni sinab ko‘ring ❌ Laboratoriyadan o‘tish, ""card.html"" faylida dizayn-prototip.jpg kabi ko‘rinishga ega sahifani hosil qilish uchun yuqoridagi ko‘rsatmalarga rioya qiling.

Sizning qanchalik maqsadga yaqinligingizni ko‘rish uchun Ish maydonining pastki o‘ng qismida joylashgan ""RUN CODE"" tugmachasini bosing. Bu sizning kodingizda tekshiruvchini ishga tushiradi. Popup oyna paydo bo‘ladi va barcha sinovlardan o‘tadi. Agar biror narsa qilish kerak bo‘lsa, u ushbu oynada qizil rangda ko‘rinadi. Bundan tashqari, ""RUN CODE"" imkoniyatidan cheklanmagan sonda foydalanishingiz mumkin, shuning uchun undan o‘tguningizcha foydalanib turing! "