Web Development — VTTECH 2026 Portfolio

01 / FOUNDATIONS

Behind the browser.

Files become a website.
Each language has its own role.

STRUCTURE & ELEMENTS

HTML

HyperText Markup Language defines the structure and elements of a page.

Explore HTML

STYLE & APPEARANCE

CSS

Cascading Style Sheets define appearance, including color, fonts and layout.

Explore CSS

LOGIC & INTERACTION

JavaScript

The browser executes JavaScript to add logic and interaction to a website.

Explore JavaScript

How websites work

The browser requests pages and resources from a server, interprets HTML, applies CSS, executes JavaScript and renders the website.

01 Browser
02 DNS
03 Web server
04 Database (optional)

HTTP request: https://google.com
HTTP response: index.html and resources.

PROJECT STRUCTUREportfolio/

portfolio/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── script.js
└── assets/
    ├── images/
    ├── video/
    ├── audio/
    └── models/

index.html is the entry point. CSS, JavaScript and media get their own folders. References must be exact; paths are case sensitive on UNIX.

Editors, DevTools & browser compatibility

A good editor

Any text editor can be used. Helpful features include syntax highlighting, auto-completion, error detection, formatting and live preview.

Popular editors: Visual Studio Code, WebStorm, Sublime Text, Notepad++ and Vim / Neovim.

Check in the browser

Use browser DevTools and the device toolbar to test responsiveness. Check property compatibility using the slide’s MDN box-shadow reference ↗.

02 / HTML FUNDAMENTALS

Give content meaning.

Use tags for their meaning.
Build a readable page structure.

Semantic HTML

Use HTML tags based on meaning and not just functionality.

Semantic structure improves readability and helps search engines understand the content.

A BASIC DOCUMENTindex.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Page title</title>
  </head>
  <body>
    Page content
  </body>
</html>

<a href="https://google.com">Google</a>

A tag has an opening tag, tag name, attribute name and value, content, and a closing tag.

Semantic tags & basic elements

<header>: Introduction or navigation: headings, menus, logos or search.
<nav>: Navigation links.
<main>: The page’s primary content; used once per page.
<section>: Related content under a common topic.
<article>: Standalone, reusable content.
<aside>: Supporting content and callouts.
<footer>: Closing information and links.

<h1>–<h6>: Heading hierarchy.
<p> / <a>: Paragraphs and hyperlinks.
<ol> / <ul> / <li>: Ordered lists, unordered lists and list items.
<q> / <blockquote>: Short and longer quotations.
<em> / <strong>: Emphasis and strong importance. Use semantic tags for meaning, not only visual effects.
<button> / <img> / <div>: Buttons, images and generic divisions. Attributes configure elements.

Relative paths: where does the image live?

Image paths from the HTML file
Example src	Location
`logo.png` or `./logo.png`	Same folder
`images/logo.png`	Subfolder
`../logo.png`	Up one folder
`../../logo.png`	Up two folders
`/images/logo.png`	From the website root

03 / CSS FOUNDATIONS

Make structure visible.

Selectors, properties and values.
Reusable classes, consistent styles.

COLOR · TYPOGRAPHY · SPACING

Hello,
CSS!

#ffffff#2563eb700

One class. Reusable styles.

Classes start with a dot in CSS. Use the HTML class attribute to apply them to any tag.

<section class="container">…</section>

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
}

.container is the selector, padding is a property and 0 2rem is its value.

Three ways to embed CSS

External

From a separate CSS file, linked in the head.

<link rel="stylesheet"
  href="css/style.css">

Internal

Inside a style element in the head.

<style>
  a { color: green; }
</style>

Inline

Inside a tag’s style attribute.

<p style="color:red;">
  A red paragraph.
</p>

The CSS property toolbox

