Webbteknik 1

Syftet med den här uppgiften är du skall påbörja en sida som du förhoppningsvis kan ha kvar efter kursen. Ett annat syfte är såklart att du skall få en chans att visa dina kunskaper i HTML och CSS. Kraven som ges nedan måste vara uppfyllda, så använd listan dels för att se vad du ska göra och dels som en checklista, innan du redovisar.

Beskrivning

När det gäller information och webbplatser är det ofta så att “less is more”. En ren och snygg minimalistisk sida som bara innehåller den mest väsentliga informationen är i många fall effektivare än en webbplats bestående av många sidor med mycket information.

Du skall i den här uppgiften skapa en responsiv webbplats, bestående av en enda sida, där allt innehåll nås genom att scrolla (lodrätt). För att separera innehållet på sidan behöver du skapa olika sektioner med hjälp av relevanta HTML-element och stilsätta dem olika med CSS.

Sidan skall handla om dig på något sätt. Det kan vara början på en portfolio eller CV, en beskrivning av ett projekt du gjort, någon hobby, etc. Du kanske gillar matlagning, gör då en sida om mat du gillar att laga. Om du har ett företag kan sidan vara till företaget. Om du streamar innehåll på twitch eller liknande kan sidan handla om det. Det viktiga är att det är något du själv är intresserad av, som du kan tänka dig att dela med andra, och som du kan vilja jobba vidare med efter att kursen är slut.

Krav och bedömningskriterier

Följande krav ska vara uppfyllda:

• Innehåll

  • Webbplatsen behöver bara bestå av en sida, som laddas automatiskt när man navigerar till webbplatsens domännamn.
  • Sidan skall innehålla header, footer samt minst fyra olika sektioner däremellan.
    • Om du väljer att ha med undersidor på din webbplats så gäller detta för förstasidan, de andra får du göra hur du vill.
    • Varje sektion skall minst ha tillräckligt med innehåll för att fylla ut en skärm på en vanlig mobil. Använd följsamt designläge för att testa hur sidan ser ut i olika skärmstorlekar, där kan du välja bland några vanliga mobilmodeller.
  • Minst två olika bilder (som läggs in med html-kod)
  • Sid-headern skall innehålla navigering till de olika sektionerna.
  • Texter på sidan skall skrivas på svenska eller engelska.
  • Ert namn skall finns med någonstans i sidfoten.

• HTML-kod

  • Relevant titel i title-elementet.
  • Text strukturerad med korrekta element för rubriker och textstycken.
    • Alltså h1, h2, osv. för rubriker, p för textstycken, etc.
  • Använd relevanta semantiska HTML-element för att strukturera innehållet där det är lämpligt.
  • Adresser till bilder ska vara relativa adresser, bilderna skall alltså vara en del av din webbplats och inte länkas in från externa källor.
  • Koden ska vara validerad och gå igenom validatorn utan felmeddelanden.

• CSS-kod

  • All CSS-kod skall finnas i en separat CSS-fil. Det får alltså inte finnas någon CSS-kod i HTML-filen, varken inline eller i <style>-taggar.
  • Minst tre olika CSS-egenskaper för stillsättning av text skall användas.
  • Navigeringslänkarna ska ha olika stil beroende på om muspekaren befinner sig över länken eller ej.
  • Varje sektion skall vara visuellt avskiljd från andra sektioner, man skall alltså lätt kunna se var en sektion slutar och nästa börjar när man besöker sidan.
  • Bakgrundsfärg på något element och bakgrundsbild i något annat element.
  • Selektorer med referens till element, id och class.
    • Du måste alltså ha med både id och class även i HTML-koden.
  • Någonstans på sidan skall du använda display: grid för layout.
    • Minst två tillhörande CSS-egenskaper för grid skall användas för att specificera hur layouten skall se ut.
  • Någon del av sidan skall använda display: flex för layout.
    • Minst en tillhörande CSS-egenskap för flex skall användas för att specificera hur layouten beter sig.
  • Det ska vara en responsiv design, och du skall använda minst en media query för för att anpassa layout till större eller mindre skärmar.
    • Du bestämmer själv om du vill använda metoden “mobile-first” eller “desktop-first”.
    • Observera att det inte handlar om två helt olika layouter, utan en grundlayout som förändras med media queryn.
    • Välj gränsvärde i dina media query så att det inte blir någon rullningslist i sidled då fönstrets bredd förändras.
    • Tänk på att i en media query endast ta med kod för det som förändras, så att du inte upprepar kod i onödan.
  • Minst en sektion skall ha sitt innehåll uppdelat i flera kolumner om det finns tillräckligt med utrymme på skärmen (här kan du använda din media query för att ändra layouten baserat på skärmstorlek).
  • Du skall använda dig av CSS-egenskaperna transition och transform på åtminstone något element vardera, där det är lämpligt.
  • Koden ska vara validerad och gå igenom validatorn utan felmeddelanden.

• Publicering

  • Webbplatsen ska vara publicerad på Netlify.
  • URL:en till din publicerade webbplats får inte lämnas ut till någon annan än kursens lärare.

Se även de allmänna kraven för uppgifterna.

Redovisning

Då du publicerat dina sidor på Netlify går du in på den url du får där. Kontrollera noggrannt att allt ser ut som du vill. Gå också igenom ovanstående kravlista och checka av att alla krav är uppfyllda.

Redovisningen ska endast bestå av en länk med den url som du fått på Netlify, den skall inte innehålla någon filsökväg. Du redovisar genom att skapa länken i ditt svar i MyMoodle. Du måste redovisa innan deadline, det räcker inte att du bara har publicerat din webbplats.