Det här projektet går ut på att skapa en responsiv hemsida med enkel funktionalitet. Sidan ska utvecklas enligt mobile first. Sidan ska fungera i telefoner av olika storlekar, och på desktops av olika storlekar. Använd flex-box för att bygga upp strukturen.
Följ instruktionerna i rubrikerna i ordning nedan.
Skapa ett repo på GitHub konto och klona ner det på datorn. Lägg in din template i mappen och gör en första commit. Commita varje gång ni lagt till något och fått det att fungera. Synca minst i slutet på varje lektion (helst flera gånger varje lektion).
Innan du börjar koda sidan skall du ha gjort två skisser över hur din flex ska fungera, en för mobil och en för desktop.
Själva sidan skall innehålla
- En huvudsida som innehåller
- Header
- Navigation
- Aside (endast synlig på desktop)
- Main
- Footer
- En sida med bilder på bananpajer
- En about sida med information om bananpajer
- Ett DOMScript som manipulerar någon del av sidan
- T.ex visar/döljer något
- Ändrar storlek/färg/bild på något
- Animerar något med transition
Gör en version av sidan som är anpassad efter någon surfplatta.
- [CSS Media Queries] https://css-tricks.com/css-media-queries/
- [Javascript querySelector] https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
- [Egenskaper hos DOMElement i javascript] https://developer.mozilla.org/en-US/docs/Web/API/element
- [<script>-taggen] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
| Aspekt | E | C | A |
|---|---|---|---|
| Planering | Tillsammans med läraren skapar du en översiktlig projektplan för en tänkt produkt. | Efter att ha rådfrågat läraren skapar du en genomarbetad projektplan för en tänkt produkt. | Efter att ha rådfrågat läraren skapar du en genomarbetad projektplan för en tänkt produkt, och reviderar vid behov planen |
| Kodning och kodningsstil | Tillsammans med läraren skriver och felsöker du HTML- och CSS-kod som med tillfredsställande resultat följer grundläggande standarder och tekniker | Efter att ha rådfrågat läraren skriver och felsöker du HTML- och CSS-kod som med tillfredsställande resultat följer grundläggande standarder och tekniker, och du infogar enkla domscript | Efter att ha rådfrågat läraren skriver och felsöker du kod som med gott resultat följer grundläggande standarder och tekniker, och du infogar lite mer avancerade domscript |
| Testning och optimering | Tillsammans med läraren gör du enkla optimeringar för överföring resurser och kontrollerar manuellt att produkten följer god praxis och fungerar i några webbläsare | Efter att ha rådfrågat läraren gör du lite mer avancerade optimeringar för överföring resurser och använder tester för att kontrollera att produkten följer god praxis och fungerar på flera plattformar | Efter att ha rådfrågat läraren gör du avancerade optimeringar för överföring resurser och använder tester för att kontrollera att produkten följer god praxis och fungerar på flera plattformar |
| Dokumentering | Tillsammans med läraren dokumenterar du översiktligt ditt arbete. | Efter att ha rådfrågat läraren dokumenterar du noggrant ditt arbete. | Efter att ha rådfrågat läraren dokumenterar du noggrant och utförligt ditt arbete enligt en angiven standard. |
| Utvärdering och självbedömning | Tillsammans med läraren bedömer du med enkla omdömen ditt arbetes kvalitet och din egen förmåga. | Efter att ha rådfrågat läraren bedömer du med nyanserade omdömen ditt arbetes kvalitet och din egen förmåga. | Efter att ha rådfrågat läraren bedömer du med nyanserade omdömen ditt arbetes kvalitet och din egen förmåga, och ger förbättringsförslag. |
| Bild- och textbehandling | Tillsammans med läraren bearbetar du med viss säkerhet enkla bilder och texter så de fungerar i produkten | Efter att ha rådfrågat läraren bearbetar du med viss säkerhet och via flera steg lite mer avancerade bilder och texter så de fungerar i produkten. | Efter att ha rådfrågat läraren bearbetar du med säkerhet och via flera steg lite mer avancerade bilder och texter så de fungerar i produkten. |
| Kommunikation | Tillsammans med läraren skriver du med viss säkerhet tydlig och lättläst kod. | Efter att ha rådfrågat läraren skriver du med viss säkerhet tydlig och lättläst kod. | Efter att ha rådfrågat läraren skriver du med säkerhet tydlig och lättläst kod. |