color: #ffffffbackground-color: #2563ebfont-size: 24pxfont-family: Arialfont-weight: 700text-align: centerwidth: 320pxheight: 140pxmargin: 20pxpadding: 24pxborder: 2px solid blueborder-radius: 15pxdisplay: blockposition: relativeopacity: 0.8line-height: 1.5

04 / RESPONSIVE LAYOUTS

A layout that adapts.

Three columns. Then two. Then one.
Resize the browser to see it happen.

01 / Flexbox

ROWS OR COLUMNS

Flexbox creates vertical or horizontal layouts that adapt when the screen size changes.

01

Direction

Choose a row or column.

02

Wrapping

Let items move to a new line.

03

Alignment

Distribute space and align items.

Flexbox parent & child properties

Parent properties

display: flex: Activates Flexbox.
flex-direction: row, row-reverse, column, column-reverse
flex-wrap: nowrap, wrap, wrap-reverse
justify-content: flex-start, flex-end, center, space-between, space-around, space-evenly
align-items: stretch, flex-start, flex-end, center, baseline
align-content: flex-start, flex-end, center, space-between, space-around, space-evenly, stretch
gap: Space between elements.

Child properties

order: Overrides the visual source order.
flex-grow / flex-shrink: Proportions for growing and shrinking.
flex-basis: Default size before space distribution.
flex: Shorthand for grow, shrink and basis; or none.
align-self: Overrides alignment for an individual item.

Flexbox reference from the slides ↗

02 / CSS Grid

ROWS AND COLUMNS

Grid creates layouts with rows and columns. A container holds items arranged into tracks, cells and areas.

01

Tracks

Rows and columns form the layout.

02

Areas

Give parts of the layout names.

03

Placement

Place and span individual items.

Grid terminology & properties

Grid container: The parent with display: grid.
Grid item: A direct child of the container.
Grid line: A dividing line between tracks.
Grid track: A row or column between two lines.
Grid area: An area bounded by two vertical and two horizontal lines.
Grid cell: A single unit in the grid.

Define and align the grid

grid-template-columns, grid-template-rows and grid-template-areas define the structure. gap separates tracks.

justify-items and align-items align items in their cells; justify-content and align-content align the whole grid.

Item alignment: start, center, end, stretch. Grid alignment also supports space-between, space-around and space-evenly.

Place an item

Use grid-column-start, grid-column-end, grid-row-start and grid-row-end, or the grid-column / grid-row shorthands. Use span for multiple tracks and grid-area for named areas.

Slide examples: two equal one-fraction columns and rows sized 100px, 1fr and max-content — Columns & rows · Slide 35

Named grid areas: header, sidebar, main, aside and footer, with example CSS — Named areas · Slide 36

Grid item alignment examples: start, center, end and stretch — Item alignment · Slide 37

Grid content alignment examples including space-between, space-around and space-evenly — Content alignment · Slide 38

Grid column and row placement with start, end and span properties — Item placement · Slide 39

Grid reference from the slides ↗

05 / RESPONSIVE CSS

Every screen counts.

Support mobile, tablets and desktop.
Adapt images, text and layout.

Mobile

One column.

Tablet

Two columns.

Desktop

Three columns.

Start with the viewport

<meta name="viewport"
  content="width=device-width,
  initial-scale=1.0">

Use media queries to define styles for different browser sizes. For example, hide an element when the browser is 600px wide or less.

@media (max-width: 600px) {
  .example { display: none; }
}

Media query reference ↗

Images & text that flex

width: 100% stretches an image inside its container.
max-width: 100% limits an image to its intrinsic pixel width.
<picture> chooses different images based on screen width.
object-fit: fill | contain | cover controls how an image fills its container.
vw sizes text relative to viewport width: 1vw = 1% of viewport width.

The hero uses picture, the images use cover or contain, and the headings use viewport-relative sizing.

06 / JAVASCRIPT

Add interaction.

Change content, attributes,
styles and the HTML DOM.

Logic in the browser

JavaScript is a scripting language using C-like notation. It can be integrated as an external resource, inside the head, or directly in attribute values.

