Grid och flexbox

Nu börjar ni kunna mycket med hur man bygger upp utseendet på en hemsida. Några 'relativt' nya metoder man kan använda sig av och som är allt mer vanliga är att avända sig av grid och flexbox. En introduktion till grid går att hitta här och en mycket bra interaktiv tutorial går att hitta här. (Registrera dig med ditt skol-email. Det är kostnadsfritt).

Uppgifter

1. Du ska nyligen gjort en Provuppgift (Efterlysningssidan) där du använde dig av positioneringar. Nu ska du göra om (Skapa en kopia) den sidan men använda dig utav en grid-layout istället. Gör de ändringar som behövs i både html-filen och css-filen och försök att skala bort allt som inte behövs. Koden ska vara lättläslig. Kommentera gärna i koden om du gör någon klurig lösning. Utseendet ska bli likadant eller bättre/snyggare än originalet. Tänk också på att sidan ska vara fin att titta på även på mindre skärmar, se till att sidan blir responsiv.
2. Du ska skriva en tutorial om flexbox. 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. 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. Förklara styrkor och svagheter och när man bör andvä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!
3. Kommer snart... förbered dig på en jobbig uppgift!

Tillbaka till startsidan