Inlämningar

Inlämning 2 - Hotellwebbplatsen

Bygg en fiktiv hotellwebbplats utifrån din planering och Figma-skiss.

Uppgift

Du ska bygga en fiktiv hotellwebbplats. Utgå från din Figma-skiss från planeringsuppgiften och välj om du satsar på E-nivå eller C/A-nivå.

Du ska lämna in både den publicerade webbplatsen och koden på GitHub.

Det du ska dela

  • Länk till GitHub-repositoryt med koden.
  • Länk till den publicerade sidan på GitHub Pages.
  • Eventuell kort kommentar om du har avvikit från din Figma-design.

Filmserie: komplett exempel på E-webbplats

Filmserie: delvis klar C/A-hotellwebbplats

Exempel på inlämningslänkar

Exempel på C/A-nivå

Exempel på E-nivå

Exempel på hotellwebbplats på E-nivå
Exempel på hur en inlämning på E-nivå kan se ut.

E-krav

För E ska webbplatsen fungera som en enkel hotellwebbplats med tydlig struktur och gemensam design.

  • Webbplatsen ska handla om ett fiktivt hotell.
  • Du ska ha minst två olika HTML-sidor, till exempel index.html och en sida som boka.html, hitta.html eller kontakta.html.
  • Startsidan ska innehålla minst en bild som visar något om hotellet.
  • Rubriker och menytext ska vara riktig text. Löptext och bildtext får vara Lorem Ipsum.
  • Menyn ska ligga i början av sidan.
  • Alla huvudsidor ska synas i menyn, även den sida användaren är på.
  • Webbplatsen ska ha en enhetlig design.
  • Alla sidor ska ha en korrekt <title> som beskriver sidan.
  • Webbplatsen ska innehålla bilder och färger som du själv har valt.
  • Bilderna ska ha rimlig kvalitet och inte tydliga JPG-artefakter. Ett enkelt sätt att optimera JPG-bilder är Ezgif JPG Optimizer.
  • All egen CSS ska ligga i en gemensam CSS-fil.
  • Du ska inte skriva CSS direkt i HTML-filerna.
  • Du ska inte använda Tailwind, Bootstrap eller liknande ramverk.
  • Undvik upprepad CSS-kod. Tänk på DRY-principen: skriv inte samma kod flera gånger i onödan.
  • Webbplatsen behöver inte vara responsiv för E.
  • Testa webbplatsen i minst en webbläsare.

C-krav

För C ska webbplatsen vara mer komplett, responsiv och tekniskt kontrollerad.

  • Du ska använda din design från Figma. Du får avvika om du kort förklarar varför i utvärderingen.
  • Webbplatsen ska ha minst fyra olika HTML-sidor: index.html, boka.html, hitta.html och kontakta.html.
  • Alla sidor ska länka till varandra via en horisontell meny.
  • Ta inte med filer som inte används. Om de finns i projektet kan de också granskas.
  • Du får inte kopiera kod, bilder, font, design eller färger rakt av från exempel eller filmer.
  • Webbplatsen ska vara responsiv och mobilanpassad, till exempel med responsiv meny och responsivt formulär.
  • Bilder ska inte vara större än webbplatsen kräver. Du kan till exempel minska JPG-bilder med Ezgif JPG Optimizer.
  • Ingen bild får vara större än 1500x1200 pixlar. En bakgrundsbild får vara max 300 kB.
  • Bilder och karta får inte vara förvrängda. Proportionerna ska vara korrekta.
  • Rubriker ska ha korrekt ordning: h1, sedan h2, sedan h3. Hoppa inte över nivåer och använd inte h4.
  • Formulärfält ska ha kopplade labels med for och id.
  • Bokningssidan ska ha ett riktigt <form>-element runt formulärfältet.
  • Löptext på alla sidor ska vara vänsterställd.
  • Fil- och mappnamn ska bara använda a-z, 0-9 och bindestreck. Använd inte å, ä, ö, mellanslag, stora bokstäver eller specialtecken.
  • Använd inte å, ä eller ö i CSS-selektorer.
  • Alla sidor ska ha en relevant meta description.
  • Alla HTML-filer ska validera som HTML5.
  • Alla CSS-filer ska validera.
  • Layout och design ska styras med egen CSS-fil.
  • Sidan ska fungera i de senaste versionerna av Chrome och Firefox.
  • Alla sidor ska ha en footer med adressuppgifter.
  • Webbplatsen ska ha ett bokningsformulär. Det behöver inte skicka något på riktigt.
  • Webbplatsen ska ha JavaScript som fyller en funktion, till exempel responsiv meny eller bildväxlare/slideshow. Tid och datum räcker inte.
  • Hamburgermeny ska inte vara standard i desktopläge.
  • Webbplatsen ska innehålla en inbäddad Google-karta som fungerar responsivt och klarar HTML5-validering.
  • Tänk på design, layout, läsbarhet och rättstavning.
  • Undvik onödiga animationer.
  • Lägg inte text för nära kanter.

A-krav

För A ska webbplatsen vara extra väl optimerad, tillgänglig och kontrollerad.

  • Hela webbplatsen, utom bilder och Google Maps, ska klara Lighthouse utan viktiga problem. Google Fonts räknas också som undantag.
  • Du får gärna använda Modern Font Stacks i stället för Google Fonts.
  • Alla bilder ska vara i WebP-format.
  • Använd till exempel Squoosh eller CloudConvert för att konvertera bilder till WebP.
  • Alla färger ska ha lämplig kontrast mellan text och bakgrund.
  • Webbplatsen ska klara Color Contrast Accessibility Validator.
  • Alla bilder ska vara optimerade, till exempel med TinyPNG.
  • Du ska inte använda stora bilder som bara minskas med CSS.
  • Du ska inte använda små bilder som förstoras och blir suddiga.

Resurser

Innan du lämnar in

  • Öppna GitHub Pages-länken och testa den riktiga publicerade webbplatsen.
  • Kontrollera att alla länkar fungerar.
  • Kontrollera att bilder, CSS och JavaScript laddas utan 404-fel i Network.
  • Validera HTML och CSS.
  • Testa mobilvy och desktopvy.
  • Testa i Chrome och Firefox om du satsar på C eller A.
  • Kör Lighthouse om du satsar på A.