Methodenlabor / Code

Especially when working with data, programming can be very helpful in collecting, analyzing, and processing it. Even without coding skills, you can now create your own code using popular chatbots – a process also known as “vibe coding.” Today, we’ll see how quickly we can build and design a small website with an interactive map.

Web Basics

Before we start generating code with AI, it’s helpful to understand the three core technologies behind every website. Together, HTML, CSS, and JavaScript define what a webpage contains, how it looks, and how it behaves. Understanding their roles will make it much easier to read, edit, and improve AI-generated code.

Structure

HTML provides the structure of a webpage. It defines the content, headings, paragraphs, images, buttons and so on.

Design

CSS controls the appearance. It defines colors, typography, spacing, layout and the overall visual design.

Interactivity

JavaScript adds behavior and interactivity. It makes websites respond to user input, load data, animate elements or create interactive maps.

A simple webpage combines structure, style and interaction in one file, called index.html. You can open the file in your browser.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Methodenlabor</title>
  
  <!-- DESIGN -->
  <style>
    h1 {
      font-family: Arial;
      color: blue;
    }
  </style>

</head>

<!-- STRUCTURE -->
<body>
  <h1>Hello World!</h1>
  <p>This is a simple webpage with HTML, CSS and JavaScript.</p>

  <!-- INTERACTIVITY -->
  <script>
    document.querySelector('h1').addEventListener('click', function() {
      alert("You clicked on the headline");
    })
  </script>
</body>

</html>

↓ index.zip (905 B)

Code Editor

To write and edit code you can use any text editor. I recommend using Visual Studio Code, a free and widely used code editor.

Mapping Library

JavaScript libraries are pre-written collections of code that help you build common features more quickly, without starting from scratch. Instead of coding everything yourself, you can use a library to add complex functionality with just a few lines.

For today’s session, we’ll use Leaflet, a lightweight JavaScript library for creating interactive maps. It allows us to easily display maps, add features, markers and build simple map-based interfaces for our website.

Pseudo Code

Pick three places or elements from your mental map of Berlin and place them on the interactive map. Try to describe in a few bullet points what you expect your webpage to look like and do. Think of it as a short specification for the chatbot. For example:

single HTML file with CSS and JavaScript
interactive map using the Leaflet library
map centered on Berlin
add a marker at the UdK Medienhaus
add a popup to the marker with the text “You are here”
...

↓ example.zip (1.07 KB)

✏️ Methodenlabor

Code