Information om denne video
Underviser: Zaki Wasik
Download kildefiler
Anvend CodePen
I denne video skal vi se på, hvordan man opbygger et grid-system til sin hjemmeside. Videoen vil omfatte en praktisk øvelse, som vil være at bygge et 12-column fixed-width grid system, og derefter prøve at anvender det på vores hjemmeside-eksempel. Hjemmeside-eksemplet har vi forberedt på forhånd, og som du sikkert kan se, så er siden på ingen måde færdig endnu. Formålet med de næste videoer i denne serie er derfor, at færdiggøre hjemmesiden og tilføre den et lækkert responsivt layout samt gøre dens elementer responsive. Du kan enten arbejde på hjemmesiden via CodePen, som vi gør det i videoen, eller også kan du hente kildefilerne, og lave øvelsen direkte i din egen editor.
Du vil med denne lektion opleve, hvor nemt det er strukturere og opsætte et hjemmesidelayout, når du først har fået lavet et velfungerende grid-system.
I denne video anvender vi 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:
