fbpx

Skapa en hero image

En hero image visas oftast på startsidan på en webbplats längst upp och innehåller någon typ av info som ska fånga användarens intresse. Denna utmaning går ut på att skapa din egna hero image med en bakgrundsbild, rubriker, knapp och styling. Skapa en hero image till din hemsida, eller varför inte skapa starten till din egna portfolio? Du bestämmer!

Få hjälp med kodningen!

 Den 9:e december 12:00-12:30 höll UX-designern Jennifer från ESSIQ i en code-along på denna kodutmaning. Du kan kika på inspelningen via knappen nedan. Glöm inte att gå med i vår Slack-kanal och få hjälp av communityt.

1. Såhär startar du

Skapa ett gratis konto på Github, gå sedan in på vår Github-sida här , tryck på uppe till höger. Nu har du kopierat koden över till din användare på Github. För att ladda ned koden på din dator och starta utmaningen trycker du sedan på och download zip. Färdig!

 Vi rekommenderar att du använder Visual studio code som editor. Det är gratis och går att ladda ned👉 här . Inuti filerna finner du några kommentarer som kan hjälpa dig på vägen till att lösa utmaningen. Du kan även läsa nedan för tips och trix! 

 

 

2. Tips & trix

  • Läs om grunderna för Hero Image på w3Schools här.  

  • Kolla in hur andra har byggt sina Hero Images här för inspiration 💡. 

  • Om du vill använda bilder kan du hämta gratis på bland annat Pixabay eller Unsplash.

3. Inspiration

"Som nog många andra så har min väg inte vart helt rak"

Jennifer jobbar som UX-designer på teknikkonsultbolaget ESSIQ och kommer under december köra en code-along visa sin version på att Skapa en hero image. Med en bakgrund inom datateknik är hon också kunnig inom programmering, men valde att gå en annan väg. Läs mer om Jennifers bakgrund och hur en vanlig arbetsdag kan se ut. 

Läs intervjun med Jennifer här

4.  Få feedback på din kod

  • Så här gör du

    De 20 första som lämnar in sina kodfiler innan den 20:e december får feedback på sin kod av utvecklare från Technigo. För att få feedback krävs det att du lägger upp din lösning på Github. Men det är inte så krångligt som du tror, följ instruktionerna i flikarna här ovanför, antingen med hjälp av video eller text. 

     

    Har du lyckats bli en av de 20 första att lämna in  kodutmaningen kommer du att bli notifierad om det i GitHub 👏.

  • INSTRUKTIONER I VIDEO

    Kolla igenom denna videon.

  • INSTRUKTION i TEXT

    1. Gå in på ditt konto i GitHub och välj fliken "repositories". Leta upp utmaningen som du en gång forkade och klicka in på den.

    2. Väl inne på utmaningen på GitHub, på ditt konto - dra kodfilerna från din dator och släpp de i detta fönster (var som helst).

    3. Filerna laddas nu upp på din GitHub, skrollar du ned finner du en ruta med rubriken "Commit changes". Skriv någon kommentar om du vill, tryck sedan den gröna knappen "commit changes".

    4. Tryck sedan "New pull request". Då ser du vilka ändringar du har gjort i koden. Tryck "Create pull request" två gånger i rad. Tadaaa, färdig!

5. Visa världen din lösning!

Självklart vill vi se din lösning, dela den gärna på vår Instagram under hashtaggen #kodutmaningen eller i vår Slack-kanal här.  

Och du, passa på att utmana din vän - dela kodutmaningen 💪. 

Grymt jobbat, vilken utmaning!  🎉👏

Tjejer Kodar är ett initiativ organiserat av Technigo AB.

Org. nr 559051-8030, Åsögatan 122, 116 24 Stockholm

Kontakt på hello@tjejerkodar.se