Opbygning af hjemmeside med et fluid-width grid

Underviser: Zaki Wasik

Download kildefiler
Anvend CodePen

I denne video skal vi arbejde videre på vores hjemmeside-eksempel fra forrige video. Har du ikke set den foregående video, anbefaler vi derfor, at du går et skridt tilbage, inden du kaster dig over denne.

I sidste video byggede vi et fixed-width grid system, og formålet med denne video er derfor nu, at lave dette om til et fluid-width grid-system. Øvelsen vil således fokusere på at omdanne vores grid -system, og derefter anvende det på vores hjemmeside-eksempel. Du skulle med denne video gerne opleve, hvordan vi med få ændringer allerede nu kan komme meget tættere på en hjemmeside, som tilpasser sig skærmens størrelse.

Som altid kan du enten arbejde på hjemmesiden via CodePen, eller også kan du hente kildefilerne ovenfor, og udføre øvelsen direkte i din egen editor.

I denne video bruger vi en række forskellige metoder og værktøjer (Sass, Codepen og Emmet), som du måske ikke har brugt eller hørt om før. Det kan godt virke lidt overvældende, og derfor har Zaki skrevet en uddybende artikel, som giver dig en lidt blødere introduktion disse emner. Læs den her: Codepen, Sass og Emmet.

Video tags:

Denne video relaterer til emner såsom: responsive design kursus, responsive design tutorial, respsonsiv web-design vejledning, responsive hjemmeside design for begyndere, forskellen på adaptive layouts, Responsive layouts og mobile sites, fluid-width grid