Seznamte se s kočkami

Čas na další projekt! Tento miniprojekt využije poslední dvě lekce: atributy, odkazy, obrázky, strukturu stránky a tabulky, a k tomu všechno, co jste se naučili před nimi. Stejně jako v prvním miniprojektu pokyny říkají, co má stránka dělat, a jak ji napíšete, je na vás: kontroly se dívají na hotovou stránku, ne na váš kód.

Projekt. Útulek Šťastná tlapka se stará o kočky, které hledají nový domov, a jeho webová stránka potřebuje vylepšit. V editoru je její první verze: nadpis, úvod a tři kočky, každá se jménem a pár slovy o ní. Ve třech cvičeních kočkám přidáte obrázky, doplníte návštěvní hodiny do tabulky a nakonec dáte stránce strukturu a navigaci. Na pozadí jsme přidali trochu CSS, které obrázky zmenší a tabulce přidá okraje.

Úkol. Každá kočka dostane svůj obrázek, hned pod svým jménem. Obrázky jsou na našem webu na těchto adresách:

• Zrzka: /learn/tailwind/cat-orange.svg
• Stín: /learn/tailwind/cat-black.svg
• Sněhurka: /learn/tailwind/cat-white.svg

Ne každý, kdo stránku navštíví, obrázky vidí, a tak každý z nich popište pár slovy.

Na stránce jsou obrázky malé. Návštěvník, který si chce kočku prohlédnout pořádně, klikne na její obrázek a ten se otevře v plné velikosti v nové záložce, aby stránka útulku zůstala otevřená v té první.