k01-basic-html-css-js

Uppgiftsbeskrivning

I denna uppgift ska du följa en befintlig design vilken ska implementeras för en fiktiv kunds räkning. Det som ska byggas är en responsiv personlig webbplats med en portfolio. Utöver att implementera designen så skall även viss funktionalitet skrivas med JavaScript, vidare ska webbplatsen även innefatta grundläggande tillgängligsanpassning.

Ackompanjerande design: https://www.figma.com/file/ezRSVmjx6jtGmTBEaVFoFXA4/k01-design

Mål

Uppgiften skall uppfylla följande mål:

• Webbplatsens HTML & CSS måste gå att validera

• Webbplatsen ska fungera i följande enheter och kommer testas i dem:

  • PC desktop (upplösning 1920x1080p och uppåt)

  • Laptop (upplösning 1280 x 900 och uppåt)

  • Mobil (upplösning 414×746)

• Webbplatsen ska fungera i de senaste versionerna av följande webbläsare och kommer testas i dem:

  • Chrome

  • Firefox

  • Safari

  • Edge

• Webbplatsen grundläggande tillgänglighetsanpassad

  • Följ dessa listor:

    • https://a11yproject.com/checklist

    • https://webbriktlinjer.se/wcag/?checklista

• Webbplatsen ska följa designspecifikation men följande tekniker i CSS måste finnas med:

  • Gradient i CSS

  • Media-queries (se enheter för omfång)

  • Parallax effekt vid scroll

  • En mobilanpassad meny för mindre skärmstorlekar

  • Responsiv typografi (typsnittets storlek anpassas till tillgänglig bredd)

• Webbplatsen skall deployas på din egen studiedomän

• Webbplatsen ska vara skapad helt från grunden med egen HTML & CSS och JavaScript

• Webbplatsen ska även innehålla följande typer av media:

  • Inbäddad video (https://videos.pexels.com/videos/typing-of-codes-854053)

  • Bilder (pexels.com eller unsplash.com)

  • SVG

• Webbplatsen ska uppfylla följande tekniska features som ska implementeras i JavaScript utan något ramverk eller bibliotek:

  • Hämtar dagens citat från ett externt API och visar det på sidan (http://quotes.rest/qod.json, dokumentation https://quotes.rest/#!/qod/get_qod

  • API-kommunikation måste ske med fetch() (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)

Generella krav på arbetsprocess

• Uppgiften måste versionshanteras i Git, inlämningar med en commit i vid inlämning kommer inte godkännas.

• Inlämning ska följa kodstandarder:

  • För JavaScript: http://airbnb.io/projects/javascript/

  • För CSS: http://airbnb.io/projects/css/

  Följ denna guide för konfiguration: https://travishorn.com/setting-up-eslint-on-vs-code-with-airbnb-javascript-style-guide-6eb78a535ba6

Inlämning

Uppgiften ska lämnas in via classroom.github.com i rätt projekt, länk till detta projekt kommer annonseras av läraren i samband med projektets början.

Betygsättning

Den här inlämningen ger underlag för följande kursmål. Där inlämningen helt motsvarar och går att bedöma för de mål som står med svart text och bara delvis de som står med brun text.

• HC 2.1 Webbutveckla responsivt och browseranpassat med HTML och CSS enligt aktuella webbstandarder

• HC 2.2 Utveckla browseranpassad CSS

• HC 2.3 Optimera och validera HTML & CSS

• HC 2.4 Webbutveckla med anpassning för tillgänglighet

• —

• JS 1.1 JavaScript / ECMAScript

• JS 1.4 DOM-manipulation

• JS 1.7 Lexical scope

• JS 1.8 Event handling

• JS 2.1 Utveckla webblösningar med JavaScript

• JS 2.3 Använda befintliga API:er som en komponent i den egna appen

• —

• PG 2.2 Identifiera, formulera, analysera och lösa problem inom programmering

• PG 2.9 Arbeta med versionshantering både enskild och inom ett team

• PG 3.1 Identifiera, formulera, analysera och använda sig av informationssökning för att lösa problem inom programmering

• —

• UD 1.1 Grafik och design för webbsidor

• UD 1.2 UX och användbarhet

• UD 1.5 Personas och målgruppsanalys

• UD 2.1 Ta fram grundläggande grafik och design för webb

• UD 3.1 Arbeta som Fullstack-webbutvecklare med UX och grundläggande design

Godkänd

För att nå Godkänd som betyg på denna inlämning ska du:

• utför alla färdigheter (2.x) som uppgiften har som mål med gott handlag

  • Med gott handlag syftas det till att inlämnad kod ska enhetligt följa standarder för frontend som är angivna i uppgiftsbeskrivningen

Väl godkänd

För att nå Väl godkänd som betyg på denna inlämning ska du:

• utför alla färdigheter (2.x) som uppgiften har som mål med mycket gott handlag

  • Mycket gott handlag omfattar godkänd nivå men inlämning innehåller även utförlig och enhetlig dokumentation för hela kodbasen (i både kod och separat dokumentation)