Java 4 - TechUP

Java 4

4 min

Pasi e kuptuam mirë dallimin dhe dobitë e HTML & CSS, tani ka ardhur koha të përdorim një teknologji tjetër që mundëson një mënyrë më të lehtë dhe më të shpejtë të dizajnimit të uebfaqeve. Bëhet fjalë për TailwindCSS që është një framework shumë e popullarizuar që pritet ta tejkalojë plotësisht përdorimin e Bootstrap si frameworku më i përdorur i CSS.

Duhet ta theksojmë se është tepër e rëndësishme të ushtroni dhe të shihni video se si funksionon TailwindCSS, me qëllim që mentorët t'i shfrytëzoni për detyra dhe shembuj më të avansuar si dhe të dizajnoni uebfaqe shumë më të komplikuara. Gjithashtu mund të lexoni më shumë në mësimin e krijuar për ju që sqaron më shumë detaje rreth TailwindCSS.

Ushtrimi i javës

Për ta kuptuar më mirë përdorimin e TailwindCSS si zavendsim i përdorimit direkt të CSS, do fillojmë duke e transformuar shembullin tonë. Në fillim do sigurohemi se çdokush nga ju e ka HTML kodin si në vijim:

            
                <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Kursi TechUP</title>
	</head>
	<body>
	  <div>
  		<h1>Tungjatjeta, unë jam pjesë e kursit TechUP</h1>
		<p>Uebfaqja jonë personale.</p>
	  </div>
		<ul>
			<li>
			  <a href="gallery.html">Galeria</a>
		  	</li>
			<li>
			  <a href="about.html">Rreth nesh</a>
		  	</li>
			<li>
			  <a href="contact.html">Kontakt</a>
		  	</li>
		</ul>
		<h1>Galeria ime</h1>
		<p>
		Këtu do vendosim fotografitë tona që do i shfaqim për të tjerët.
		</p>
		<img src="foto1.jpg" alt="Foto1"> 
	  	<table>
			<caption>Informatat e personit</caption>
			<tr>
				<th>Emri</th>
				<th>Mbiemri</th>
				<th>Mosha</th>
				<th>Gjinia</th>
			</tr>
			<tr>
				<td>Hasan</td>
				<td>Hiseni</td>
				<td>17</td>
				<td>M</td>
			</tr>
		  	<tr>
				<td>Fisnike</td>
				<td>Hasani</td>
				<td>18</td>
				<td>F</td>
			</tr>
		</table>
	  <div>
		<p>Contact info: 070 071 072</p>
	  </div>
	</body>
</html>

Siç e shihni kemi larguar nga përdorimi linkun që e kishim me CSS fajllin e krijuar për të manipuluar me dizajnin. Gjithashtu i kemi larguar përdorimin e `class` dhe `id`.

Nëse e merrni ushtrimin e javës së 2-të dhe i vendosni një fotografi, atëherë do duhet të keni një dizajn si në pjesën e majtë të fotos së mëposhtme. Ndërsa pjesa e djathtë është dizajnuar me TailwindCSS.

Përdorimi i TailwindCSS

Në vazhdim do e kopjoni kodin e HTML por kësaj rradhe të integruar me TailwindCSS.

            
                <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Kursi TechUP</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="px-2 py-5">
    <div class="bg-cyan-700 font-serif text-center">
        <h1 class="text-3xl mb-4">Tungjatjeta, unë jam pjesë e kursit TechUP</h1>
        <p>Uebfaqja jonë personale.</p>
    </div>
    <div class="flex justify-between items-center">
        <h1 class="text-3xl">Galeria ime</h1>
        <ul class="flex mt-3.5">
            <li class="p-3.5 bg-cyan-700 hover:bg-cyan-300 hover:text-cyan-700 text-cyan-300">
                <a href="gallery.html">Galeria</a>
            </li>
            <li class="p-3.5 bg-cyan-700 hover:bg-cyan-300 hover:text-cyan-700 text-cyan-300">
                <a href="about.html">Rreth nesh</a>
            </li>
            <li class="p-3.5 bg-cyan-700 hover:bg-cyan-300 hover:text-cyan-700 text-cyan-300">
                <a href="contact.html">Kontakt</a>
            </li>
        </ul>
    </div>
    <p>
        Këtu do vendosim fotografitë tona që do i shfaqim për të tjerët.
    </p>
    <img src="foto1.jpg" alt="Foto1" class="w-[50%] my-10 h-auto mr-auto ml-auto">
    <table class="w-full">
        <caption class="caption-bottom">Informatat e personit</caption>
        <tr>
            <th class="text-center p-2 bg-sky-900 text-white">Emri</th>
            <th class="text-center p-2 bg-sky-900 text-white">Mbiemri</th>
            <th class="text-center p-2 bg-sky-900 text-white">Mosha</th>
            <th class="text-center p-2 bg-sky-900 text-white">Gjinia</th>
        </tr>
        <tr>
            <td class="text-center p-2">Hasan</td>
            <td class="text-center p-2">Hiseni</td>
            <td class="text-center p-2">17</td>
            <td class="text-center p-2">M</td>
        </tr>
        <tr>
            <td class="text-center p-2">Fisnike</td>
            <td class="text-center p-2">Hasani</td>
            <td class="text-center p-2">18</td>
            <td class="text-center p-2">F</td>
        </tr>
    </table>
    <div class="text-right p-5 bg-cyan-300">
        <p>Contact info: 070 071 072</p>
    </div>
</body>
</html>

Sqarimi i kodit

Linku me TailwindCSS

