Introduction to Computer Science YMT113 · Fall 2026 Assoc. Prof. Ferhat Uçar
12 Web Monday, December 7, 2026

The Web: HTML, CSS and JavaScript

What happens when you type a URL, and how a page is built: HTML for structure, CSS for style, JavaScript for behavior. By the end of the lab you have a page that reacts to the user.

CS50Week 8 · HTML, CSS, JavaScript ReadCS50 notes; MDN 'Getting started with the web' >_ Lab 10: Your First Web Page

Before class · do this at home

Watch, read, then come

CS50x 2026 · Week 8: HTML, CSS, JavaScript by David J. Malan. Watch the lecture on YouTube (you are also enrolled on edX), read the notes, skim the slides. Our lecture builds on it instead of repeating it.

  • Watch the lecture, then open this very page, press F12 and change something in the Elements tab. That is the lab's first step.
  • Look at last year's HTML/CSS/JS examples repository: five interactive examples we build on.

Learning objectives

By the end of this week you can:

  • 1 Explain the request–response model: URL, DNS, HTTP GET and POST, status codes, and what a server is.
  • 2 Write valid HTML with headings, paragraphs, lists, links, images, forms and inputs.
  • 3 Style a page with CSS selectors, properties, the box model and flexbox, and explain the cascade.
  • 4 Write JavaScript that responds to events and changes the DOM.
  • 5 Use the browser's developer tools to inspect elements, network requests and console output.
  • 6 Recognize the same five ideas (variables, conditions, loops, functions, events) in a third language.

★ the wow moment

Every website you have ever used sent you its source code. You can read all of it.

Press F12 on any site: the HTML, the CSS, the JavaScript, every network request and every cookie is there, because the browser has to have it to show the page. The web is the only major platform where the client's code is open by design. That is why it is the best place to learn, and why security on the web can never rely on hiding things.

Topics

  1. The Internet in one paragraph: IP addresses, DNS, routers, TCP/IP, HTTP; the request GET / HTTP/1.1 and the response 200 OK; status codes 301, 404, 500.
  2. HTML: tags, attributes, the tree (DOM), <head> and <body>, headings, lists, links, images, video, forms and inputs, validation attributes.
  3. CSS: selectors (type, class, id), properties, the box model, inheritance and the cascade, flexbox, responsive basics, external stylesheets, frameworks like Bootstrap and Tailwind.
  4. JavaScript: let, functions, document.querySelector, addEventListener, changing text and style, forms without reload, a little setInterval.
  5. Developer tools: Elements, Console, Network; reading a request; editing a live page.

Full notes are published before the lecture. The lab, Lab 10: Your First Web Page, builds a page with a form, styles it, and adds JavaScript that responds to the user, published on GitHub Pages.

In industry

  • The browser is the platform

    Gmail, Figma, VS Code (the editor you use in Codespaces), Google Docs and Slack are web apps. The most widely used desktop application in the world, VS Code, is HTML, CSS and JavaScript.

  • JavaScript is the most used language

    Every survey of developers puts JavaScript first. Node.js runs it on servers too, so one language covers the whole stack.

  • Accessibility is law

    Semantic HTML (real headings, labels on inputs, alt text) is what screen readers use. In the EU and the US, inaccessible sites bring lawsuits and fines.

  • Frameworks are abstraction, again

    React, Vue and Svelte are to JavaScript what your custom Scratch block was to ten blocks: once the raw thing works, you wrap it. This site is built with Astro and Tailwind, exactly such wrappers.

Lab 10: Your First Web Page

Build a page with a form, style it with CSS, add JavaScript that reacts to the user, and publish it on GitHub Pages so it has a real URL. HTML/CSS/JS · due Fri, Dec 11 · 23:59 · 10 points · opens in week 12 Open lab instructions →

Go deeper

Tags:HTMLCSSJavaScriptDOMHTTPURLDNSflexboxeventsdeveloper tools