Java 9 - TechUP

Java 9

2 min

Në javën e 9-të, ne do të vazhdojmë të punojm Navigation dhe Footerin

Ushtrimi i javës

Le të rishikojmë detyrat që duhet të përmbushen këtë javë.

Vazhdoni me projektin ku keni mbetur. Sigurohuni që të keni përfunduar të gjitha detyrat nga java e 8-të përpara se të vazhdoni.
Përmirësoni strukturën dhe paraqitjen e faqes në internet. Kushtojini vëmendje elementeve të projektimit dhe sigurohuni që ato të zbatohen me saktësi.
Zbatoni funksionalitetin e kërkuar bazuar në specifikimet e projektit.
Personalizojeni dizajnin më tej për t'iu përshtatur projektit tuaj personal. Modifikoni tekstin, imazhet, ngjyrat dhe elementët e tjerë vizualë për t'u lidhur me markën dhe kërkesat e projektit tuaj.
Dizajnin mund ta gjeni këtu.

Ne foton e meposhtme eshte dizajni per Navigation si dhe kodin.

Kodi per Navigation

            
                 <div class="container mx-auto">
  <div class="py-6 items-center flex">
    <img src="./svg/logo.svg" alt="Logo" />
     <ul class="flex text-white mx-auto space-x-16 uppercase">
 		<li>Home</li>
        <li>About</li>
        <li>Menu</li>
        <li>Contact</li>
     </ul>
  </div>
 </div>

Ne foton e meposhtme eshte dizajni per Footer-in si dhe kodin.

Kodi per Footerin

            
                 <div class="container mx-auto">
	<div class="my-16">
        <div class="h-px w-full bg-orange-300"></div>
        <div class="flex justify-between pt-4">
            <p class="text-white">© 2023 Good Taste | All rights reserved.</p>
            <div class="flex space-x-3">
                <a href="https://www.facebook.com/">
                    <img src="./svg/facebook.svg" alt="facebook">
                </a>
                <a href="https://www.instagram.com/">
                    <img src="./svg/instagram.svg" alt="instagram">
                </a>
                <a href="https://www.tiktok.com/">
                    <img src="./svg/tiktok.svg" alt="tiktok">
                </a>
            </div>
        </div>
	</div>
</div>

Përgatitje për javën e 10-të

Për të kuptuar se si funksionon TailwindCSS, duhet të ushtroni me videot e mëposhtme dhe të krijoni dizajne të ndryshme:

From Zero to Production - Një listë me video të shkurta
Build a Modern Landing Page With Tailwind CSS - Një demonstrim i plotë dhe krijim i një faqeje moderne
Tailwind Crash Course | Project From Scratch - Një projekt tjetër interesant

Diskutimet