Qëllimi i kësaj jave është që të vërejmë se sa i keni kuptuar HTML & CSS dhe se a mundeni lirshëm t'i përdorni ato. Ata që kanë ushtruar në shtëpi do mund të bëjnë pyetje në lidhje me problemet që i kanë hasur. Pastaj do ju japim sfida për të ndryshuar dizajnin e javës së kaluar. Është normale që mos ta dini zgjidhjen, por kërkoni në Internet dhe shihni a mund të gjeni zgjidhjen që u nevojitet. Ne presim që ju të provoni të bëni diçka vetëm, edhe nëse përsëri keni probleme atëherë do ju ndihmojmë ne. Por, fillimisht duhet ta provoni vetë që të ndryshoni diçka, të kërkoni në Google, të pyesni ChatGPT apo të mësoni në W3 School për CSS.

Sa i përket HTML-së, tanimë do duhet të përdorni më shpesh <div> elementin dhe brenda tij të përdorni ose `class` ose `id` sipas nevojës.

Përpara se të vazhdojmë do ju sqarojmë një pjesë shumë të rëndësishme të CSS që do ju nevojitet gjatë tërë kursit, këto janë `padding` dhe `margin`. Fotografia më poshtë e sqaron dallimin e tyre. Kemi dy butona, njëri është `Kërko` ndërsa tjetri `Shiko`. Margjina është largësia nga kufiri (anglisht border) i një elementi nga një element tjetër apo nga fillimi i ekranit. Ndërsa padding është në hapsirën e brendshme të elementit, largësia nga kufiri i elementit deri tek përmbajtja e elementit (content).

Kërko

Butonin e kemi larguar për `50px` nga ana e majtë, ndërsa `400px` nga maja e ekranit, duke përdorur `margin`. Pastaj kemi `30px` `padding` nga kufiri i lartëm dhe i poshtëm i elementit deri tek brendia e butonit që e kemi shfaqur me ngjyrë të kaltërt. Ndërsa nga ana e majtë dhe e djathtë kemi nga `40px padding` nga kufiri deri tek brendia e butonit.

Shiko

Për të sqaruar më mirë këto 2 atribute, kemi shfaqur një buton tjetër. Kësaj rradhe, nuk kemi `margin` në pjesën e lartme, prandaj butoni është shfaqur në fillim të ekranit. Ndërsa nga ana e majtë kemi `300px margin`. Dallimi është se në anën e majtë margin-a nuk fillon nga ekrani por menjëherë nga kufiri i butonit `Kërko`. Pastaj sa i përket `padding`, nuk kemi shfaqur në pjesën e djathttë dhe të poshtme, prandaj butoni `Shiko` nuk duket njejtë si butoni `Kërko`.

Duke kombinuar `margin` dhe `padding` mund të bëni shumë ndryshime në dizajnin e një uebfaqeje. Prandaj preferohet që të ushtroni sa më shumë me këto 2 atribute që ta kuptoni thelbin e funksionimit të tyre.

Ushtrimi i javës

Sa i përket CSS, do mundoheni të ndryshoni dizajnin për ta përshtatur me kërkesat e sfidave që i japim:

1. Ndryshimi i ngjyrës së tabelës

2. Ngjyra të ndryshme për rreshtat tek dhe çift të tabelës

3. Lëvizja e pozicionit të fotografisë

4. Përdorimi i padding dhe margin për titullin

Ndryshimi i ngjyrës së tabelës

Provoni të ndryshoni ngjyrën e reshtit të parë të tabelës, aty ku shkruan "Emri, Mbiemri, Mosha, Gjinia". Ndryshimi duhet të aktivizohet vetëm në momentet kur përdoruesi e afron mausin mbi tabelë. Sapo të largohet kursori i mausit, ngjyra duhet të kthehet ashtu siç ishte. Provoni ta bëni vetë.

Nëse nuk mundët ta bëni, atëherë mësoni zgjidhjen:

Për ta bërë këtë do duhet të bëni ndryshimin e mëposhtëm në fajllin tuaj të CSS, `style.css` ose `styling.css`. Duke ja shtuar `:hover` ne i themi CSS-së që kur dikush të kalojë me kursorin e mausit mbi rreshtin e parë të tabelës (anglisht i thuajnë `hover`) atëherë të ndryshohet ngjyra e prapavijës së atij rreshti.

Ngjyra të ndryshme për rreshtat tek dhe çift të tabelës

Për momentin të gjitha rreshtat që përmbajnë informata kanë ngjyrën e njejtë. Provoni që të shfaqni ngjyrën e kaltërt për rreshtat tek, ndërsa ngjyrën e gjelbërt për rreshtat çift të tabelës.

E provuat? Nëse nuk mundeni, shihni zgjidhjen:

Në fillim duhet që të shtoni një CSS atribut që do e kontrollon se rreshti `n` (n mund të jetë 1,2,3,4,5...) a është tek (odd) ose çift (even). Pastaj për çdo rresht të shfaqet ngjyra e duhur sipas kësaj.

Lëvizja e pozicionit të fotografisë

Sfida e rradhës thotë që duhet të lëviz pozicioni i fotografisë nëse kursori i mausit është mbi fotografi. Gjithashtu ndryshoni madhësinë e fotografisë duke e bërë atë më të vogël, shumë të vogël. Provoni!

Edhe kësaj rradhe do e përdorim atributin `hover`, por në brendi të saj do vendosim diçka tjetër. Tani duhet që të lëvizim pozicionin e fotografisë e jo të ndryshojmë ngjyrën e prapavijës si më parë. Nëpërmjet të `width` dhe `height` e caktojmë gjërësinë dhe gjatësinë e fotografisë. Ndërsa nëpërmjet të margjinave e caktojmë se sa larg duhet të jetë fotografia nga skaji i ekranit. Me `margin-left` e largojmë fotografinë për `50px` më larg nga skaji i majtë, ndërsa me `margin-top` e lëvizim për `600px` nga maja e ekranit.

Përdorimi i padding dhe margin për titullin

Tani do duhet që të mësoni se si të lëvizni titullin dhe ta shfaqni në largësi `300px` nga ana e majtë dhe `200px` nga lartë. Si ju duket dizajni tani?

Nëse nuk mundët ta bëni, përdorni kodin e mëposhtëm:

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

Preferohet që të shihni përsëri video për CSS dhe të ushtroni ta përdorni përpara se të vazhdojmë me Tailwind CSS, një sistem (anglisht framework) që mundëson përdorimin më të avansuar të CSS-së nëpërmjet një mënyre më lehtë të kuptueshme. Për Tailwind CSS duhet të shihni videot në vijim:

1. From Zero to Production - Një listë me video të shkurta

2. Build a Modern Landing Page With Tailwind CSS - Një demonstrim i plotë dhe krijim i një faqeje moderne

3. Tailwind Crash Course | Project From Scratch - Një projekt tjetër interesant

Mos u mërzitni nëse nuk i kuptoni të gjitha sqarimet aty apo nëse nuk mundeni ta bëni punën e njëjtë si ato. Gjatë javëve në vijim do i ushtrojmë shumicën e atributeve të Tailwind CSS duke e ndërtuar një uebfaqe profesionale. Por, është e rëndësishme që të shikoni videot me qëllim që ta keni më lehtë në vazhdim dhe të bëheni programerë të aftë për të koduar një uebfaqe moderne. Suksese!