ÖVNINGAR

HTML övningar

Enkel webbsida (enkel)

Skapa en enkel webbsida med en rubrik, ett stycke text och en bild
Live Demo

Favoritlänkar (enkel)

Skapa en lista med länkar till sajter du gillar.
Live Demo

Kontaktformulär - Enbart HTML (enkel)

Skapa ett enkelt kontaktformulär
Live Demo

CSS övningar

Enkel webbsida med CSS (enkel)

Skapa en enkel webbsida med en rubrik, ett stycke text och en bild.
Ändra teckensnitt till Verdana.
Ändra teckenfärg på rubriken till brown.
Centrera sidan genom att ange max-width:800px och margin:auto på body.
Live Demo

Favoritlänkar med CSS (enkel)

Skapa en lista med länkar till sajter du gillar.
Formatera länkarna med CSS.
Ta bort understrykning och ändra bakgrundsfärg vid överrullning (hover).
Live Demo

Kontaktformulär - HTML & CSS (enkel)

Skapa ett enkelt kontaktformulär
Formatera formuläret med CSS.
Live Demo

Flexbox (enkel)

Skapa en enkel webbsida med en huvudrubrik (h1) och två kolumner.
Varje kolumn ska ha en rubrik (h2), ett stycke text och en bild.
Använd Flexbox. https://www.w3schools.com/css/css3_flexbox.asp
Live Demo

Bootstrap övningar

Bootstrap Gridsystem (enkel)

Använd Bootstrap gridsystemet för att skapa en layout med 3 kolumner.
Live Demo

Produkter i Bootstrap Gridsystem (enkel)

Använd gridsystemet i Bootstrap för att skapa en layout med 3 kolumner.
Varje kolumn ska presentera en produkt.
Använd kortklasser (Card) i Bootstrap för att formatera produkterna.
Live Demo

Bootstrap Responsiv Gridsystem (enkel)

Använd gridsystemet i Bootstrap för att skapa en layout med flera kolumner.
Visa 3 kolumner på medelstora enheter (t.ex. surfplattor)
Visa en kolumn på mindre enheter (t.ex. mobiltelefoner)
Live Demo (OBS! Du behöver ändra webbläsarens storlek för att testa)

Bootstrap Responsiv Gridsystem (medel)

Använd gridsystemet i Bootstrap för att skapa en layout med flera kolumner.
Visa 4 kolumner på stora enheter (t.ex. standard datorer)
Visa 3 kolumner på medelstora enheter (t.ex. surfplattor)
Visa en kolumn på mindre enheter (t.ex. mobiltelefoner)
Live Demo (OBS! Du behöver ändra webbläsarens storlek för att testa)

Bootstrap Contact Form (enkel)

Skapa ett enkelt kontaktformulär
Använd bootstrap klasser för att få en snygg layout.
Live Demo

PHP övningar

Beräkna medelvärdet (enkel)

Skapa en applikation som frågar efter poäng på tre olika prov.
Beräkna medelvärdet av alla tre poängen.
Visa medelvärdet på sidan.
Om medelvärdet är över 90, skriv också ut "Bra jobbat".
Live Demo

Gissa ett nummer v1 (enkel)

Skapa ett spel som låter dig gissa ett nummer som datorn tänker på.
Live Demo

Gissa ett nummer v2 (enkel)

Skapa ett spel som låter dig gissa ett nummer som datorn tänker på.
Lägg till Bootstrap och valfria CSS-formateringar.
Live Demo

Gissa ett nummer v3 (svår/överkurs)

Skapa ett spel som låter dig gissa ett nummer som datorn tänker på.
Lägg till Bootstrap och valfria CSS-formateringar.
Låt datorn slumpgenerera ett tal mellan 1 och 100.
Tips:
Använd PHP rand.
https://www.w3schools.com/php/func_math_rand.asp
Använd PHP Session för att lagra antal försök.
https://www.w3schools.com/php/php_sessions.asp

Live Demo

Slå en tärning (enkel)

Skapa ett spel som låter användaren slå en tärning.
När användaren har slagit tärningen ska sidan visa resultatet.
Live Demo

Slå två tärningar (enkel)

Skapa ett spel som låter användaren slå två tärningar.
När användaren har slagit tärningarna ska sidan visa resultaten och summera dem.
Live Demo

Spela Tärningstris (svår/överkurs)

Skapa ett spel där användaren måste försöka få en linje av tre identiska tärningar.
Tip: Använd sessioner i PHP https://www.w3schools.com/php/php_sessions.asp
Live Demo

Dra ett kort (enkel)

Skapa ett spel som låter användaren slå ett kort från en kortlek.
När användaren har slagit kortet ska sidan visa kortet.
Live Demo

MySQL övningar

Nyhetsbrev (enkel)

Skapa en databas för att lagra anmälningar till ett nyhetsbrev.
Skapa ett formulär enligt nedan!
Spara alla anmälningar (e-post) i databasen.

Anmäl dig till vårt nyhetsbrev

Intresseanmälan (enkel)

Skapa en databas för att lagra intresseanmälningar till den här kursen/utbildningen.
Spara: Namn och E-post
Skapa ett formulär enligt nedan!
Spara alla anmälningar i databasen.

Anmäl intresse för den här utbildningen!

Inköpslista (medel)

Skapa en enkel inköpslista.
Man ska kunna lagra artiklar i en MySQL-databas.
Visa en lista på artiklarna på webbsidan.
Skapa en knapp som tar bort en artikel från databasen.
Live Demo

Telefonlista (medel)

Skapa en enkel telefonlista.
Man ska kunna lagra namn och telefonnummer i en MySQL-databas.
Visa en tabell på webbsidan.
Skapa en knapp som tar bort en kontakt från databasen.
Live Demo

Gästbok (svår/överkurs)

Skapa en enkel gästbok där besökare kan lämna kommentarer.
Gästboken ska lagra kommentarerna i en MySQL-databas och visa dem på webbplatsen.
Live Demo

JavaScript övningar

Aktuellt år (enkel)

Visa det aktuella året på din webbsida med JavaScript.
Live Demo

Ålderberäknare (enkel)

Skapa en applikation som ber användaren mata in sitt födelseår via ett input-fält.
När användaren trycker på "Beräkna" knappen, räknar JavaScript ut användarens ålder genom att subtrahera födelseåret från det aktuella året och visar resultatet på sidan.
Om användaren anger ett födelseår som är större än det aktuella året, visas ett felmeddelande.
Live Demo

Momsberäknare (enkel)

Skapa en applikation som ber användaren mata in ett pris exkl. moms via ett input-fält.
När användaren trycker på "Beräkna" knappen, räknar JavaScript ut priset inkl. moms.
Live Demo

Digital Klocka (medel)

Skapa en digital klocka som visar den aktuella tiden på din webbplats.
Tips: Använd funktionen setInterval.
https://www.w3schools.com/jsref/met_win_setinterval.asp
Live Demo