1.

1 Egy baráti telefon

Ahogy híre megy, hogy kódolni tanulsz, szinte biztos, hogy lesznek
barátaid, akik meg fognak kérni, hogy készíts nekik egy honlapot.

Ebben a projektben erre fogsz felkészülni a segítségünkkel. :)

Engem most hívott egy barátom, aki szeretne egy egyszerű

weboldalt saját magáról. Szabadúszóként dolgozik, és egy virtuális
névjegykártya jól jönne a munkájához.

Meg fogom mutatni, hogyan érdemes végigvinni egy ilyen

projektet az elejétől a végéig. Beszélni fogunk egy egyszerű
projekt specifikációiról, wireframing-ről, és újabb elemeket
sajátítasz majd el HTML-ből és CSS-ből.

A végére egy ehhez hasonló egyszerű weboldallal fogsz elkészülni:

1.2. Muszáj-e kódolni?

Mielőtt nekilátnánk kódolni, mindig érdemes feltenni magunknak
pár fontos kérdést.
Az első ezek közül, hogy vajon létezik-e már kész eszköz arra a
problémára, amelyet szeretnénk megoldani. Ha igen, miért nem
használjuk inkább azt?

Az egyedi megoldások elkészítése és fenntartása erőforrás-

igényes, így csak a legritkább esetben érdemes ezt az utat
választani, ha a hatékonyság is számít (kivétel persze ez alól, ha a
célunk kifejezetten a tanulás).

Ebben a helyzetben bizonyos, hogy ennek az oldalnak az

elkészítése a legjobb megoldás erre a problémára. Így készen
állunk az oldal specifikációinak beszerzésére.

2.1. Tedd föl a jó kérdéseket

Megválaszolva az első kérdést, most már biztos, hogy kódolni
fogunk, de azért még ne rohanj a billentyűzethez. :) A konkrét
fejlesztés mindig a folyamat utolsó lépése. Először mindig tervezz
– ezzel komoly fejfájásoktól óvhatod meg magad később.

A következő feladat konkretizálni a végterméket. Ebben ilyen

kérdések segíthetnek:

 Pontosan mire fogjuk használni ezt az oldalt?

 Ki a célközönség?
 Pontosan mit szeretnénk megjeleníteni az oldalon?

Az ezekre adott válaszok segítenek abban, hogy a megfelelő oldalt

építsd meg a barátodnak (aki jelenleg az első ügyfeled). Sose
becsüld alá a fontosságát annak, amikor leülsz végigbeszélni és
leírni ezeket a kérdéseket az ügyféllel. Ezzel érheted el, hogy az
elvárásaitok megegyezzenek a kimenetellel kapcsolatban.

A dokumentumot, amely a fenti folyamatból

születik, specifikációnak nevezzük. Ez írja le pontosan a terméket. A
bonyolult projekteknek hosszú és meglehetősen technikai a
specifikációjuk. Nekünk most elég lesz egyszerű mondatokkal
leírni, hogy mit tudunk és mit szeretnénk elérni.
 Miért fontos a specifikáció a webfejlesztésben?
Egy barátságos kapcsolatot alapoz meg a fejlesztő és az ügyfél
között.
Nem annyira fontos manapság, csak egyfajta fejlesztői szokás.
Összehangolja a fejlesztő és az ügyfél elvárásait.
Igazából időpazarlás, mert az elvárások úgyis változnak a
fejlesztés során.
Ellenőrzöm a válaszom

Igen, igen, és megint csak igen. Ez a helyes válasz!

2.2. Specifikáció és adatok

Specifikáció

 Az oldal egy elektronikus névjegykártya.

 Az oldal információt jelenít meg (lentebb csatolva).
 Az oldalon található egy profilkép.
 Az oldal elérhető az interneten.
 Az oldal jól néz ki asztali és mobilböngészőkön egyaránt.

Adatok

name: Attila Nagy

profession: packaging designer
location: Budapest, HU
link1: https://twitter.com/#
link2: https://behance.net/#
link3: https://instagram.com/#
rólam: Imádok a csomagolástervezés részleteivel
babrálni. A Twitteremen legtöbbször dizájnról,
fotózásról írok, az Instagramomat pedig elárasztják az
imádnivaló #PrincessImre cicámról készült fotók.

