<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=x, initial-scale=1.0">
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<button>Ingen Layout</button>
<button>Vertikal layout</button>
<button>Horisontal layout</button>
<button>Grid layout</button>
<h1>Eksempel 1</h1>
<div id="tekstDiv">Start Tekst Her</div>
<button onclick="oppdaterTekst()">Trykk på knappen for å oppdatere tekst</button>
<div id="cards">
<div class="card">
<div class="header green">
Verktøy
</div>
</div>
</div>
<div class="card">
<div class="innerCard">
De to viktigste verktøyene vi skal bruke er disse:
<ul>
<li>
Koderedigeringsprogrammet <a href="https://code.visualstudio.com/">Visual Studio Code</a>
<br>
Vi skal bruke noen <i>extensions</i>:
<ul>
<li>JavaScript-booster</li>
<li>es6-string-html</li>
<li>live-server</li>
<li>live-share</li>
</ul>
</li>
<li>Nettleseren <a href="https://www.google.com/intl/no/chrome/">Chrome</a></li>
</ul>
</div>
</div>
<div id="cards">
<div class="card">
<div class="header blue">
HTML
</div>
</div>
</div>
<div class="card">
<div class="innerCard">
Vi bruker HTML til å definere et dokument.
<ul>
<li>Tagger for grunnleggende oppsett av en HTML-fil</li>
<li>Tagger for grunnleggende formatering av tekst</li>
<li><tt><div></tt></li>
<li><tt><input type="text"></tt></li>
<li><tt><button></tt></li>
<li><a href="https://www.w3schools.com/html/default.asp" target="_new">W3Schools HTML Tutorial</a>
</li>
<li><a href="https://www.w3schools.com/tags/default.asp" target="_new">W3Schools HTML Reference</a>
</li>
</ul>
</div>
</div>
<div id="cards">
<div class="card">
<div class="header red">
CSS
</div>
</div>
</div>
<div class="card">
<div class="innerCard">
Vi bruker CSS til å <i>style</i> et dokument, altså farger, fonter, utseende og lignende.
<ul>
<li><tt>background-color</tt></li>
<li><tt>color</tt></li>
<li><tt>padding</tt></li>
<li><tt>margin</tt></li>
<li><tt>border</tt></li>
<li><tt>text-align</tt></li>
<li><tt>font-size</tt></li>
<li><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_new">Flexbox</a></li>
<li><a href="https://css-tricks.com/snippets/css/complete-guide-grid/" target="_new">Grid</a></li>
<li><a href="https://www.w3schools.com/css/default.asp" target="_new">W3Schools CSS Tutorial</a>
</li>
<li><a href="https://www.w3schools.com/cssref/default.asp" target="_new">W3Schools CSS Reference</a>
</li>
</ul>
</div>
</div>
<div id="cards">
<div class="card">
<div class="header yellow">
JavaScript
</div>
</div>
<div class="card">
<div class="innerCard">
Det viktigste vi skal lære er programmeringsspråket JavaScript. Vi skal lære grunnleggende programmering
ved
å manipulere HTML- og CSS-kode på en nettside ved hjelp av JavaScript.
<ul>
<li>Det finnes en W3Schools JavaScript Tutorial, men her anbefaler vi heller å følge kurset vårt på
Moodle.</li>
<li><a href="https://www.w3schools.com/jsref/default.asp" target="_new">W3Schools JavaScript
Reference</a></li>
</ul>
</div>
</div>
</div>
<div id="cards">
<div class="card">
<div class="header dark">
Hode, kropp og ben
</div>
</div>
<div class="card">
<div id="head" class="bodyPart">
<button onclick="selectHead4()">◀</button>
<img src="img/head1.png">
<button onclick="selectHead2()">▶</button>
</div>
<div id="body" class="bodyPart">
<button onclick="selectBody4()">◀</button>
<img src="img/body1.png">
<button onclick="selectBody2()">▶</button>
</div>
<div id="legs" class="bodyPart">
<button onclick="selectLegs4()">◀</button>
<img src="img/legs1.png">
<button onclick="selectLegs2()">▶</button>
</div>
</div>
</div>
</body>
</html>