Kurs Profesional CSS në Shqip

Mëso si të kthesh një strukturë HTML në faqe moderne, të lexueshme dhe të përshtatshme për çdo ekran.

10 mësime

Selektorë, ngjyra, font, box model, flexbox, grid, responsive, animime dhe projekt final.

Praktikë reale

Çdo mësim lidhet me shembuj që mund t'i provosh menjëherë në CSS Preview.

Testim me radhë

Mësimet, mini-testet dhe provimi hapen gradualisht, që kursi të ndiqet si trajnim i vërtetë.

Projekt final

Në fund ndërton një kartë profili dhe një seksion web me CSS profesional.

Admin Audit Log

Regjistron veprimet admin në këtë browser.

<style>
  .card {
    max-width: 360px;
    padding: 24px;
    border-radius: 18px;
    background: #0ea5e9;
    color: white;
  }
</style>

<div class="card">
  <h1>Mirë se erdhe</h1>
  <p>Kjo kartë është stiluar me CSS.</p>
</div>

Çfarë është CSS?

CSS është gjuha që kontrollon pamjen vizuale të një faqeje web: ngjyrat, fontet, hapësirat, madhësitë, pozicionimin dhe sjelljen responsive.

Bazat

Objektivat

Të kuptosh rolin e CSS krahas HTML.
Të dallosh stilimin inline, internal dhe external.
Të lexosh një rregull CSS me selektor, pronë dhe vlerë.

HTML jep strukturën. CSS i jep asaj strukturë pamje, ritëm dhe hierarki vizuale.

p {
  color: #0f172a;
  font-size: 18px;
  line-height: 1.6;
}

Një faqe pa CSS mund të jetë e saktë në strukturë, por zakonisht duket e papërpunuar. CSS e bën faqen të lexueshme, të organizuar dhe të afërt me identitetin e një marke. Për shembull, një paragraf mund të ketë madhësi më të madhe, hapësirë më të mirë mes rreshtave dhe kontrast më të qartë.

Një rregull CSS fillon me selektorin, pastaj mes kllapave vendosen deklaratat. Çdo deklaratë ka një pronë dhe një vlerë. Kjo mënyrë e ndarjes e bën kodin të mirëmbajtshëm dhe të lehtë për t'u ndryshuar.

1. Cili është roli kryesor i CSS?

Të krijojë strukturën semantike Të kontrollojë pamjen vizuale Të ruajë databazën

2. Në rregullin p { color: blue; }, çfarë është color?

Selektor Vlerë Pronë CSS

Selektorët dhe lidhja me HTML

Selektorët tregojnë cilët elementë do të stilohen. Ata mund të kapin tag-e, klasa, id, elementë brenda elementëve të tjerë dhe gjendje si hover.

Selektorë

<div class="profile-card" id="student">
  <h2>Tarzan</h2>
  <p>Po mëson CSS.</p>
</div>

<style>
  .profile-card { padding: 20px; }
  #student { border: 2px solid #0ea5e9; }
  .profile-card h2 { color: #0369a1; }
</style>

Çfarë duhet të mbash mend

.klasa përdoret për grupe elementësh.
#id përdoret për një element unik.
Selektorët specifikë fitojnë ndaj atyre më të përgjithshëm.

Laborator praktik: HTML Preview

Për prova të shpejta përdor HTML Preview të Laboratori.al. Butoni “Provo në Preview” te blloqet e kodit e hap automatikisht shembullin atje.

Provo të ndryshosh .profile-card në .card vetëm në CSS dhe shiko çfarë ndodh. Kur emri i klasës nuk përputhet me HTML, stili nuk aplikohet.

Ngjyra, tekst dhe tipografi

Tipografia dhe ngjyrat vendosin tonin e faqes. Ato ndikojnë drejtpërdrejt në lexueshmëri, besueshmëri dhe ndjesinë profesionale.

Pamje

Rregulla profesionale

Përdor kontrast të mjaftueshëm mes tekstit dhe sfondit.
Mos përdor shumë fonte në të njëjtën faqe.
Ruaj ritëm me line-height dhe hapësira të qëndrueshme.

body {
  font-family: Arial, sans-serif;
  color: #0f172a;
  background: #f0f9ff;
}

h1 {
  color: #0369a1;
  font-size: 42px;
}

p {
  line-height: 1.7;
}

Ngjyra nuk duhet zgjedhur vetëm sepse “duket bukur”. Në faqe reale duhet të mendosh për kontrastin, hierarkinë dhe markën. Bluja shpesh përdoret për besim, teknologji dhe qartësi, prandaj është zgjedhje e mirë për një kurs CSS.

1. Cila pronë ndryshon familjen e fontit?

text-image font-color font-family

2. Pse ka rëndësi kontrasti?

Për lexueshmëri dhe aksesueshmëri Vetëm për animime Për të fshirë CSS

Box Model

Çdo element në CSS trajtohet si kuti: përmbajtje, padding, border dhe margin. Kuptimi i këtij modeli është themelor për layout.

Hapësira

.card {
  width: 320px;
  padding: 24px;
  border: 1px solid #bae6fd;
  margin: 20px auto;
  box-sizing: border-box;
}

Pjesët e kutisë

content: përmbajtja reale.
padding: hapësira brenda kutisë.
border: vija rreth kutisë.
margin: hapësira jashtë kutisë.

box-sizing: border-box është praktikë shumë e përdorur, sepse bën që gjerësia e elementit të përfshijë padding dhe border. Kjo e bën layout-in më të parashikueshëm, sidomos kur punon me kolona dhe karta.

1. Cila pronë krijon hapësirë brenda elementit?

margin padding display

2. Çfarë bën box-sizing: border-box?

E bën madhësinë më të parashikueshme E fshin elementin E kthen në JavaScript

Flexbox

Flexbox përdoret për rreshtim dhe shpërndarje elementësh në një drejtim: rresht ose kolonë. Është ideal për menu, karta dhe grupe butonash.

Layout

Konceptet

display: flex aktivizon flexbox.
justify-content kontrollon boshtin kryesor.
align-items kontrollon boshtin dytësor.
gap vendos hapësirë mes elementëve.

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

CSS Grid

Grid përdoret për layout dy-dimensional: rreshta dhe kolona. Është shumë i fuqishëm për galeri, dashboard-e dhe struktura faqesh.

Layout

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 700px) {
  .gallery {
    grid-template-columns: 1fr;
  }
}

