p

Introduktion

Hit och dit resor.

Vi skall skapa en webbsida åt reseföretaget Hit & Dit Resor. Du har tillgång till allt material som behövs för att bygga hemsidan och vi går igenom alla moment för att skapa denna webbsida.

01 – Introduktion

Vi går igenom förutsättningarna för projektet och tittar på bildmaterialet och skapar ett HTML dokument och en CSS fil för projektet. Vi lägger in startkoden som vi skapat tidigare. Vi kommer att använda programvarorna Brackets och Google Chrome.

Läs mer om startkoden
Ladda ner Brackets
Ladda ner Google Chrome

Läs mer om

HTML
CSS

Sidhuvud & Navigation

02 – Sidhuvud & Navigation

I denna film så börjar vi koda upp själva webbsidan och vi börjar med att skapa sidhuvud sätter in logotypen och skapar navigationen i HTML.

Läs mer om

HTML
CSS

Design av meny

03 – Design av meny

När vi nu har skapat navigationen så är det dags att designa den med hjälp av CSS.

Läs mer om

HTML
CSS

Sidhuvudsbild

04 – Sidhuvudsbild

Vi skall nu sätta in bilden men molen och flygplanet på webbsidan.

Läs mer om

HTML
CSS

Informationsrutor

05 – Informationrutor

Nu skall vi skapa informationsrutor för de tre resmålen på webbsidan. Vi kommer att göra det med hjälp av sections-taggen.

Läs mer om

HTML
CSS

i

Typografi & Google fonts

06 – Typografi & Google fonts

För att texten på webbsidan skall blir mer lättläst och fundera bättre med den övriga designen så skall vi ta hjälp av tjänsten Google Fonts och använda oss av nya typsnitt som laddas direkt från Google.

Länkar
Google Fonts

Läs mer om

HTML
CSS

Kartor från Google Maps

07 – Google maps

Som reseföretag så skall vi ha med kartor som visar vart man kan resa, vi tar hjälp från Google Maps för att bädda in kartor som är interaktiva.

Länkar
Google Maps

Läs mer om

HTML
CSS

Sidfoten / Footer

08 – Sidfot / Footer

Vi bygger sidfoten i denna film och vi skapar olika boxar för informationen att finnas i. Vi skapar DIV taggar som vi ger en gemensam klass för att styra utseendet från en och samma CSS-regel.

Läs mer om

HTML
CSS

09 – Sidfot / Footer del 2

I denna avslutande film så lägger vi in materialet i sidfoten. Vi skapar länkar till olika sociala nätverk och vi lägger in kontaktinformationen.

Läs mer om

HTML
CSS