Discover Top Posts Tagged with #brief 4

Brief 4: Kreativt Internett

"Lag en liten personlig nettside" aka PROGRAMMERING

Brukte eeeevigheter på å sette meg inn i html og CSS-koding, men absolutt et godt utgangspunkt for videre utvikling!

Brief 4: Kreativt internett

Endelig fikk jeg bruk for alle veranda bildene jeg har samlet opp. Koding var skikkelig vanskelig, og det var rart å skulle gjøre grafisk design også gjennom koding. Veldig gøy å prøve å forstå seg på hvordan nettsider er bygget opp, følte veldig på at nettsider jeg bruke på dag daglig basis ga mer mening, at jeg kunne se gjennom. Kul uke, vanskelig, men desto større mestringsfølelse. Skulle ønske vi hadde mer tid.

#brief 4

Brief 4

HTML/CSS-uke

I introduksjonsuken til HTML/CSS skulle vi lage en nettside som "handler om noe vi liker eller noe som er meg". Jeg bestemte meg for å lage en interaktiv nettside kalt "Coconut". Nettsiden tar deg med på min reise for å finne en kokosnøtt, hvor du som bruker blir med på reisen og deltar i beslutningene underveis. Reisen handler om oss som drar rundt i Jaffna, en by nord på Sri Lanka, og forsøker å finne en kokosnøtt å nyte i solen.

Koden ble bugga og jeg har mistet noen delen av nettsiden. nettsiden er designet med 150% screen scale. da blir nettsiden rar på de fleste pcer. men her er linken til en halv fungerende nettside

http://127.0.0.1:3000/home%20page/min.html

#brief 4

første HTML nettside

carls brødblogg er mitt første forsøk på å kode med HTML. jeg valgte å lage en brødblogg fordi jeg bakte veldig mye på denne tiden.

jeg må innrømme at jeg syntes det var ganske frustrerende å holde på med. men det var gøy å teste å legge inn ulike animasjoner og hover effekter (når jeg fikk det til!).

er glad for å ha litt grunnkunnskaper om HTML, slik at jeg kan kode en litt spennende nettside til ulike prosjekter i fremtiden.

#Youtube #brief 4

Brief 4 Nettside

Etter app-design gikk vi over til å lære koding. Spesifikt html og css.

I brief 4 fikk vi i oppgave å bare leke litt med html og css for å forstå hvordan det funket, og bare lage en morsom nettside om hva vi ville, eller en typ CV-/ Portefølje-nettside.

Jeg valgte å lage en liten nettside om the office som jeg så på i den perioden.

Den hadde litt forskjellige html og css triks som vi hadde lært, en hjemmside med kort informasjon om serien og noen av hoved-skuespillerene,

en link til første episode på Netflix og en liten ekstra side på nettsiden som anbefalte to serier som ligner litt, og man kanskje vil like om man synes the office er morsomt.

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

Først er html koden til nettsiden min:

<!DOCTYPE html>

<!--Fikk ikke favicon delen til å fungere i dokumentet, brukte alle disse metodene, men ingen funket:

</head> <body>

<header> <p> The office </p> </header>

<ul>

<li><a href="https://www.netflix.com/watch/70105212?trackId=255824129&tctx=0%2C0%2CNAPA%40%40%7C00418210-0292-4b66-942b-52cb044e3950-14124282_titles%2F1%2F%2Fthe%20office%2F0%2F0%2CNAPA%40%40%7C00418210-0292-4b66-942b-52cb044e3950-14124282_titles%2F1%2F%2Fthe%20office%2F0%2F0%2Cunknown%2C%2C00418210-0292-4b66-942b-52cb044e3950-14124282%7C1%2CtitlesResults%2C70136120%2CVideo%3A70136120">Netflix</a></li>

<li><a href="shows.html">Similar shows</a></li>

</ul>

<h1> Hvorfor?</h1>

<p>

Korte episoder.

<br>

Jeg vil prokrastinere

</p>

</div>

<h2>Some of the characters</h2>

<br>

<b>Michael Scott</b> played by <span>Steve Carell</span>

<br>

<br>

<b>Dwight Schrute</b> played by <span>Rainn Wilson</span>

<br>

<br>

<b>Pam Beesly</b> played by <span>Jenna Fischer</span>

<br>

<br>

<b>Jim Halpert</b> played by <span>John Krasinsky</span>

<br>

<br>

<b>Stanley Hudson</b> played by <span>Leslie David Baker</span>

