IN 2 - Hotellwebbplatsen (E C A)

Om du satsar på E se dessa filmer

 Ett filmserie om ett komplett exempel på en E webbplats

Här kan ni ladda ner den färdiga webbplatsen

 Om du satsar på CA se dessa filmer

En filmserie om en delvis klar AC webbplats om ett hotell

Ladda ner hela webbplatsen från filmen eller se webbplatsen direkt i webbläsaren

En annan version av hotellwebbplasen med en meny istället för kontakta

Betygskrav

Dessa krav kommer jag att kopiera in i ditt delade dokumnent och gå igenom det som är kvar är det du ej fått godkänt på. Du har EN möjlighet att fixa det som är fel och det måste åtgärdas SENAST en vecka innan deadline.

E-krav

• Använd små bokstäver i löptext utom stor bokstav i början av meningar.

• Rubriker och menytext måste vara äkta, men löptext, bildtext kan vara Lorem Ipsum text

• Menyn ska vara i början av webbsidan

• Alla sidor ska vara i menyn även den aktuella sidan

• Webbplatsen ska ha en enhetlig design

• Alla sidorna ska ha en korrekt <title> som är vad sidan heter

• Webbplatsen ska innehålla bilder och färger som du själv valt. 

• Bilderna ska inte vara av för dålig kvalitét: jpg artefakter mm

Ett enkelt sätt att optimera bilder är https://ezgif.com/optijpeg

• Använda CSS för stilmall. Huvuddelen av CSS koden ska finnas i gemensam CSS-fil. Du får inte använda Tailwind. Bootstrap eller liknade. Tänk på DRY-principen. Använd inte samma kod två gånger. Tex om du använder mer än en CSS-fil ska inte koden upprepas

• Du ska göra minst TVÅ sidor: Start sida och en av dessa ( Boka Hitta, Kontakta eller ditt förslag, tex)

• Kontakt

• Sevärdheter

• Matsedel

• Startsidan ska innehålla minst en bild som visar något om hotellet

• Huvudsidornas länkar ska synas på alla webbsidor: Man får tex inte bara ha "start" och så måste användaren klicka få att få fram de andra länkarna. 

• Webbplatsen behöver inte vara responsiv (mobilanpassad)

• Testa webbplatsen med minst en webbläsare

En filmgenomgång av alla krav C och A krav

C-krav 

• Du ska använda designen från Figma, uppgift 6. Du får avvika om du motiverar i en kort text varför.  Du kommer få skriva varför du avvek i uppgift 8 utvärderingen. 

• Webbplatsen ska innehålla minst fyra sidor (Start, Boka, Hitta, Kontakta) som är länkade till varandra i en horisontell meny. 

• Om du skickar med filer som inte används kommer även de att granskas för fel, så se till att INTE ta med filer som inte är relevanta

• Du får inte kopiera koden, bilderna, fonten och designen eller färgerna rakt av från mina filmer. 

• Din webbplats ska vara responsiv och mobilanpassad. Här finns alla info om grid som kan vara användbar

• Minska bildernas storlek om de är för stora med tex: https://ezgif.com/optijpeg

  • Ingen bild får vara större än 1500x1200 och max 300 kB OM det är en bakgrundsbild.  Bilder ska inte var större än vad som webbsidan kräver

  • inga bilder eller karta får ha förvrängd proportionalitet. 

• Korrekt ordnade rubriker som inte hoppar över nivåer förmedlar sidans semantiska struktur. h1, sedan h2 -> h3. h4 ska undvikas

• "Form elements do not have associated labels"  Tänk på detta med for och id

• Löptexten på alla sidor ska ha vänsterställd text 

Använd bara a till z, inga å ä ö eller specialtecken, inga stora bokstäver, inga mellarrum, 0-9 i fil eller mappnamn, Använd inte å ä ö i selektorer i CSS. minfil.html, min-fil.html är OK

• Det ska finnas en meta description på alla sidor med lämlig text

• Alla HTML filerna ska gå igenom w3c validering för HTML5.

• Alla CSS filer ska gå igenom w3c validering för minst CSS2.

• Du ska använda egen CSS fil för att ändra layout och design på webbplatsen

• Sidan ska fungera på minst två olika webbläsare av de senaste versionerna av Chrome och Firefox

• Du ska ha med en sidfot på alla sidor med adressuppgifter

• Du ska ha med ett bokningsformulär som inte behöver fungera

• Du ska infoga  JavaScript som fyller en funktion på sidan. Tid och datum med JS är ej godkänt. Exempel en hamburgermeny eller slideshow. Fråga mig om du kommer på något annat. OBS Det ska inte vara hamburgermeny i desktopläge på webbläsaren

• Sidan ska innehålla en inbäddad Google karta som klarar valideringen i HTML5. Google kartan ska vara responsiv (ändra storleken när bredden ändras)

• Tänk på design, layout, läsbarhet, rättstavning för högre betyg  

- lagom stor text (lorem ipsum går bra i löptext (stycketext).

- p element till löptext. h1, h2 till rubriker

-  12 ord per rad +/- 4 ord. (50–75 tecken per rad)

- inga onödiga animationer

- lägg inte texten nära en kant

A-krav

• Hela webbplatsen UTOM bilderna och Google Maps måste klara Lighthouse. Google fonts är också ett undantag . (Överkurs Om du vill veta hur man skulle klara kraven och få bilderna ladda bättre se denna film från WDS)

• Du får använda https://modernfontstacks.com/ istället för Google fonts

• Alla bilder ska vara webp format. Använd tex https://squoosh.app/ eller https://cloudconvert.com/webp-converter  för att convertera alla bilder till webp-format

• Hela webbplatsen måste innehålla färger som har lämplig kontrast med text, bakgrund

• Din webbplats ska klara: Color Contrast Accessibility Validator https://color.a11y.com/?wc3 

Tips på centrering (fyra olika sätt)

Att ladda JavaScript i HTML

Använd <script src="script.js" defer></script> och lägg den i <head> elementet. Filmen ovan förklarar varför.

Ett alternativ är <script src="script.js" type="module"></script>

Mer info om vad skillnaden är mellan olika sätt att läsa i JavaScript finns här

https://gist.github.com/jakub-g/385ee6b41085303a53ad92c7c8afd7a6

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script