NemProgrammering.dk logo
Læs mere om denne UnoEuro Rabatkode
UnoEuro rabatkode

Opbygning af hjemmeside med et fluid-width grid

Lad NemProgrammering.dk´s eksperter lave din hjemmeside for dig
Vi tilbyder professionel hjælp til udvikling af hjemmesider og webshops. Læs mere om vores ydelser her!

Information om denne video

Underviser: Zaki Wasik

Download kildefiler Download kildefiler
Anvend CodePen 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

Spørgsmål og kommentarer

Har du spørgsmål eller kommentarer? Så skriv herunder! Alternativt kan du kontakte os på vores forum, hvor en masse hjælpsomme personer sidder klar ved tasterne.

Url´er bliver automatisk omdannet til links (nofollow).

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Jakob    05-12-2014

Jeg forstår ikke helt løsningen til "underdelingsproblemet". Hvis nu vi tager udgangspunkt i 8:12 eksemplet, så hvordan ville man sætte dette op i kode? Skal man så ikke neste de forskellige col-klasser? Jeg prøvede lige at lave eksemplet hurtigt, men så er jeg i tvivl om hvordan jeg skal lave de der "lego klodser". http://codepen.io/anon/pen/MYKgJb