Do mundohemi që t'ju sqarojmë çdo pjesë të kodit që e kemi ndryshuar duke përdorur TailwindCSS. Në fillim duhet që të kemi linkun me TailwindCSS framework-un me qëllim që të mund të shfrytëzojmë kodin e saj. Kjo bëhet duke e vendosur linkun te pjesa e `head` në HTML.

            
                <head>
    <meta charset="UTF-8">
    <title>Kursi TechUP</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

Pjesa e Header-it

Siç mund të shohim tani përdorim `class` por me atributet e TailwindCSS. Në këtë rast kemi `bg-cyan-700` që tregon se prapavija e këtij `div` elementi duhet të jetë nijansa `700` e ngjyrës `cyan`. Pastaj i tregojmë se fonti duhet të jetë `font-serif` si dhe të pozicionohet në mes të ekranit `text-center`.

            
                <div class="bg-cyan-700 font-serif text-center">
        <h1 class="text-3xl mb-4">Tungjatjeta, unë jam pjesë e kursit TechUP</h1>
        <p>Uebfaqja jonë personale.</p>
</div>

Menu-ja

Te pjesa e menu-së e përdorim fillimisht `flex` dhe `justify-between` për të larguar njërin element nga tjetri. Psh, nëse ka 2 elemente, njëri do jetë në pjesën e majtë të ekranit ndërsa tjetri në skajin e djathtë të ekranit. Këtë e kemi bërë sepse `Galeria ime` ndodhet në një resht horizontal me menu-në. Prandaj nëpërmjet të kësaj do mund t'i ndajmë secilën në skajin e vet.

Pastaj për elementin bazë të menu-së `ul` kemi përsëri `flex` por kësaj rradhe edhe `mt-3.5`. Kjo dmth `margin: 0.875rem;` apo `14px` largësi nga pjesa lartë.

Ndërsa për çdo element `<li>` të menu-së tani kemi padding `p-3.5`, e ndryshojmë ngjyrën e prapavijës standarte. E kemi ngjyrën e tekstit `cyan-300` standart ndërsa ngjyrën e tekstit në `hover` e ndryshojmë në `cyan-700`.

            
                <div class="flex justify-between items-center">
        <h1 class="text-3xl">Galeria ime</h1>
        <ul class="flex mt-3.5">
            <li class="p-3.5 bg-cyan-700 hover:bg-cyan-300 hover:text-cyan-700 text-cyan-300">
                <a href="gallery.html">Galeria</a>
            </li>
            <li class="p-3.5 bg-cyan-700 hover:bg-cyan-300 hover:text-cyan-700 text-cyan-300">
                <a href="about.html">Rreth nesh</a>
            </li>
            <li class="p-3.5 bg-cyan-700 hover:bg-cyan-300 hover:text-cyan-700 text-cyan-300">
                <a href="contact.html">Kontakt</a>
            </li>
        </ul>
    </div>

Galeria

Sa i përket fotografisë e kemi caktuar gjërësinë e saj të jetë 50% e ekranit, me margjin lart dhe posht `my-10`, lartësia e fotos të jetë automatik sipas aspektit të gjërësisë. Gjithashtu margjinat djathtas dhe majtas të jenë auto që të pozicionohet fotoja në mes të ekranit `mr-auto ml-auto`.

            
                <img src="foto1.jpg" alt="Foto1" class="w-[50%] my-10 h-auto mr-auto ml-auto">

Tabela

Për tabelën fillimisht e caktojmë gjërësinë të jetë sa komplet ekrani `w-full`. Ndërsa pastaj për rreshtat kemi `text-center` dhe padding `p-2`. Për rreshtin e parë `<th>` kemi ngjyrë `bg-sky-900` dhe ngjyrën e tekstit `text-white`.

            
                <table class="w-full">
        <caption class="caption-bottom">Informatat e personit</caption>
        <tr>
            <th class="text-center p-2 bg-sky-900 text-white">Emri</th>
            <th class="text-center p-2 bg-sky-900 text-white">Mbiemri</th>
            <th class="text-center p-2 bg-sky-900 text-white">Mosha</th>
            <th class="text-center p-2 bg-sky-900 text-white">Gjinia</th>
        </tr>
        <tr>
            <td class="text-center p-2">Hasan</td>
            <td class="text-center p-2">Hiseni</td>
            <td class="text-center p-2">17</td>
            <td class="text-center p-2">M</td>
        </tr>
        <tr>
            <td class="text-center p-2">Fisnike</td>
            <td class="text-center p-2">Hasani</td>
            <td class="text-center p-2">18</td>
            <td class="text-center p-2">F</td>
        </tr>
    </table>

Footer-i

Sa për pjesën e footer-it e vendosim tekstin djathtas me `text-right`, i japim nga të gjitha anët padding `p-5` dhe ngjyrën e prapavijës e bëjmë `bg-cyan-300`.

            
                <div class="text-right p-5 bg-cyan-300">
  <p>Contact info: 070 071 072</p>
</div>

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

Javën që vjen do fokusohemi në një teknologji tjetër që nuk ka të bëjë me programimin por me dizajnimin e uebfaqes. Do të kemi një instruktor tjetër që është ekspert i dizajnimit të uebfaqeve dhe UI/UX dizajneve. Do mësojmë se si të përdorim programin FIGMA për dizajn si dhe nga këndvështrimi i programerëve se si duhet ta programojnë dizajnin e kërkuar nga klienti. Sa për kuriozitet mund të shihni këtë video.

Por, përsëri e theksojmë se është tepër e rëndësishme të kuptoni se si funksionon TailwindCSS, prandaj provoni që shembullin e sotëm ta programoni edhe ju në shtëpi si dhe të ushtroni me videot e mëposhtme:

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