I dagens uppgift ska ni designa om förstasidan på zoom.us för att göra den mer användarvänlig.
- Öppna en terminal och gå med
cddär du vill skapa projektet. - Skriv
npm create vite@latest zoom-redesign - Välj Vanilla js och sen Javascript i följande frågor.
- Gör resten enligt förra workshopen
Ni skapar en förenklad version av zooms hemsida så ni behöver inte ha med allt innehåll på sajten, men ta med minst 2 sektioner utöver navigation och hero-sektionen.
Välg elegant, lekfullt eller seriöst. Utgå från typsnitt och färger som passar er stil.
Var noga med att skapa en hieraki för varje del av sajten. Vad ska man fokusera på och hur åstadkommer man det?
Ett sätt att få till en hierarki är att använda olika text-storlek, text-tjocklek och text-färg. Använd två tjocklekar på text: 400 och 700. Använd 2 färg-nyanser för text på vit bakgrund och 2 färg-nyanser av text på mörk bakgrund.
Använd inbyggda avstånd och text-storlekar från tailwind. Var noga med att saker linjerar med varandra.
Navigeringen ska vara på en rad. Knapparna i navigeringen ska tonas ner så att dom inte konkurrerar med knappen i Main Lockup
Behåll en Main Lockup (Huvudrubrik, underrubrik och knapp med call to action). Använd max 3 delar i Hero-sektionen. Om ni vill kan ni använda nya bilder eller illustrationer. T.ex. business illustrations
Gör sajten responsiv så att den funkar både på mobil och desktop.
- Skapa ett repo på github.
- Ladd up dina filer till github:
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin <Adressen till ditt repo>
git push -u origin main
- Klicka på uppgiften i canvas och ange länken till ditt repo.
Efter denna uppgift ska ni kunna analysera en hemsida och komma med förslag på förbättringar.
Klar? Här är lite mer att göra:
- Lägg till "Ready to get started?"-sektionen
- Lägg till en footer med valfritt innehåll
- Skapa sidor till alla länkar med valfritt innehåll