Ö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

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