video

VEFÞ1VG05AU - NotebookLM video

Hér eru verkefni áfangans útskýrð í máli og myndum

Modern Web Developement Roadmap (.pdf)

Yfirlit Verkefna 1, 2 og 3 í VEF1VG

Verkefni 1: GitHub og vinnuflæði forritara

Í fyrsta hluta er áherslan á að setja upp vinnuumhverfið og læra á þau tól sem styðja við vefþróun.

Html tög og CSS stílar
<h1> til <h6>: Notað fyrir fyrirsagnir á vefsíðunni, þar sem <h1> er mikilvægasta fyrirsögnin og <h6> sú minnsta
<p>: Notað til að búa til málsgreinar (paragraphs) utan um texta
<ul>: Notað til að búa til óreglulega lista (punktalista)
<li>: Notað fyrir hvern og einn listalið innan í lista
Emphasis og Importance: Sérstök tög (eins og og ) eru notuð til að gefa texta áherslu eða mikilvægi
Tenglar <a>: Notað til að búa til tengla (links) á aðrar síður eða skjöl
<img>: Notað til að setja myndir inn á vefsíðuna

Verkefni 2: Box módelið, HTML5 ritháttur og stílsíður

Í þessu verkefni læra nemendur undirstöðuatriði í strúktúr og hönnun.

Box módelið: Skilningur á því hvernig einingar eru samsettar úr padding (fyllingu), border (ramma) og margin (spássíu).
Display settings: Eiginleikum taga er breytt með display: skipuninni, til dæmis til að breyta útliti lista (<ul>).
Float: Notað til að láta texta flæða í kringum myndir eða raða upp dálkum með float: left.
HTML5 Semantic Elements (Merkingarfræðileg tög): Vefsíður skulu ritaðar með tögum sem lýsa hlutverki sínu, svo sem:
- <header>, <nav>, <main>, <article>, <section>, <aside> og <footer>.
Pseudo classes (Hulduklasar): Notað til að stíla tengla (<a>) eftir ástandi þeirra:
- :link (óheimsóttur), :visited (heimsóttur), :hover (mús yfir), :active (smellt á).

Verkefni 3: Skipulag með Flexbox og CSS Grid

Hér er áherslan á flóknari uppsetningu og skipulag (layout) vefsíðna.

Flexbox: Notað til að endurraða tögum og stýra flæði efnis.
- display: flex; virkjar flexbox.
- flex-flow: row-reverse; snýr við röð dálka.
- Hægt er að nota flex til að miðjustilla texta og raða efni í raðir eða dálka.
CSS Grid: Kraftmikið kerfi til að búa til dálka og skipulag.
- Notað með skipuninni display: grid;.
- Hægt er að búa til 2, 3 og 4 dálka uppsetningu (col-2, col-3, col-4).
- Grid Template Columns: Notað til að setja upp heildarútlit vefsíðu þar sem HTML5 tög (header, nav, main o.fl.) eru sett í skipulagt kerfi.

Verkefni 4

Sveigjanleg vefhönnun (Responsive Web Design) með CSS Grid byggir á því að nota viðmið (breakpoints) og @media screen skipunina til að birta mismunandi skipulag eftir skjástærðum. Markmiðið er að tryggja að vefsíðan birtist rétt á öllum tækjum, þar sem skipulag með mörgum dálkum gengur til dæmis ekki upp á litlum farsímaskjám.

Hér eru helstu leiðirnar sem notaðar eru til að útfæra þetta:

Grid-template-columns: Þessi skipun er notuð til að stýra fjölda og breidd dálka með hlutfallseiningunni fr. Á minnstu skjáunum (0–599px) er gjarnan notaður einn dálkur (1fr), en eftir því sem skjárinn stækkar er dálkum fjölgað í tvo, þrjá eða fjóra með skipunum eins og repeat(4, 1fr).
Grid-template-areas: Með þessari aðferð eru ákveðin tög nefnd (t.d. article, aside1, aside2) og þeim raðað upp í skipulagt kerfi. Skipulagið breytist eftir viðmiðum; til dæmis geta svæði farið úr því að vera í einni lóðréttri röð á síma yfir í að vera hlið við hlið á stærri skjám.
Samvinna við Flexbox: Sumir hlutar vefsíðunnar, eins og efnisyfirlit (nav), eru oft hafðir sveigjanlegir með display:flex á meðan aðalskipulagið er stýrt með Grid.
Miðjustilling: Á stórum skjám (t.d. yfir 100rem eða 1600px) er algengt að nota margin: auto til að miðjussetja efnið svo það teygist ekki um allan skjáinn.