2.3. Rajzolj egy wireframe-et

Most már tudjuk, hogy mit szeretnénk megjeleníteni az oldalon, a
következő kérdés az, hogy hogyan.

Papírral és ceruzával (vagy egy képszerkesztővel) tervezni sokkal

egyszerűbb és gyorsabb, mint nekifutásból kóddal próbálkozni. A
javaslatom ezért az, hogy sose hagyd ki ezt a lépést.

Nem az a cél, hogy a rajzod gyönyörű legyen, a részletekkel ne

törődj. Az eszköz lényege, hogy segítsen vizualizálni az
elképzeléseid. A lenti kép például a negyedik verzió, előtte még
három másikat rajzoltam, miközben ötleteltünk a barátommal. Ez
lett az, amelyikkel mindketten elégedettek voltunk:
A feketével rajzolt kép annak a vázlata, hogy az oldal hogyan
nézzen majd ki. Ezt wireframe-nek (drótváz) nevezzük, magát a
folyamatot, ahogy létrejön pedig wireframing-nek (drótváz
elkészítése). Léteznek speciális eszközök és programok ehhez, de
az elsajátításuk komoly időt vesz igénybe, és ebben a szakaszban
bőven elegendő, ha a már ismert papírhoz és ceruzához fordulsz
inkább.
Mire jó a wireframe?

Semmire sem jó, mert ha rosszul van megrajzolva, csak

nehezíti a kivitelezést.
Egy hozzávetőleges vázlatot mutat arról, hogy hogyan kellene a
weboldalnak kinéznie.
Részletesen és esztétikusan szemlélteti a tervezett weboldalt.
Nem annyira fontos manapság, csak egyfajta fejlesztői szokás.
Ellenőrzöm a válaszom

Úgy-úgy, ami jó, az nem rossz!

2.4. A váz tervezése

Amikor megegyeztünk a kinézetben, megpróbáltam megtervezni,
hogy mindez hogyan fog kinézni HTML-vázként. Ehhez zöld
dobozokat rajzoltam a wireframe egyes elemei köré:
Azt is próbáltam odaírni, hogy milyen HTML-elemek és classok
felelnek majd meg az adott doboznak. Például
a section.links címkével ellátott rész a <section class="links"> elem
lesz a kész kódban. Ezzel a módszerrel később könnyebb lesz
megírni a HTML-vázat. Emellett azt is egyszerűbb látni, hogy az
egyes elemek hogyan viszonyulnak egymáshoz. Például rögtön
látszik, hogy a p.about elem a gyermeke lesz
a div.content elemnek, és testvére a section.links-nek.

Milyen kapcsolatban van egymással a div.profile-image és

a div.name-headline a HTML-vázban?

Testvérek, ugyanahhoz a szülő elemhez tartoznak.

A div.profile-image elem a div.name-headline szülő eleme.

A div.name-headline a div.profile-image szülő eleme.

Se nem testvérek, se nem közvetlen szülői egymásnak.

Ellenőrzöm a válaszom

Megy ez neked, ott a pont!

2.5. Összegyűjtjük az alapanyagokat

Most már majdnem készen állunk arra, hogy kódoljunk.

Annyi maradt hátra, hogy összegyűjtsük az oldalhoz szükséges

maradék elemeket, az adatokon kívül ugyanis még szükségünk
lesz a háttérképre és a profilfotóra.

Mivel még nincs saját szerverünk, valahogy másként kell az

interneten elérhetővé tennünk a képeinket. Erre a célra
az imgur szolgáltatás tökéletesen megfelel.

A saját képeidet nagyon könnyű publikussá tenni imgur-rel. Csak

húzd át a gépedről a kívánt fotót az imgur oldalra. Amikor a
feltöltés befejeződött, jobb-klikk a képen, és válaszd a Kép
megnyitása új lapon opciót. Másold ki az URL-t a címsorból az új
fülön. Ezt használhatod fel direkt linkként az oldalaidban.

Egyéb tartalmak / információk

A profilfotó: https://i.imgur.com/EcO1qil.jpg

A háttérkép: https://i.imgur.com/9kh3G8L.jpg

