Följande uppgifter är examinerande uppgifter för kursen Webbutveckling 1. Varje uppgift ska presenteras på sin egen webbsida (En uppgift kan dock bestå av flera sidor, men då ska det finnas en sida som fungerar som uppgiftens startsida).
Följande gäller för alla provuppgifter:
Det finns otaliga tutorials om olika saker på internet. Nu är det din tur att göra en sida som förklarar något, i det här fallet flexbox. För att göra detta måste du ju sävklart först lära dig själv om flexbox, detta kan du med fördel göra på olika sidor på internet.
Du ska skriva en tutorial som tar upp allt man kan tänkas vilja veta om flexbox och visa exempel på hur de olika inställningarna man kan göra påverkar utseendet.
Skapa egna exempel som visar vad olika attribut ger för effekt. Dessa exempel ska vara skrivna i HTML och CSS ej som bilder.
Förklara styrkor och svagheter och när man bör använda flexbox och när man kan använda sig av någon annan metod.
OBS! Du SKA ange källor på eventuella böcker, hemsidor och videor du använt dig av! (länka till källor på internet). Du ska även använda dig av allt du lärt dig tidigare för att göra en snygg och läsbar sida som gör att man vill lära sig mer om CSS genom att följa just din sida. <-- Det visuella är viktigt!
Ibland händer det att man får uppdraget att skapa en hemsida åt någon annan person eller en kund där denna har en egen idé om hur utseendet eller funktionaliteten ska fungera. Då gäller det att anpassa sig till dessa önskemål. I den här uppgiften så har ni just en sådan kund som har lite egna önskemål. Detta innebär att du som utvecklare måste anpassa dig till kundens önskemål så gott du kan och inte enbart förlita dig på dina egna önskemål vad gäller sidornas utformning.
Du har blivit kontaktad av en kund (Valfritt namn, du bestämmer) som vill ha en professionellt utformad webbsida för att visa upp sina leksaker/hobbysaker/husdjur/mjukisdjur/fortnight-skins/k-pop-stjärnor/seriefigurer (välj tema själv). De har bifogat en skiss på ungefär vad de vill ha och har tagit inspiration från en efterlysningssida som någon polismyndighet har använt. Följ exempelbilden så gott du kan, men eftersom just du är en expert inom formgivning på webben så är den exakta utformningen upp till dig.
Din kund är en yngre youtuber (rik som ett troll och väldigt inflytelserik inom sitt område) som vill ha ett passande tema (färg och form) för utseendet på sin sida. Det är viktigt att sidan ska vara scrollbar för kunden vill gärna kunna visa fler objekt i framtiden.
Rutorna där sakerna visas upp ska ha lite olika information om objekten (Du bestämmer vad, men förutom en bild bör det finnas minst tre olika text-taggar för t.ex. sakens namn, en beskrivning och hennes personliga känslor om saken).
Det ska finnas en funktion att visa eller inte visa någon typ av "splash" på objektet för att ge extra uppmärksamhet (se exempel i bilden).
Det ska finnas en beskrivning av din kund som beskriver namn och dennes intresse.
Sidan ska rikta sig till killar i åldern 8 - 14 år ungefär. Tänk igenom ditt färg- och formspråk på sidan så att det matchar målgruppen. Använd gärna någon sida på nätet för att hitta ett passande färgschema innan du börjar.
Sidan ska vara responsiv och ändra layout beroende på hur smal skärm som används (minst två lägen).
Strukturera upp HTML- och CSS-kod på ett tydligt sätt och undvik attribut som inte används. Kommentera gärna koden vid behov (jag kommer att titta igenom den).
I den här uppgiften så ska du skapa en komplett webbplats som består av flera sidor. Vad webbplatsen ska handla om väljer du själv, det kan vara en sida om dig själv, om en förening, någon aktivitet du är intresserad av, en superhjälte, filmer eller din stora samling porslinskatter. Tanken är att du ska välja något du motiveras av.
Läs noga igenom instruktionerna på vad som måste finnas på din sida enligt uppgiften nedan innan du börjar, sedan gör du en enkel skiss på hur du planerar göra din webbplats. Du ska kunna redovisa planen under projektets gång.
Som ni sett tidigare så kan man göra ganska mycket för att formatera ett blockelement i CSS. Det är möjligt att använda flera bakgrundsbilder och övertoningar (gradients) i samma element och detta förklaras närmare på den här sidan. Läs igenom informationen på den sidan och se på exempelkoden hur man kan lägga flera effekter ovanpå varandra i ett element om man behöver det.
Skapa en snygg logotyp för din startsida med hjälp av sammansatta bakgrunder enligt länken till mitt exempel. Logotypen ska du använda på din egen startsida, men du ska göra en sida som förklarar hur du formaterat/skapat/satt-ihop den. Du ska visa upp relevant kod för logotypen (HTML och CSS) på instruktionssidan och även visa vilka bilder (om några) du använt för att sätta ihop den.
Du får använda dig av ::before och ::after om du vill, men hela logotypen ska annars bestå av ett blockelement.
Om du väljer att ha en hover-effekt så ska du också beskriva vad som händer/förändras när du hovrar.
