Jeg har valgt at fokusere på hvordan man udvikler en hjemmeside ved hjælp af HTML og CSS.
Jeg havde forhåbninger og forventninger til at man gerne måtte skrive sit eksamensprojekt med denne indgangsvinkel og det var jeg super glad for at få bekræftet da vi skulle til at igang, jeg er klart mest glad for kodning og det med at nørde er lige mig så at få lov at udvikle hjemmesider og skrive om det havde jeg slet ikke noget imod.
Jeg endte ud med at have en mappe af filer som jeg uploadede via Fileazilla, Filezilla er et FTP program, FTP står for File transfer protocol og som navnet ligger op til bliver det brugt til at overføre filer til en server.
Lidt ligesom at HTTP(HyperText transfer protocol) bliver brugt til at kommunikere med webservere.
Her er de filer jeg endte med at have:
Og her kan du se hvordan det endelige resultat ser ud:
Jeg vil også gerne vise et lille udkast af min kode så du får en idé om hvad jeg har arbejdet med:
<!DOCTYPE html>
<html lang="da" dir="ltr">
<head>
<title>Portfolio</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="forside">
<!-- Billeder brugt på forside er hentet fra pixabay.com -->
<section class="projects">
<div class="grid">
<a href="index.html">
<div class="column">
<h3>Forside</h3>
<div class="overlay"></div>
<img src="images/project.jpg" alt="Portfolio">
</div>
</a>
@font-face {
font-family:'nexah';
src: url(fonts/NexaHeavy.ttf);
}
body {
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: auto auto auto;
grid-template-areas:
'header'
'main'
'footer';
background-color: #171716;
font-family: nexah;
text-align: center;
display: flex;
flex-direction: column;
letter-spacing: 0.1em;
}
header.item1 {
grid-area: header;
width:100%;
height: 100px;
}
nav.headmenu {
display: flex;
justify-content: flex-start;
align-items: center;
position: relative;
margin-left: 50px;
}
Det er HTML kode på venstre side fra min index.html(forside) og CSS kode på den højre side fra min style.css.
Comments are closed