Txt

Copy

Ezzel minden készen áll, kezdhetünk is kódolni.

3.1. A konténerek
Nyiss meg egy új bint a JSBinben.

Első lépésként próbáld meg létrehozni az oldal vázát. Csak

magukat a HTML-elemeket, tartalom nélkül. Figyelj arra, hogyan
ágyazod egymásba ezeket. (Testvérei egymásnak? Melyik elem
szülője melyiknek?)

A wireframe képen a következő konténerek szerepelnek:

 div.profile-card
 div.head
 div.profile-image
 div.name-headline
  div.content
 p.about
 section.links

Kódolás közben ne feledd az ajánlott konvenciókat:

 Kezdj minden blokkot új sorban.

 A gyermek elemeket kezd beljebb két szóközzel.
 A testvér elemeket ugyanakkora behúzással (indentation)
kezdd.

Később találsz majd példamegoldást, de előbb próbálkozz saját

magadtól.
Feladat:
Készítsd el az oldal üres HTML-vázát. Másold ide a JSBin-linked, ha
kész vagy.
A megoldásod:

https://codepen.io/SziRom/pen/bGLMqKw

3.2. A tartalom hozzáadása

Ha megvagy a vázzal, add hozzá az adatokat az üres
konténerekhez:

name: Attila Nagy

profession: packaging designer
location: Budapest, HU
link1: https://twitter.com/#
link2: https://behance.net/#
link3: https://instagram.com/#
about: I love to fiddle with the tiny details of
packaging design. You'll most likely find me on Twitter
talking about design or photography or on Instagram
where I post way too many photos of my beautiful cat
#PrincessImre.
Figyeld meg, hogy az adatokat kulcs: érték párokban adtuk meg a
specifikációban. Neked csak az értékeket kell bemásolnod
tartalomként, tehát "Attila Nagy", és nem "name: Attila Nagy".

Arra is figyelj, hogy a megfelelő HTML-elemeket használd.

Alkalmazz címsorokat a fontos tartalomnál. A linkeket egyelőre
rakd egy rendezetlen (unordered) listába.

Add hozzá a profilképet is:

A profilfotó: https://i.imgur.com/EcO1qil.jpg

A végén valami hasonlót kell kapnod (a böngészőablakot

átméreteztem, hogy a lehető legkeskenyebb legyen):
Figyeld meg, hogy hozzáadtam egy "from" és egy "Contact me via"
sort az oldalhoz, amelyek nem szerepeltek az adatok közt.

Ne feledd, hogy nincs egyetlen tökéletes megoldás egy

problémára.
Feladat:
Add hozzá a tartalmat az üres konténerekhez a JSBinen. Másold
ide a bined URL-címét.
A megoldásod:

https://codepen.io/SziRom/pen/zYRjPVz?editors=1010

3.3. Az ikonok
Még valami hiányzik a HTML-ből: az ikonok. Pontosabban a
tartózkodási helyet jelző ikon Budapest elé, valamint a kapcsolati
linkekhez tartozó ikonok.

A Font Awesome egy kiváló és teljesen ingyenes eszköz ikonok

beillesztésére.
Ahhoz, hogy használni tudd, be kell linkelned az ikonokat
tartalmazó külső stíluslapot a HTML-ed head részébe. Ekkor a CSS-
fájlt egy CDN (Content Delivery Network, tartalomszolgáltató
hálózat) szolgálja ki. Ha a felhasználó járt már olyan oldalon,
amely ugyanezt a CSS-fájlt használja, akkor nem kell újra
letöltenie.

Illeszd be HTML-ed head részébe a külső stíluslapra mutató alábbi

linket:

<link
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/f
ont-awesome.min.css" rel="stylesheet">

Mi a FontAwesome 4.7.0-es verziót használjuk ebben a modulban.

Ha szeretnéd megnézni a legújabb verziót, akkor látogass el erre
az oldalra. Használd nyugodtan az új ikonokat, de ne feledd, hogy
a szintaxis kissé eltér az 5-ös verzióban, és erre nem fogunk kitérni
ebben a modulban.

Hogy lássuk, működik-e, adj hozzá egy tartózkodási helyet jelző