Kur përdoret?

Kur ke nevojë për kolona dhe rreshta.
Kur layout-i duhet të jetë i rregullt dhe i përsëritshëm.
Kur do të kontrollosh gjerësitë me fr, minmax ose repeat.

1. Grid është më i përshtatshëm për...

vetëm tekst inline layout me rreshta dhe kolona dërgim emaili

2. Cila pronë përcakton kolonat?

font-size color grid-template-columns

1. Cila pronë krijon hapësirë jashtë elementit?

margin color src

2. Flexbox është shumë i mirë për...

databaza rreshtim në një drejtim krijim formularësh serveri

3. Cili sistem është më i fortë për galeri me kolona?

text-align letter-spacing CSS Grid

Responsive Design

Responsive design bën që faqja të punojë mirë në desktop, tablet dhe telefon. Nuk është shtesë; është pjesë bazë e CSS modern.

Mobile

.content {
  width: min(1100px, 92vw);
  margin: auto;
}

@media (max-width: 700px) {
  .hero {
    grid-template-columns: 1fr;
    padding: 24px;
  }
}

Parime

Përdor gjerësi fleksibël, jo vetëm pixel fiks.
Testo në disa madhësi ekrani.
Përdor media queries kur layout-i duhet të ndryshojë.

1. Për çfarë përdoret @media?

Për të ruajtur foto Për rregulla sipas madhësisë së ekranit Për databaza

2. Cila zgjedhje është më responsive?

width: min(1100px, 92vw) width: 3000px height: 9999px

Pseudo-klasa dhe gjendje

Pseudo-klasat si :hover, :focus dhe :active lejojnë stilim sipas ndërveprimit të përdoruesit.

Interaksion

Gjendje të zakonshme

:hover kur maus-i qëndron mbi element.
:focus kur elementi është i fokusuar me tastierë.
:active gjatë klikimit.

.btn {
  background: #0ea5e9;
  color: white;
}

.btn:hover {
  background: #0369a1;
}

.btn:focus {
  outline: 3px solid #7dd3fc;
}

1. Cila pseudo-klasë aktivizohet kur përdoruesi kalon maus-in mbi element?

:print :grid :hover

2. Pse ka rëndësi :focus?

Për të fshehur butonat Për përdoruesit që navigojnë me tastierë Vetëm për tabela

Transitions dhe animime

Lëvizjet e vogla e bëjnë ndërfaqen më të qartë, por duhet të jenë të shpejta, të buta dhe të arsyeshme.

Lëvizje

.card {
  transition: transform .2s ease, box-shadow .2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(2, 132, 199, .22);
}

Kujdes

Mos animo çdo gjë.
Përdor kohë të shkurtër për feedback.
Prefero animime të lehta si transform dhe opacity.

1. Cila pronë krijon kalim të butë mes gjendjeve?

transition doctype charset

2. Cilat prona janë zakonisht më të mira për animime të lehta?

width dhe height gjithmonë src dhe href transform dhe opacity

Projekt final: kartë profili responsive

Në projektin final bashkon selektorët, box model, flexbox, grid, responsive dhe mikro-ndërveprimet në një komponent real.

Projekt

.profile {
  display: grid;
  gap: 18px;
  max-width: 420px;
  padding: 28px;
  border-radius: 24px;
  background: linear-gradient(135deg, #0284c7, #38bdf8);
  color: white;
}

.profile .actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

Kriteret

Përdor paletë blu të qëndrueshme.
Ka kartë, butona dhe tekst të lexueshëm.
Përshtatet në telefon.
Ka hover/focus të qartë për elementët interaktivë.

1. Çfarë duhet të tregojë projekti final?

Vetëm një ngjyrë pa strukturë Përdorim të mirë të layout, tipografisë dhe responsive design Vetëm HTML pa stilim

2. Çfarë duhet testuar para provimit final?

Desktop, tablet dhe telefon Vetëm një monitor shumë i madh Vetëm printimin

1. Responsive design synon që faqja...

të punojë vetëm në desktop të përshtatet në ekrane të ndryshme të mos ketë CSS

2. Cila pseudo-klasë ndihmon tastierën?

:focus :table :database

3. Projekti final duhet të jetë...

statik dhe i papërshtatur vetëm tekst pa stil i lexueshëm, responsive dhe i qëndrueshëm vizualisht

Provimi përfundimtar

Për të marrë certifikatën duhet të kalosh provimin me të paktën 70%.

Të dhënat për certifikatë

Shkruaj emrin dhe mbiemrin ashtu si do të shfaqen në certifikatën e përfundimit.

Certifikata e përfundimit

Mund ta printosh ose ta ruash si PDF nga dritarja e printimit.

CSS

Certifikatë përfundimi

CSS Profesional në Shqip

Kjo certifikatë i jepet

Emri Mbiemri

për përfundimin me sukses të kursit me mësime, ushtrime praktike, mini-teste dhe provim final.

Rezultati 0%

Data --/--/----

Niveli Bazë Profesional