https://github.com/rebeckakinn/webinar_oppgave

En enkel oppgave man kan bruke for å prøve seg frem på å sette opp en nettside med HTML og JS
https://github.com/rebeckakinn/webinar_oppgave

assignment beginner beginner-friendly beginner-project css css3 first-project first-timers html html-css-javascript html5 javascript norwegian students webinar

Last synced: 5 months ago
JSON representation

En enkel oppgave man kan bruke for å prøve seg frem på å sette opp en nettside med HTML og JS

• Host: GitHub
• URL: https://github.com/rebeckakinn/webinar_oppgave
• Owner: RebeckaKinn
• Created: 2025-06-23T07:59:38.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2025-06-23T11:04:53.000Z (5 months ago)
• Last Synced: 2025-06-23T11:49:34.393Z (5 months ago)
• Topics: assignment, beginner, beginner-friendly, beginner-project, css, css3, first-project, first-timers, html, html-css-javascript, html5, javascript, norwegian, students, webinar
• Language: JavaScript
• Homepage:
• Size: 10.7 KB
• Stars: 1
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# NO: Velkommen til kodeverkstedet! 

Du har nå fått et lite utgangspunkt for en nettside, og målet er enkelt: **Lek deg frem og utforsk hvordan nettsiden er bygd opp**!  

Du trenger ingen forkunnskaper – bruk nysgjerrighet som verktøy.

---

## 🧱 Hva inneholder prosjektet?

Du har tre filer du kan åpne i Visual Studio Code:

### `index.html`

Dette er selve rammeverket til nettsiden. Her kobles både stil (CSS) og funksjonalitet (JavaScript) til.

### `script.js`

Denne filen lager innholdet på nettsiden med JavaScript. Innholdet legges inn når funksjonen `renderPage()` kjøres.

### `style.css`

Her bestemmes utseendet. For eksempel hvordan bildet ser ut, farger, plassering osv.

📸 Det ligger også et par bilder i mappen du kan bruke på nettsiden!

---

## 🔍 Prøv dette

Du velger selv hva du vil teste, men her er noen forslag til hva du kan gjøre:

### 1. Endre innholdet

- Gå inn i `script.js`

- Finn funksjonen `createMain()`

- Endre teksten i `
` og `
` slik at det står ditt navn og en velkomstmelding du lager selv


### 2. Bytt profilbilde

- I samme funksjon ligger det et ``-element

- Endre filnavnet i `src="..."` til et annet bilde i mappen (eller legg inn et nytt bilde selv!)

### 3. Legg til noe nytt

- Prøv å legge til et ekstra avsnitt (`

`) eller et nytt bilde i `createMain()` eller `createFooter()`

- Du kan bruke vanlig HTML inne i tekstblokkene i JavaScript

### 4. Gi nettsiden din egen stil

- Åpne `style.css`

- Prøv å endre:

  - Fargen på bakgrunnen (`background-color`)

  - Størrelsen på teksten (`font-size`)

  - Kantlinjer, marger, rammer – bare prøv deg frem!

---

## 💡 Tips

- Hvis noe **ikke** funker: Det er helt vanlig! Se etter små feil som manglende semikolon, feil bildefilnavn, `{}` som mangler osv.

- Bruk nettleseren til å sjekke hvordan nettsiden ser ut – og **oppdater siden hver gang du lagrer**!

- Du trenger ikke gjøre *alt* – velg det som virker gøy eller spennende for deg.

---

## 🎯 Målet

Bare kos deg med å **rote litt i koden** og bli kjent med hvordan HTML, CSS og JavaScript henger sammen.  

Kanskje dette er noe for deg?

# EN: Welcome to the Web Coding Workshop! 

You've been given a simple starting point for a basic website. The goal is easy: **play around and explore how a website is built**!

No coding experience needed — just curiosity.

---

## 🧱 What's in the project?

Your project folder includes three key files. Open them in Visual Studio Code:

### `index.html`

This is the structure of the webpage. It links together the style (CSS) and functionality (JavaScript).

### `script.js`

This file dynamically generates the page content using JavaScript. It runs the `renderPage()` function to build the page.

### `style.css`

This file controls the look and feel — how things are styled, aligned, colored, and more.

📸 There are also a couple of images in the folder that you can use on your website!

---

## 🔍 Try it out!

You can explore however you'd like, but here are a few ideas to get you started:

### 1. Change the content

- Open `script.js`

- Find the `createMain()` function

- Edit the `
` and `
` text to show your own name and a custom welcome message


### 2. Swap the profile image

- Inside the same function, there's an `` element

- Change the `src="..."` to use another image from the folder (or add your own!)

### 3. Add something new

- Try adding a new paragraph (`

`) or an image inside `createMain()` or `createFooter()`

- You can write regular HTML inside the JavaScript template strings

### 4. Customize the style

- Open `style.css`

- Try changing:

  - The background color (`background-color`)

  - The font size (`font-size`)

  - Add borders, spacing, or padding — experiment freely!

---

## 💡 Tips

- If something **doesn't work** — that's totally normal! Look for small errors like missing semicolons or incorrect file names.

- Open the site in a browser and **refresh the page every time you save**.

- You don’t need to try everything — just do what feels fun or interesting!

---

## 🎯 Goal

Just enjoy **messing around with the code** and get a feel for how HTML, CSS, and JavaScript work together.  

You might discover that web development is your thing!