First steps on the web

No company invented the web. It started as a proposal, written at a research center to link documents together, and it was opened to everyone without asking anyone's permission. That openness is behind every site you use today; the dates below are the main stops along the way.

1. 1989Tim Berners-Lee, working at CERN, proposes a system that links documents together. His manager writes "vague but exciting" in the margin of the proposal.
2. 1991The first website goes live: info.cern.ch. It is still online; click and see for yourself.
3. 1993CERN releases the web's software to everyone for free. The same year, the Mosaic browser comes out and shows images and text on the same page.
4. 1994The W3C, which writes the web's rules, is founded. Håkon Wium Lie proposes the idea of writing a page's appearance in a separate language: CSS.
5. 1995Brendan Eich writes the first version of JavaScript in ten days. It has nothing to do with Java; the name was a marketing decision.
6. 2025Andrej Karpathy coins the term "vibe coding": getting AI to write the code and moving forward by looking at the result.

Between the moment you type misy2213.online into your browser and press Enter, and the moment the page appears, four things happen. It all takes less than a second, but knowing these steps tells you where to look when something goes wrong.

1. DNS finds the address. Computers talk in numbers, not names. DNS is a huge directory that turns a name like "misy2213.online" into that number (the IP address).
2. The browser sends a request. It asks the computer at that number, the server, "give me this page". The language of this conversation is HTTP.
3. The server sends the file. What arrives is an HTML file, which is a plain text file. If it mentions CSS, JavaScript or images, the browser asks for those separately too.
4. The browser draws the screen. It puts all the pieces together into the page you see.

Front end, back end: a restaurant

Comparing the parts of a website to a restaurant makes it easier to remember where each one runs.

A web page is three languages working together. Each one has a single job, and keeping those jobs apart makes a page easier both to write and to fix.

Today we will work with the first two. We will get to JavaScript in the last weeks of the term; first we want to build a solid skeleton and good clothes, because behavior can only be added on top of a solid structure.

Whatever you write between <button> and </button> appears on the button. We call these opening and closing marks tags. Tags tell the browser "this is a button" or "this is a paragraph", and the browser draws each one in its own way.

<button>Click</button>

<p>Hello, world!</p>
<p>Today I took the shuttle to campus and made my first web page.</p>

What makes the web a web is links: being able to jump from one page to another with a single click. The <a> tag has an attribute called href, which says where the link goes. Attributes are written inside the opening tag and give the tag extra information; for example, if you add target="_blank", the link opens in a new tab.

<a href="https://www.google.com" target="_blank">
  Search on Google
</a>

Now we add a <style> section to the page. This term's rule: everything about appearance lives inside style. HTML says what is on the page, CSS says how it looks; when you keep the two apart, you can change one without breaking the other.

We give the buttons a class, and in CSS we address that class by putting a dot in front of its name. Every button with the same class wears the same clothes. Our target is YouTube's SUBSCRIBE and JOIN buttons.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Buttons</title>
  <style>
    .subscribe {
      background-color: rgb(200, 0, 0);
      color: white;
      border: none;
      height: 36px;
      width: 105px;
      border-radius: 2px;
      cursor: pointer;
      margin-right: 8px;
    }

    .join {
      background-color: white;
      border-color: rgb(41, 118, 211);
      border-style: solid;
      border-width: 1px;
      color: rgb(41, 118, 211);
      height: 36px;
      width: 62px;
      border-radius: 2px;
      cursor: pointer;
    }

    .follow {
      background-color: rgb(2, 158, 255);
      color: white;
      border: none;
      height: 36px;
      width: 90px;
      border-radius: 18px;
      font-weight: bold;
      font-size: 15px;
      cursor: pointer;
      margin-left: 8px;
    }
  </style>
</head>
<body>
  <button class="subscribe">SUBSCRIBE</button>
  <button class="join">JOIN</button>
  <button class="follow">Follow</button>
</body>
</html>

The buttons sit there but don't react. :hover catches the moment the mouse moves over a button, and :active the moment it is clicked. transition makes that change happen smoothly instead of all at once. With body we change the color of the whole page. Add these to the end of the style from Round 3:

    body {
      background-color: rgb(24, 20, 48);
      font-family: Arial;
    }

    .subscribe:hover {
      opacity: 0.8;
    }

    .subscribe:active {
      opacity: 0.5;
    }

    .join {
      transition: background-color 0.15s, color 0.15s;
    }

    .join:hover {
      background-color: rgb(41, 118, 211);
      color: white;
    }

    .follow:hover {
      box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
    }

You have just written every line by hand. Now we look at how the same job is done with AI, and at how the tools get more powerful step by step.

The same idea also exists in the terminal. Tools like Claude Code have no window: you tell the agent what you want from the command line, and it edits the files in your folder.

What is vibe coding?

Getting AI to write the code without reading it, looking at the result, and saying "change this" when you don't like it. It is a fast and fun way to work. But if you can't read the code it writes, you can't find what broke when something goes wrong.

AI writes, you read. You can't manage code you can't read.

Which model is better?

On LMArena you ask two anonymous models the same question at once and vote for the better answer. Who the models are is revealed only after you vote. When millions of blind votes add up, a ranking emerges.

The prompts you watched in class

We built the Işık University site in Antigravity with these four prompts. Try the same at home and watch what the agent does at each step.

Build a promotional website for the Management Information Systems department of FMV Işık University in a single HTML file: a hero section, about the department, campus, contact. Show me your plan first and don't write any code until I approve it.

Redesign this like an award-winning agency project: dark theme, big typography, sections that appear as you scroll with GSAP ScrollTrigger, and moving photos.

Open the site in the browser, test it at phone size, take a screenshot and fix whatever is broken.

Add a form with name, email and message fields to the contact section.

See the three layers with your own eyes on any site you like. The changes happen only on your screen, and everything comes back when you refresh the page; in other words, you can't break anything.

1. Open the developer tools: F12⌥ ⌘ I. In the Elements tab, double-click a heading and change its text.
2. Take off the clothes. Select the <style> or <link rel="stylesheet"> line and press Delete. The bare page that remains is the HTML itself.
3. Stop the muscles. Open the command menu with Ctrl Shift P⌘ ⇧ P, type "Disable JavaScript", press Enter and refresh the page. Everything that stops was JavaScript.

In Safari, turn on the developer menu first: Safari > Settings > Advanced > "Show features for web developers". For this course I recommend using Chrome.

Bring your web-lab folder and a screenshot to the next class. The items you tick are saved in this browser, so you can see where you left off.

• The files for Round 1 and Round 2 are ready: 1a.html through 1f.html.
• buttons.html has four buttons, and the hover works on all of them.
• You chose the page's background color yourself, and the text is easy to read.
• You copied the product card from the challenge.
• You installed Antigravity from antigravity.google/download.
• You had the agent build a site on a topic of your choice and took a screenshot. You opened the code and found the tags you learned today.

The flow of the exercises and the button examples are adapted from SuperSimpleDev's free HTML & CSS course. If you want to review at home, you can watch it there: lessons 1 and 2 this week.