Skapa en hemsida med information till eleverna i Gemini

Det finns många fördelar med en egen hemsida. Framförallt är det du som äger koden. Förr tog det timmar, ibland dagar, att handknacka fram en snygg sida. Numera gör en AI jobbet på några sekunder.

Olika AI fungerar på olika sätt. I det här exemplet används Gemini. Claude fungerar ungefär likadant.

Innan du en börjar be Gemini om kod måste du fundera över hur sidan ska visas. Har du en egen domän, eller ska du använda Google Sites som oftast finns med i skolornas olika googlepaket?

1 Var finns exemplen?

Börja med att försöka hitta en gratis mall, eller "template", av den sida du är ute efter. Sökord kan vara: free HTML "single page" template. Det är viktigt att den är gratis eftersom företagen som skapar mallar bevakar internet svartsjukt. Det är också viktigt att den är baserad på HTML, eftersom du vill ha en enkel sida. För enkelhetens skull är det även bra om sidan är "single page" annars får du lätt fram en mall för flera sidor samtidigt och det vill du inte.

Jag gick in på https://freehtml5.co/ och letade upp mallen "Moon" som exempel: https://freehtml5.co/moon-free-minimal-multipurpose-bootstrap-template/ Den är baserad på "Bootstrap" som fungerar bra både på fristående sidor och i Google Sites. Det är visserligen en äldre version av Bootstrap, version 4, men för en enkel sida har det ingen större betydelse. Det finns en "live preview" på sidan så att du kan se hur den ter sig i verkligheten, det är vanligt bland företag som hanterar templates. Tyvärr fungerar inte preview på den här mallen...

Tryck på knappen för att ladda ner din template. Du blir ombedd att ange en e-mailadress. Sedan kan du ta hem mallen. Den kommer i en zip-fil (min heter moon.zip). Packa inte upp den, det gör Gemini åt dig. Om Windows packar upp den automatiskt får du markera alla filer i den när du laddar upp filer i Gemini. Det blir litet mer omständligt, men det går också bra.

Det fungerar ungefär likadant på alla mallsidor.

2 Skapa en testsida i Gemini

För att skapa sidor ska du ställa in "Canvas" i Gemini. Ladda sedan upp din zip-fil till Gemini, eller de filer som zip-filen innehöll om Windows packat upp den automatiskt.

Prompt

Skapa en sida åt mig.
Den ska innehålla samma text  och samma bilder som som denna sida: https://www.grundskoleboken.se/wiki/F%C3%B6rsta_v%C3%A4rldskriget,_skottet_i_Sarajevo
Du får bara använda HTML, CSS, javascript och basmallen från Bootstrap 4.