ikont a „Budapest” szó elé a HTML-ben:

<i class="fa fa-map-marker"></i>

HTML
Copy
Ha megnézed a Font Awesome ikonokat, az összes ikont
megtalálod, amelyre szükséged lesz.

Én a fa-2x verziókat használtam a kapcsolati ikonokhoz. Most így

néz ki az oldal:
https://fontawesome.com/v4/icons/

https://fontawesome.com/sessions/sign-in
4.1. Találd meg a dobozokat
Mostanra (remélhetőleg) készen vagy a HTML-lel. A következő lépésben a helyükre rakjuk
az oldal különböző alkotórészeit.

Mielőtt bármi mást csinálnék, szoktam adni minden egyes konténer elemnek valamilyen
átlátszó háttérszínt. Így azonnal látom, hogy hol vannak a határaik, és azt is könnyen
észreveszem, ha valamiért egymásra csúsznak pozicionálás közben.

A következő színeket adtam a classoknak:

 .profile-card – sárga (hsla(60, 100%, 50%, .4))

 .head és .content – zöld
 .profile-image, .name-headline, .about és .links – lila

Így egyből látszik, hogy hol vannak a konténereim:

Feladat:
Adj átlátszó háttérszíneket a konténereknek, majd másold ide a
JSBin-linked, ha kész vagy.
A megoldásod:

https://codepen.io/SziRom/full/ExQporo
4.2. CSS reset
Hála a háttérszíneknek, rögtön láthatod, hogy az elemeink körül
alapértelmezett padding és margin található.

Ez megint csak a már sokat emlegetett user agent stylesheets-nek

köszönhető, ami a böngésző beépített CSS stíluslapja, és az
alapértelmezett megjelenésért felel. Jó gyakorlat ezt a stíluslapot
felülírni pár saját alapértékkel, hogy biztosan egyformán jelenjen
meg mindenhol az oldalunk. Ezt a módszert CSS reset-nek hívjuk.

Én ezt a nagyon egyszerű CSS reset-et alkalmaztam:

/* CSS reset */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 100%;
}

CSS
Copy
A * jel az úgynevezett universal selector-t (általános szelektor) jelöli.
Az itt leírt szabályok minden elemre érvényesek lesznek az
oldalunkon. Ez a reset a következőket csinálja:

 minden margin és padding értéket 0-ra állít,

 bekapcsolja a border-box box-sizing modellt (az elemek
magasságába és szélességébe így a padding és a border is
beletartozik, nem csupán a tartalom), és
 100%-ot állít be font-size értéknek.

A CSS reset után így néz ki az oldal:

Milyen CSS-szelektort használnál, hogy egy CSS-szabályt az összes HTML-
elemre alkalmazz?
#
$
*
@

Ellenőrzöm a válaszom

Úgy bizony!

4.3. A méret beállítása

Oké, így viszont a .profile-card konténer elfoglalja a böngészőablak
teljes szélességét. Kezdjünk ezzel valamit.

Elsőként beállítok egy fix, 480 pixeles szélességet az oldalnak,

hogy ennél soha ne foglaljon el többet. Ez megoldja a megjelenést
nagy képernyőkön, viszont így az oldal ki fog lógni a kis
képernyőkről. Próbáld meg átméretezni az ablakot kisebbre.
Hogy ezt megoldjuk, adok a konténernek egy max-
width tulajdonságot. Ez azt mondja a böngészőnek, hogy az itt
meghatározott értéknél sosem lehet szélesebb az elem.

/* Pozicionálás */

.profile-card {
width: 480px;
max-width: calc(100vw - 10px);
}

CSS
Copy
A max-width tulajdonságnak nem egy fix értéket adtam meg, hanem
egy számítást (calculation). Egy vw a böngészőablak szélességének
1%-ával egyenlő, azaz 100vw a böngészőablak teljes szélességének
felel meg. A kalkuláció tehát 10 pixelt von le a böngészőablak
teljes szélességéből (a célom az, hogy mindkét oldalon 5-5px
széles tér maradjon, mivel középre fogom igazítani a tartalmat).
Kérlek, tartsd észben, hogy a kalkuláción belül szóközt kell
használnod a - (vagy +) műveleti jel előtt és után.