Variables store values. Functions perform actions. The dot operator calls functions on objects, such as document.getElementById('id').

These are the slide’s JavaScript examples, shown as reference code in this HTML-and-CSS portfolio.

JavaScript introduction from the slides ↗

VARIABLES & FUNCTIONSscript.js

let name = "John";
const pi = 3.14159;

function getName() {
  return "John";
}

function addFive(number) {
  return number + 5;
}

function changeText() {
  document.getElementById("myLabel")
    .innerHTML = "New Text";
}

Button & label exercise code

Use alert("Hello world!") to test execution. Every HTML element can have an id. The button’s onclick attribute can call a function to change the label.

<div id="myLabel">Hello world!</div>
<button onclick="changeText()">Press me</button>

07 / MULTIMEDIA CONTENT

Beyond the text.

Images, video and 3D assets.
Choose the right format.

A close-up of colorful source code on a computer screen — IMAGES

Pixels & vectors

JPEG for lossy compression. PNG for lossless images and transparency. WebP / AVIF for modern compression. SVG for scalable icons, diagrams and logos.

Image markup

YouTube video

A real video embedded with an iframe. Use the player controls to play, pause or enter fullscreen. Watch on YouTube ↗

Video markup

A third dimension

Explore the astronaut model from modelviewer.dev. Drag to rotate; scroll or pinch to zoom. Download the GLB ↗

3D markup

Images: descriptive text & lazy loading

<img src="hero.webp"
  alt="Girl in a jacket"
  title="Girl in a jacket"
  width="800" height="1200"
  loading="lazy">

Verify visual quality and browser support when choosing an image format.

Video: native player & YouTube embedding

Native HTML5

<video controls preload="metadata"
  poster="preview.jpg" playsinline>
  <source src="demo.webm"
    type="video/webm">
  <source src="demo.mp4"
    type="video/mp4">
  <track kind="captions"
    src="captions.vtt"
    srclang="en" label="English">
  Your browser does not support video.
</video>

YouTube example

<iframe
  src="https://www.youtube-nocookie.com/embed/s_ST3hzMsVE"
  title="YouTube video selected for this portfolio"
  loading="lazy"
  allow="accelerometer; autoplay;
    encrypted-media; picture-in-picture"
  allowfullscreen>
</iframe>

The live player above uses the selected YouTube video. Native video filenames remain the slide’s markup examples.

3D: model-viewer example

<script type="module"
  src="js/vendor/model-viewer.min.js">
</script>
<model-viewer src="assets/models/neil-armstrong.glb"
  alt="3D model of an astronaut suit"
  camera-controls auto-rotate
  poster="assets/slides/image71.png">
</model-viewer>

The live model uses the locally downloaded astronaut GLB and model-viewer module. The slide’s original markup used chair.glb; this version uses the astronaut pictured in the slide.

modelviewer.dev — slide reference ↗

08 / PUBLISHING

From folder to server.

Upload your website.
Make your files available on the web.

FHGR test-server setup

Sign in to my.fhgr.ch ↗ and go to Campus.
Find Web-/FTP Ausbildungsserver.
Click Neue Webseite erstellen.
Enter a title and an end date, then press Erstellen.

File Transfer Protocol

FTP transfers files between a computer and a server over a network. An FTP client such as FileZilla connects to the server that stores and provides the files.

COMPUTER

Upload →← Download

SERVER

Upload sends files to the server. Download copies files from the server to your computer.

Publish with FileZilla: the slide walkthrough

Download FileZilla Client ↗ (the Client, rather than Server).
Open the Ausbildungsserver’s Detailansicht… and note the FTP server, username and password.
In FileZilla, open the servers icon, choose New site, name it and enter the connection details.
The course slide specifies Only use plain FTP… for this test-server walkthrough.
Connect. The web directory appears on the right; navigate to the project folder on the left.
Select files and use the context menu to upload or download them.