Brtest Tutorial
Web Development Tutorial
Si at denne tutorialen vise hva som trengs for å lage en hjemmeside, men hvis man vil studere html, css, og js i dybden, så må en gå til de hver for seg ?
Web development is the process of building websites and web applications. In this tutorial you will learn the fundamentals of:
HTML- The language for building web pagesCSS- The language for styling web pagesJavaScript- The language for programming web pages
This tutorial combines the essentials (eller fundamentals)? of HTML, CSS, and JavaScript into a single learning path.
With our "Try it Yourself" editor, you can edit the code and view the result in your browser:
Introduction to Web Development
First, you will learn the basics of how websites work - from browsers to servers, and everything in between:
- What is Web Development?
- Frontend vs Backend
- How the Web Works (Client & Server, HTTP/HTTPS)
- Tools You Need (Browser, Editor, Optional: Git)
- Set Up Your First Project
Then you will move on to HTML, CSS, and JavaScript to create your first web page.
HTML
HTML is the language for creating web pages.
It gives your page its content and structure: headings, paragraphs, links, images, lists, tables, forms, and semantic layout (like <header>, <nav>, <section>, <footer>).
Example
<header>
<h1>My Web Page</h1>
<nav>
<a href="#">Home</a> |
<a href="#">About</a> |
<a href="#">Contact</a>
</nav>
</header>
<section>
<h2>Welcome</h2>
<p>Thanks for visiting my website!</p>
<button>Click me!</button>
</section>
<footer>
<p>Copyright 2025 Me</p>
</footer>
Try it Yourself »
CSS
CSS is the language for styling web pages
It controls colors, fonts, spacing, and layout of your web page.
Example
body {
font-family: system-ui, Arial, sans-serif;
background: lightgrey;
}
header, section, footer {
max-width: 960px;
margin: 16px auto;
padding: 1rem;
background: white;
color: black;
border-radius: 8px;
}
button {
background-color: black;
color: white;
padding: 8px;
border: 1px solid grey;
border-radius: 8px;
cursor: pointer;
}
Try it Yourself »
JavaScript
JavaScript is the language for programming web pages.
It adds behavior to your pages. In this example, when the user clicks the button, it toggles between light and dark mode by changing the page colors with JavaScript.
Example
const btn = document.getElementById("myBtn");
let dark = false;
btn.addEventListener("click", function () {
dark = !dark;
if (dark) {
document.body.style.backgroundColor =
"black";
document.body.style.color = "white";
btn.textContent = "Switch to Light Mode";
} else {
document.body.style.backgroundColor = "lightgrey";
document.body.style.color = "black";
btn.textContent =
"Switch to Dark Mode";
}
});
Try it Yourself »
Putting It All Together
Combine HTML, CSS, and JavaScript to build a simple, responsive pages with navigation and interactivity.
Publishing Your Website
Share your project with the world: organize files, choose hosting, and (optionally) add a custom domain.
- Folder Structure:
index.html,mystyle.css,myscript.js,/images - Free Hosting: GitHub Pages or Netlify
- Custom Domains and DNS Basics
- Use Git for version control
Example
Minimal structure:
my-site/
index.html
mystyle.css
myscript.js
images/
Bonus Topics
- DevTools (Inspect, Elements, Network)
- Responsive Design Testing
- Accessibility (alt text, landmarks, contrast)
- SEO Basics (titles, meta descriptions, semantic HTML)
- Intro to Frameworks: Bootstrap (layout) and React (components)
Final Project
Project: Personal Portfolio Website
Build a three-page site (Home, About, Contact) demonstrating HTML structure, CSS styling/responsiveness, and JavaScript interactivity. Publish it using a free host.
Try it Yourself »Next Steps
Now, lets start our Web Developer journey!
Next: Web Development Introduction »