A vw a viewport width angol szó rövidítése. A viewport nem igazán

fordítható magyarra (nézetablak...), de ez nem is baj, mert
valójában csak a böngészőablak kissé puccos szinonimája. :)

Milyen CSS-tulajdonságot használnál, ha azt szeretnéd, hogy egy adott

elem maximális szélessége 16 pixellel legyen kevesebb, mint a
böngészőablak aktuális szélessége?
max-width: calc(100vw - 16px);
width-max: calc(100vw - 16px);
width-max: calc(1vw - 16px);
max-width: calc(1vw - 16px);
4.4. Középre helyezés flexbox-szal
A .profile-card konténerünket mind vízszintesen, mind
függőlegesen középre kell igazítani.

Egészen a közelmúltig a függőleges középre rendezés egy

kifejezetten bonyolult feladat volt a CSS-ben. Aztán pár éve
megjelent a flexbox nevű lehetőség, és minden egy csapásra
megváltozott.

A flexbox továbbra is viszonylag új technológiának számít, de ez

téged ne tántorítson el, használd bátran.

A flexboxhoz szükséged van legalább egy szülő és egy gyermek

elemre. A szülő elem fogja meghatározni a gyermek elem
megjelenését.

A mi esetünkben a gyermek elem a .profile-card konténer, szülőként

pedig a body elemet fogjuk használni:

body {
display: flex;
justify-content: center;
align-items: center;
}

A display: flex azt mondja a böngészőnek, hogy a body elem egy

flexbox konténer, és ekként kell viselkednie. A justify-content:
center rendezi az egyik tengely mentén középre a tartalmat,
az align-items: center pedig a másik tengely mentén (azért nem a
vízszintes és a függőleges tengely megnevezést használom, mert
ezek a flexbox használatakor felcserélődhetnek).

Első ránézésre nem változik semmi, olyan, mintha nem működne

a flexboxunk. Ez azért van, mert alaphelyzetben a body elem
magasságát a tartalma határozza meg. Mivel a .profile-card az
egyetlen elem a body-ban, ezért a .profile-card magassága egyenlő
a body magasságával.

Állítsuk át a body elemet úgy, hogy magasságnak inkább a

böngészőablak magasságát használja:

body {
height: 100vh;
}

Egy vh (viewport height) egyenlő a böngészőablak magasságának

1%-ával, tehát a fenti kód a body magasságát mindig a viewport
100%-ára fogja állítani.

Most már, ha minden igaz, a .profile-card pont az oldal közepén ül:

Milyen CSS-szabályt használnál, ha azt szeretnéd, hogy egy gyermek elem
(<article>) mind függőlegesen, mind vízszinetesen középre legyen igazítva
a szülő elemén (<div>) belül?
article {display: flex; justify-content: center; align-items: center;}
div {display: flex; justify-content: center; align-items: center;}
article {display: flex; justify-content: middle; align-items: middle;}
div {display: flex; justify-content: middle; align-items: middle;}

Ellenőrzöm a válaszom

Nagyon vágod a témát! Igen, ez a jó válasz.

4.5. Konténerek és tartalom középre helyezése

A wireframe-en a .head és .links konténerek tartalma középre
rendezett. Állítsuk be ezt CSS-ben, egyetlen deklaráció az egész:

.head, .links {
text-align: center;
}

CSS
Copy
Ha megnézed újra a rajzot, maguk a .head és .content div elemek is
középre rendezettek, és nem foglalják el a rendelkezésre álló hely
100%-át:
Adjunk ezeknek 90%-os szélességet, és húzzuk középre
mindkettőt auto margin segítségével:

.head, .content {
width: 90%;
margin: 0 auto;
}

Emlékezz, a margin: 0 auto a következő kifejezés rövidítése

(shorthand): margin: 0 auto 0 auto (az értékek az óramutató járásának
megfelelően haladnak körbe fentről indulva, tehát az első a felső
margót állítja, majd jobb, majd alsó, majd bal). Ez a kód annyit
mond a böngészőnek, hogy nem tudjuk, pontosan mekkorák
legyenek a margók, de legyenek egyenlőek. Ez rendezi középre a
tartalmat a vízszintes tengely mentén.

Milyen CSS-szabályt használnál ahhoz, hogy egy elem szöveges tartalma

vízszintesen középre legyen rendezve?
align-text: center;
text-align: middle;
 align-text: middle;
text-align: center;

Ellenőrzöm a válaszom

Abszolút így van. Gratulálunk!

4.6. A profilfotó
Ideje pozicionálni és megformázni a profilfotót.

A következő kóddal átállítjuk a méretét, és kör alakúra vágjuk az 50%-os border-

radius segítségével:

img {
width: 120px;
height: 120px;
border-radius: 50%;
}

Aztán feljebb mozgatjuk a tartalmazó konténert a méretének felével:

.profile-image {
margin-top: -60px;
}

Milyen CSS-tulajdonságot használnál ahhoz, hogy egy képet kör alakúra

változtass?
border-style: rounded;
border-radius: 50%;
border-radius: -50%;
border: rounded;

Ellenőrzöm a válaszom

Igen, igen, és megint csak igen. Ez a helyes válasz!

4.7. Az inline lista

Most pedig eltávolítjuk a fekete pontokat a listaelemek elől, és egymás mellé pozicionáljuk
őket:
/* Contact links */

ul {
list-style-type: none;
}

li {
display: inline;
}

Kezd egész hasonlóvá válni az oldal a kiindulási rajzhoz:

Milyen CSS-tulajdonságot használnál ahhoz, hogy eltüntesd a fekete

pontokat a listaelemek elől?
list-style-type: none;
list-style-type: inline;
display: inline;
display: none;

Ellenőrzöm a válaszom

Watson, Önnek teljesen igaza van!

4.8. Térközök hozzáadása

Jelenleg az oldalunk meglehetősen zsúfolt. Nem ártana egy szellősebb elrendezés, több
térközzel. Az egyik lehetséges megoldás erre a következő:

.head, .about {
margin-bottom: 10%;
}

.content {
padding: 5% 10%;
}

Máris jobb:

Feladat:
Adj margin és padding értékeket a konténereknek. Másold ide a
JSBin-linked, ha kész vagy.
A megoldásod:

https://codepen.io/SziRom/pen/zYRLpXP

5.1 A háttérkép
Egész közel vagyunk, már csak pár simítás maradt CSS-sel.
Ideje hozzáadni a háttérképet az oldalhoz, megadni a pozícióját és
a méretét:

body {
background: url('http://i.imgur.com/9kh3G8L.jpg') no-
repeat center center fixed;
background-size: cover;
}

CSS
Copy
Az első background sor valójában a következő blokk rövidítése
(shorthand):

background-image: url('http://i.imgur.com/9kh3G8L.jpg');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;

Mindez megmondja a böngészőnek, hogy

 hol találja a háttérképet,

 egyszer jelenítse meg, ne ismételje,
 rendezze középre horizontálisan és vertikálisan és
 a kép ne gördüljön együtt az oldallal.

Még többet megtudhatsz a background tulajdonságról a W3Schools

oldalán.

A background-size: cover sor azt mondja a böngészőnek, hogy mindig

méretezze át úgy a háttérképet, hogy az lefedje a teljes aktuális
hátteret.
Próbáld meg átméretezni a böngészőablakot, hogy lásd ezt a
funkciót működés közben.

Figyeld meg, hogy habár mind a profilfotó, mind a háttérkép kép,

az egyik a HTML-ben kap helyet, míg a másik a CSS-ben. Ez azért
van így, mert a profilfotó tartalmat ad az oldalhoz, míg a háttérkép
pusztán látványelemként funkcionál.

Válaszd ki a szintaktikailag helyes CSS-szabályt, amely az alábbi képet a

weboldalad háttérképévé változtatja: https://i.imgur.com/EcO1qil.jpg. Figyelj
oda, hogy a kép kitöltse a a teljes hátteret, egyszer jelenjen meg, legyen
vízszintesen és függőlegesen is középre rendezett, és ne mozogjon az oldal
görgetésével.
body {background-image: url('https://i.imgur.com/EcO1qil.jpg') no-repeat
center center fixed; background-size: cover;}
body {background: https://i.imgur.com/EcO1qil.jpg no-repeat center center
fixed; background-size: cover;}
body {background: url('https://i.imgur.com/EcO1qil.jpg') no-repeat center
center fixed cover;}
body {background: url('https://i.imgur.com/EcO1qil.jpg') no-repeat center
center fixed; background-size: cover;}

