Laboratoriyasi

LABORATORIYA LABORATORIYASI

1. 
   KIRISH
   
2. 
   KO'RSATMALAR
   
3. 
   ISH MAYDONI
   
4. 
   KO'ZGU
   

DARSLARGA QAYTISH

1. 
   
   
2. 
   
   
3. 
   
   
4. 
   
   

Hayvonlarning savdo kartalari

Ko'rsatmalar

Laboratoriya quyidagi fayllardan boshlanadi:

• 
  card.html
  
• 
  clownfish.jpg
  
• 
  design-prototype.jpg
  
• 
  styles.css
  

Sizning vazifangiz - ko'rgan narsalarni qayta tiklash va sinash design-prototype.jpg. CSS- ni card.htmlqo'shish uchun o'zgartirish kerak attributesva selectorsma'lum elementlarni uslublash uchun.

⚠️ Muhim ⚠️

Iltimos, mavjud bo'lgan idatributlarni o'chirmang yoki o'zgartirmang card.html!

card.htmlFayl bir necha dastlabki HTML bilan keladi. Bir nechta HTML elementlari allaqachon idatributlarga ega. Tasdiqlash kodi talab bu aniq id, shuning uchun ularni olib tashlash emas yoki tasdiqlash barbod bo'ladi, bu aniq elementlar haqida.

🛠 Kerakli o'zgarishlar ⚙️

Ga quyidagi o'zgartirishlarni kiriting card.html

1. 
   Sarlavhani sevimli hayvoningiz nomiga o'zgartiring
   
2. 
   Joylashtiruvchi rasmni sevimli hayvon rasmingiz bilan almashtiring.
   

Shuningdek, rasmning altxususiyatini hayvoningiz nomiga o'zgartiring . Shunday qilib, alt="name-of-your-animal"sizning hayvoningizning haqiqiy nomi bilan almashtirilishi kerak.

Izoh: Siz width300 pikselli rasmdan foydalanishni xohlaysiz . Agar sizning rasmingiz kattaroq bo'lsa, siz CSS-da rasmning kengligini 300 pikselga o'rnatishingiz mumkin, ammo rasmingiz buzilib yoki buzilib ketishi mumkinligiga e'tibor bering. Keyinchalik, ushbu rasmni sezgir tasvirlar yordamida qanday hal qilish mumkinligi haqida gaplashamiz.

3. 
   Qiziqarli faktlar xatboshisini tahrirlash
   
4. 
   Asosiy xususiyatlarni tahrirlash
   
5. 
   Axborot xatboshisini tahrirlash
   

The Sahifani uslubi 🕺

CSS ushbu uslublarni dizayn prototipiga mos kelishi uchun qo'llashi kerak:

1. 
   O'zingizning jadvalingizni styles.cssHTML bilan bog'lang, aks holda sizning CSSingiz qo'llanilmaydi.
   
2. 
   qiziqarli faktlar karta uchun 
   bilan id="card", nomli CSS darslari qo'shishanimal-info
   
3. 
   hayvonning qiziq faktlari uchun matnni kursiv qilib yozing
   
4. 
   hayvonlarning ro'yxatiga oid yorliqlarni qalin qilib yozing (masalan, "Habitat")
   
5. 
   hayvonlarning ro'yxatidagi narsalardan nuqtalarni olib tashlang
   
6. 
   hayvon nomi, tasviri va ma'lumotlari atrofida chegara qo'shing
   
7. 
   hayvonning ma'lumotlari atrofida chegara qo'shing
   
8. 
   hayvonning ismi, tasviri va ma'lumotlari orasida bo'sh joy qo'shing (siz mulkni to'ldirishingiz kerak bo'ladi )
   

✅ Kodingizni sinab ko'ring ❌

Laboratoriya laboratoriyasidan o'tish uchun yuqoridagi ko'rsatmalarga amal qilib, card.htmlko'rilgan narsalarga o'xshash tarzda ishlashni boshlang design-prototype.jpg.

O'zingizning qanchalik yaqinligingizni sinab ko'rish uchun, ish joyining pastki o'ng qismida joylashgan "RUN CODE" tugmachasini bosing. Bu validatorni sizning kodingizga qarshi ishlaydi. Qalqib chiquvchi oyna paydo bo'ladi va barcha testlardan o'tadi. Agar biror narsa qilish kerak bo'lsa, u ochilgan oynada qizil rangda ko'rinadi. Shuningdek, "RUN CODE" funksiyasidan foydalanishingiz uchun cheklov yo'q, shuning uchun uni topshirguningizcha tekshirib ko'ring!

Omad!

BOSHLANG