- Tengja CSS við HTML.
- Aðlaganir á HTML fyrir CSS.
- Notkun á grunn CSS með box model; visual formatting model og; letri og litum.
Í verkefnum 2–6 munum við vinna áfram með sama verkefni og byggja ofan á það:
- Verkefni 2 skilgreinir grunn HTML og síður.
- Verkefni 3 bætir við grunn viðmóti.
- Verkefni 4 setur upp útlit (e. layout).
- Verkefni 5 setur upp grind og gerir útlit skalanlegt (e. responsive).
- Verkefni 6 setur upp tól til að hjálpa við skipulag og vinnu.
Verkefnið er framhald af verkefni 2, nýtir það efni sem uppsett er í því, og fylgir þeirri verkefnalýsingu. Leyfilegt er að nota sýnilausn að verkefni 2, sem gefin verður út föstudaginn 6. september.
Nú skal bæta við einföldu útliti á efnið með CSS. Allt útlitið skal vera í ./styles.css og allar HTML skrár skulu vísa í nákvæmlega þá skrá.
Fyrirmynd að útliti er í fyrirmynd/ möppu. Öll skjáskot eru tekin í 1000px breiðum Firefox vafra.
Bæta þarf við auka elementum við lausn/sýnilausn til að geta náð fram útliti.
Þar sem allt útlit skal útfæra í einni CSS skrá, skal huga að cascade og erfðum, þó er fullkomlega eðlilegt að endurtaka eigindi, en t.d. fyrir málsgreinar (<p>) þarf aðeins að taka fram einu sinni hvert margin þeirra er.
Gefið er styles.css skjal með grunn að lausn og athugasemdum.
Almennt skal gilda:
- Nota skal gefið „reset“ og
box-sizingbreytingu (merkt sérstaklega), það má ekki fjarlægja. - Nota skal leturgerðirnar:
- Matemasie frá Google fonts fyrir fyrirsagnir, eingöngu í regular.
- Open Sans frá Google fonts fyrir allt annað, bæði regular (þyngd
400) og bold (þyngd700). - Sækja skal leturgerðirnar (download) ekki með vísun og nota
@font-faceí CSS.
- Gefin er stærð á letri sem
16px(sem merkir að1rem == 16px), því skal ekki breyta. Í framhaldi af lýsingu ereitt bil = 1rem,hálft bil = 0.5remo.s.fr. - Gefin er hjálparklasi
.sr-onlysem skal setja áBeint í efnitengil. - Aðeins skal nota
pxí grunnleturstærð og áborderskilgreiningar, annars skal nota hlutfallslegar einingar (em,rem, eða%) - Allt efni (málsgreinar, myndir, form element) skal hafa eitt bil fyrir neðan sig.
- Á fyrirmyndum gæti þetta verið óljóst og þarf ekki að vera nákvæmlega eins og á fyrirmyndum.
- Allir litir:
#f3dd99,#cc99bb#eebbdd,#000000og#ffffff. - CSS skal vera án villna og viðvarana þegar keyrt í gegnum CSS validator, einnig hægt að keyra gegnum W3C Validator extension.
Allt sem gildir í verkefni 2 gildir áfram í þessu verkefni.
Gefinn er flexbox skilgreining sem sett er utan um allt efni, sjá athugasemdir í styles.css. Setja þarf <div class="wrapper"> eftir <body> og </div> fyrir neðan allt efni. Þetta mun sjá til þess að efni fylli nákvæmlega út í skjá, fótur sé alltaf neðst og efni taki allt auka pláss. Nánar um þetta í viku 4.
Annars gildir:
- Allt efni sé að hámarki
900pxbreitt og sé miðjað í vafra. - Haus notar bakgrunnslitinn
#cc99bbsem teygir sig alveg út í alla breidd vafra, texti innan haus er miðjaður og eitt bil á alla kanta. - Valmynd er beint fyrir neðan haus með eitt bil á alla kanta með bakgrunnslit
#eebbdd. Fyrir neðan er4pxborder með litinn#cc99bb. - Efni í valmynd flæði frá vinstri til hægri og sé miðjað með eitt bil á milli.
- Valin síða í valmynd á að vera feitletruð og ekki með undirlínu.
- Fótur (
<footer>) hafi bakgrunnslitinn#eebbddmeð4pxborder með litinn#cc99bbfyrir ofan. - Að minnsta kosti eitt bil sé alltaf milli meginmáls og fóts.
- Efni í fóti sitji hlið við hlið með bilum milli fyrirsagnar og efnis.
- Myndir hafi
5pxborder radíus á alla kanta.
Efni sé birt vinstri jafnað, mynd sé fleytt til hægri með eitt bil til vinstri og fyrir neðan.
Tafla sé með fyrirsagna röð og síðan aðra hvora röð með bakgrunnslitinn #eebbdd, þær raðir hafi fyrsta og seinasta reit með 5px border radíus á þá kanta sem snúa út úr töflu (sjá fyrirmynd).
Viðburðir hafi mynd fleytt til vinstri og skráningar hlekki fyrir neðan mynd og efni.
Hver hópur af reitum hafi fyrirsögn, takki hafi 5px border radíus og bakgrunnslitinn #eebbdd.
Aðeins skal nota eftirfarandi eigindi, og ef tekið fram, viðeigandi gildi:
background-colorborderog nánari skilgreiningarborder-spacing: 0;box-sizingcolorfloatogcleardisplay: block;,display: inline-block;font-familysrctil að vísa í skrár fyrir leturgerðir
font-stylefont-sizefont-weightlist-style: none;marginog nánari skilgreiningarpaddingog nánari skilgreiningarwidth,min-width,max-width,min-heighttext-aligntext-decorationvertical-align: top;, sjá athugasemd ístyles.csswhite-space: nowrap;til að láta texta í töflu ekki fara í næstu línu- Þau eigindi notuð í
.sr-onlyog ekki tiltekin hér ætti ekki að nota í annað. display: flex;,flex-directionogflex(í.wrapper) ætti eingöngu að nota þar.
Ekki þarf að huga að skalanleika (síðan þarf ekki að líta vel út í undir 800px skjá).
Setja skal upp verkefni á Netlify með því að hlaða upp skrám með „manual deploy“ eða tengja GitHub repo.
- 20% – Snyrtilega uppsett og gilt CSS.
- 20% – Aðeins leyfileg eigindi og gildi notuð.
- 15% – Almennt útlit, haus, valmynd, meginmál og fótur.
- 5% – Útlit forsíðu eftir forskrift.
- 15% – Útlit spilasíðu eftir forskrift.
- 10% – Útlit viðburðasíðu eftir forskrift.
- 15% – Útlit skráningarsíðu eftir forskrift.
Verkefni sett fyrir í fyrirlestri mánudaginn 2. september 2024.
Skila skal í Canvas, seinasta lagi fyrir lok dags fimmtudaginn 12. september 2024.
Skilaboð skulu innihalda:
- zip skrá með öllum skrám eða hlekkur á almennt (e. public) GitHub.
- slóð á verkefni keyrandi á Netlify sem athugasemd („Add comment“ eða „Bæta við athugasemd“ á skilaskjá í Canvas).
Skila má eins oft og þið viljið þar til skilafrestur rennur út.
Leyfilegt er að ræða, og vinna saman að verkefni en skrifið ykkar eigin lausn. Ef tvær eða fleiri lausnir eru mjög líkar þarf að færa rök fyrir því, annars munu allir hlutaðeigandi hugsanlega fá 0 fyrir verkefnið.
Ef stórt mállíkan (LLM, „gervigreind“, t.d. ChatGTP) er notað til að skrifa part af lausn skal taka það fram. Sjá nánar á upplýsingasíða um gervigreind hjá HÍ.
Sett verða fyrir tíu minni verkefni þar sem átta bestu gilda 5% hvert, samtals 40% af lokaeinkunn.
Sett verða fyrir tvö hópverkefni þar sem hvort um sig gildir 10%, samtals 20% af lokaeinkunn.
Útgáfa 0.1
| Útgáfa | Lýsing |
|---|---|
| 0.1 | Fyrsta útgáfa |