Opgave 10.1 – 10.4 Begynd med RWD
Forudsætninger: Læs fra start i afsnittet RWD – responsive web design i bogen https://koder.systime.dk/. Opgaverne dukker stille og roligt op. Du kan også gøre brug af W3Schools’ afsnit om responsivt design https://www.w3schools.com/css/css_rwd_intro.asp.
10.1 Fleksibelt design
Løs den første øvelse i afsnittet RWD – responsive web design i bogen https://koder.systime.dk/, som handler om fleksibelt design. Du skal bare lave en ny side og sætte koden fra bogen ind i <body>. Bagefter skal du prøve at ændre bredden på browserens vindue og se, hvad der sker.
10.2 Media queries
Næste øvelse i RWD – responsive web design i bogen https://koder.systime.dk/ handler om Media queries. Løs opgaven!
10.3 Billedernes tur
Tredje øvelse, igen i bogen RWD – responsive web design i bogen https://koder.systime.dk/ går på, hvordan billederne kan ændre sig. Løs øvelsen, som hedder “fleksible billeder 1”. Herunder er et smukt kvadratisk billede, som du kan bruge til øvelsen. Det burde være 900 px bredt, ellers kan du downloade det herunder.
10.4 Afsluttende øvelse i bogen
Lige under øvelse 10.3 finder du den sidste øvelse, Responsible Web Design. Koden til øvelsen findes nedenfor:
10.5 Anvend en skabelon fra W3 schools
Forudsætning for opgaven: Brug W3Schools’ responsive design som støtte https://www.w3schools.com/css/css_rwd_intro.asp.
- Studer eksemplet hos W3Schools under HTML > Layout https://www.w3schools.com/html/html_layout.asp. Hvordan virker det?
- Prøv eksemplet af på en hel hjemmeside ved at downloade koden. Dvs. du skal have min 2 sider, som du skal kunne linke imellem. Det er tilladt at tage en kopi af en af dine tidligere sites og så bruge den. Lad være med at gøre alt for meget ud af teksten, bare du har overskrifter, menu, lidt brødtekst samt et billede her og der, så er det ok.
- Lav styling af baggrunde og tekst
- Sæt et billede ind i <header>, som er langt og smalt. Billedet skal have en bredde på 100%. Faktisk kan du se et eksempel øverst på hjemmesiden her
- Tjek, at layoutet er responsivt. Herunder at billedet kan skalere, så det hele tiden ser pænt ud
- Sæt 1 billede ind et andet sted og tjek, at det er responsivt
10.6 Det store spring. Bliver til en afleveringsopgave senere
Forudsætning: Brug igen W3Schools’ responsive design som støtte https://www.w3schools.com/css/css_rwd_intro.asp. , men med et twist fra https://www.w3schools.com/css/css_rwd_grid.asp
Inden du går i gang: Du kan forhindre, at du drukner i CSS på flere måder. Du kan sætte kommentarer ind, men du kan også bruge flere stylesheets. Så skal der bare være flere link i <head> sektionen. Det er f.eks. almindeligt, at man har eget stylesheet til styling af menuen.
- Design selv en hjemmeside, der er responsiv. Forslag kan f.eks. være en restaurant, en nystartet gamerklub eller hvad du vil.
- Du kan helt sikkert lave det pænere end skabelonen fra opgave 10.5, så det gør du. Siden skal være pæn og præsentabel.
- Bonusopgave: W3schools har nogle ret flotte skabeloner her: https://www.w3schools.com/css/css_rwd_templates.asp
- Minimum 3 sider, med mindre du beslutter dig for at lave en one-page-web. Hvilket er tilladt, men der skal være min. 3 punkter i menuen under alle omstændigheder
- Sæt en menu ind á la dem, som findes i eksemplerne på W3Schools: https://www.w3schools.com/css/css_navbar.asp
- Der skal være et billede i toppen, som har en bredde på 100%
- Bonusopgave: Implementer et layout med grid https://www.w3schools.com/css/css_rwd_grid.asp. Alternativt (mere professionelt) brug Bootstrap, som du finder masser af på … tadaaa W3Schools https://www.w3schools.com/bootstrap/bootstrap_ver.asp