5.2. A névjegykártya megformázása

Hogy magát a .profile-card konténert kicsinosítsuk, a következő
lépéseket kell megtennünk:

 hozzáadni egy átlátszó fehér hátteret,

 lekerekíteni a sarkait és
 árnyékot adni hozzá:

.profile-card {
background-color: hsla(0, 0%, 100%, .5);
border-radius: 4px;
box-shadow: hsla(0, 0%, 0%, .8) 10px 10px 80px;
}
Van egy pár CSS-tulajdonság, amelyek speciális prefixeket
(előtagok) igényelnek ahhoz, hogy működjenek. A border-
radius nemrég még ilyen volt. Plusz tulajdonságokat kellett
megadnod, ha azt akartad, hogy minden böngészőben működjön
(pl. -webkit-border-radius vagy -moz-border-radius). Szerencsére ez
folyamatosan változik, előnyére. A shouldiprefix.com oldalon meg
tudod nézni, hogy mely tulajdonságok szorulnak még prefixekre.

Mire vonatkozik a 80px érték a box-shadow: hsla(0, 0%, 0%, .8) 10px 10px
80px; CSS-tulajdonságban?

Az árnyék vízszintes pozíciójára.

Az árnyék függőleges pozíciójára.
A blur (elmosódottság, homályosság) értékére.
A spread (kiterjedés) értékére.
Ellenőrzöm a válaszom

Úgy bizony!

5.3. Keret hozzáadása

Szeretném, ha a profilfotót körbevenné egy vékony szürke csík. Ehhez meg kell adnunk egy
szürke háttérszínt, és egy 1px vastag padding-et:

img {
padding: 1px;
background-color: #666;
}

Jó lenne, ha lenne egy vékony vonal a .head és a .content szekciók között is.
Hozzáadhatnánk egy vízszintes elválasztóvonalat is, de egy ilyen border-rel is megoldható a
feladat:

.content {
border-top: 1px solid hsla(0, 0%, 30%, .8);
}

Hogyan határoznál meg egy 5 pixel széles, folytonos, sárga alsó bordert?
border-bottom: 5px solid yellow;
bottom-border: 5px solid yellow;
border-bottom: 5px, solid, yellow;
bottom-border: 5px, solid, yellow;

Ellenőrzöm a válaszom

Helyes válasz. Piros pont jár érte!

5.4. Interakció
Egy kevés interakció jól mutatna az oldalon. Adjunk hozzá egy kis változást, amikor az egér a
profilfotó fölött jár:

img:hover {
transform: scale(1.1);
}

Add hozzá a fenti kódot az oldaladhoz, és nézd meg, mi történik, ha a kép fölé mész a
kurzorral.

Nem rossz, de lehet ezt még finomítani. Add hozzá az alábbiakat a már
létező img szelektorhoz:

transition: all 0.5s ease-in-out;

Sokkal jobb. Még egy kicsit halványítsuk a színeket:

img {
...
filter: grayscale(50%);
}

img:hover {
...
 filter: grayscale(20%);
}

Nézd meg a végeredményt az oldaladon. Menő, nem?

További transform értékeket találsz ezen az oldalon, több filter-ért pedig kattints ide.

Mit jelent az img:hover?

Ez egy olyan CSS-tulajdonság, amely megváltoztatja a kép méretét, amikor az egérrel
rámutatunk.
Ez egy olyan CSS-tulajdonság, amely megváltoztatja a kép színét, amikor az egérrel
rámutatunk.
Ez egy olyan CSS-tulajdonság, amely megváltoztatja a képhez kapcsolódó változások
időtartamát és időzítését, amikor az egérrel rámutatunk.
Ez egy olyan CSS-szelektor, amely kiválasztja a képet, amikor az egérrel rámutatunk.
Ellenőrzöm a válaszom

Nagyon vágod a témát! Igen, ez a jó válasz.