<br>

<br>

<b>Kevin Malone</b> played by <span>Brian Baumgartner</span>

</p>

</div> </body> </html>

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

Deretter er det html dokumentet til side nr 2 på den lille nettsiden min om the office:

<!DOCTYPE html>

</head> <body> <header> <p> The office </p> </header> <div class="container">

<ul>

<li><a href="#">Similar shows</a></li>

</ul>

<p>

<ul>

<li> - WHAT WE DO IN THE SHADOWS</li>

<br>

<li>- BROOKLYN 99</li>

</ul>

</p>

</div>

</body>

</html>

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

Til slutt er det css dokumentet til html-dokumentene mine:

header p { background: rgba(255, 255, 255, 0.5); border: 1px; padding: 20px; margin: 50px 70px 40px 10%; display: inline-block; font-size: 50px; color: white; } body { background-image: url(http://lokagraph.com/wp-content/uploads/2018/05/dunder-Mifflin-building-the-office-where-location.jpg); font-family: roboto; }

@keyframes dwightanimation{ 0% {padding-left: 0%;}50% {padding-left: 50%;}100% {padding-left: 0%;}}

.dwight{

width: 30px;

height: 30px;

background-image: url(Img/dwightpng.jpeg);

background-size: cover;

background-position:center;

animation-name: dwightanimation;

animation-duration: 8s;

animation-timing-function: ease-in-out;

animation-iteration-count: infinite;}

.container{ height: auto; display: flex; padding-left: 8%; padding-right:8%; box-sizing: border-box;}

.nav ul { display:inline-block; background-color: rgba(255, 255, 255, 0.5); padding: 10px; list-style: none; }

.nav li { display: inline; list-style: none; font-size: 30px; margin-left: 50px; margin-right:50px;}

.nav li a { text-decoration: none; color:blue}

.box{ display: flex; height: 125%; align-items: center; }

.tekst{ padding:20px; flex-basis: 50%; background-color: rgba(255, 255, 255, 0.5);}

/* jeg prøver å få litt bakgrunnsfarge bak i hvertfall skrifteni gallery for å gjøre det mer leselig, men den dukker ikke opp :.( */

.gallery { align-items: center; text-align: center; font-size: larger; margin:5% 0 0 30%; background-color:rgba(255, 255, 255, 255, 0.5);}

.gallery span { color: blue;}

.gallery img{ height: 30%; width: 30%; background-color:rgba(255, 255, 255, 255, 0.5);}

.characters{ padding: 5px; color: aliceblue; background-color:rgba(255, 255, 255, 255, 0.5);}

.kasse{ display:inline-block; height: 125%; align-items: left; }

.skrift{ padding:20px; flex-basis: 50%; background-color: rgba(255, 255, 255, 0.5);}

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

Her er de fleste bildene jeg brukte, ikke alle ville la seg laste opp her på tumblr, men de fleste vises under her:

#brief4 #nettside #website #brief 4 #the office #theoffice #html #css #koding #coding

Kreativt-internett uke 2

The MINDSWEEPER.

Mindsweeper er en nettside hvor en kan se litt gjennom hva mine og Carine sine øyne har blitt eksponert for i det store internett. Så selve nettsiden er inspirert av en shady pop up ad som noen ganger bare dukker opp ved at du trykker på en litt shady link, men hovedsakelig er det en prototype på et spill som er lånt fra minesweeper spillet. det er samme opplegget, men i stedet for tall og rom som beskriver hvor bombene er, er det nostalgiske nettsider fra tidlig 2000-tallet. og i stedet for bomber er det PG-18 content. siden er fylt med shady screenshot av gamle pop up annonser.

her er bilder av nettsiden og meste parten av koden.

#kreativtinternett #brief 4 #html #css

Brief 4: Kreativt internett 1

Slutt produktet for uke 1 av KreativtInternett kurset. Dette er en nettside om kakene jeg har laget, hvor nettsiden er laget i HTML og CSS.

Litt prosess bilder. Mye som kan gå og gikk galt her, men klarte til slutt å ordne opp i det.

Var litt vanskelig i begynnelsen, siden jeg har aldri prøvd å kode noe, men det var gøy å se hvordan html og css funker.

Dette var det vi gjorde første dagen hvor vi fulgte med på hva Erik gjorde. Her har vi en nydelig nettside.

#Uke 1 #Brief 4 #Kreativtinternett

Brief 4: Kreativt Internett

Første forsøk på Html og Css 🤪

#html #css #webdesign #brief 4

Brief 4 Nettside

Etter app-design gikk vi over til å lære koding. Spesifikt html og css.

I brief 4 fikk vi i oppgave å bare leke litt med html og css for å forstå hvordan det funket, og bare lage en morsom nettside om hva vi ville, eller en typ CV-/ Portefølje-nettside.

Jeg valgte å lage en liten nettside om the office som jeg så på i den perioden.

Den hadde litt forskjellige html og css triks som vi hadde lært, en hjemmside med kort informasjon om serien og noen av hoved-skuespillerene,

en link til første episode på Netflix og en liten ekstra side på nettsiden som anbefalte to serier som ligner litt, og man kanskje vil like om man synes the office er morsomt.

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

Først er html koden til nettsiden min:

<!DOCTYPE html>

<!--Fikk ikke favicon delen til å fungere i dokumentet, brukte alle disse metodene, men ingen funket:

</head> <body>

<header> <p> The office </p> </header>

<ul>

<li><a href="shows.html">Similar shows</a></li>

</ul>

<h1> Hvorfor?</h1>

<p>

Korte episoder.

<br>

Jeg vil prokrastinere

</p>

</div>

<h2>Some of the characters</h2>

<br>

<b>Michael Scott</b> played by <span>Steve Carell</span>

<br>

<br>

<b>Dwight Schrute</b> played by <span>Rainn Wilson</span>

<br>

<br>

<b>Pam Beesly</b> played by <span>Jenna Fischer</span>

<br>

<br>

<b>Jim Halpert</b> played by <span>John Krasinsky</span>

<br>

<br>

<b>Stanley Hudson</b> played by <span>Leslie David Baker</span>

<br>

<br>

<b>Kevin Malone</b> played by <span>Brian Baumgartner</span>

</p>

</div> </body> </html>

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

Deretter er det html dokumentet til side nr 2 på den lille nettsiden min om the office:

<!DOCTYPE html>

</head> <body> <header> <p> The office </p> </header> <div class="container">

<ul>

<li><a href="#">Similar shows</a></li>

</ul>

<p>

<ul>

<li> - WHAT WE DO IN THE SHADOWS</li>

<br>

<li>- BROOKLYN 99</li>

</ul>

</p>

</div>

</body>

</html>

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

Til slutt er det css dokumentet til html-dokumentene mine:

@keyframes dwightanimation{ 0% {padding-left: 0%;}50% {padding-left: 50%;}100% {padding-left: 0%;}}

.dwight{

width: 30px;

height: 30px;

background-image: url(Img/dwightpng.jpeg);

background-size: cover;

background-position:center;

animation-name: dwightanimation;

animation-duration: 8s;

animation-timing-function: ease-in-out;

animation-iteration-count: infinite;}

.container{ height: auto; display: flex; padding-left: 8%; padding-right:8%; box-sizing: border-box;}

.nav ul { display:inline-block; background-color: rgba(255, 255, 255, 0.5); padding: 10px; list-style: none; }

.nav li { display: inline; list-style: none; font-size: 30px; margin-left: 50px; margin-right:50px;}

.nav li a { text-decoration: none; color:blue}

.box{ display: flex; height: 125%; align-items: center; }

.tekst{ padding:20px; flex-basis: 50%; background-color: rgba(255, 255, 255, 0.5);}

/* jeg prøver å få litt bakgrunnsfarge bak i hvertfall skrifteni gallery for å gjøre det mer leselig, men den dukker ikke opp :.( */

.gallery { align-items: center; text-align: center; font-size: larger; margin:5% 0 0 30%; background-color:rgba(255, 255, 255, 255, 0.5);}

.gallery span { color: blue;}

.gallery img{ height: 30%; width: 30%; background-color:rgba(255, 255, 255, 255, 0.5);}

.characters{ padding: 5px; color: aliceblue; background-color:rgba(255, 255, 255, 255, 0.5);}

.kasse{ display:inline-block; height: 125%; align-items: left; }

.skrift{ padding:20px; flex-basis: 50%; background-color: rgba(255, 255, 255, 0.5);}

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

Her er de fleste bildene jeg brukte, ikke alle ville la seg laste opp her på tumblr, men de fleste vises under her:

#brief4 #nettside #website #brief 4 #the office #theoffice #html #css #koding #coding

#brief 4

Trending Tags

Recently Viewed Tags

#brief 4