Build a website

Scope

underneath the hood

world wide web CERN tim berners-lee 1989
html
- tags
- attributes
- structure
css
javascript
what’s in a link
how I do it : markdown + jekyll
local vs server
main techstacks
- flask, gradio, streamlit
- django, fastapi, uvicorn -
streamlit
git

Birth of the web

In 1989, Tim Berners-Lee, a young scientist working at CERN, wrote a proposal for an information management system based on the Internet

https://home.web.cern.ch/news/series/cern70/cern70-where-web-was-born

https://home.cern/science/computing/birth-web

HTML

go to web page, right click, view page source. this is html

HTML uses tags to define the structure of a web page

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
</body>
</html>

Links

<a href="https://www.w3schools.com">W3Schools</a>

Bullet points

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

and <div>, <span>, .

In the old days we used tables to layout our pages and shim.gif a transparent image to create space between elements.

HTML 5 and after

HTML shifted to a “Living Standard” in 2019

Continuous updates instead of versioned releases
No more “HTML5”, “HTML6”, etc. - just “HTML”

Recent HTML Features (2023-2025)

This is quite technical, adding it here to show the type of things that continuously improved in html.

Native popovers without JavaScript frameworks
<button popovertarget="menu">Open</button>
<div popover id="menu">Content</div>
Automatic focus management and backdrop

Dialog Element (now widely supported)

Native modal and non-modal dialogs
<dialog> with .showModal() or .show()
Built-in backdrop, focus trapping, ESC to close

Search Element

<search> semantic element for search functionality
Better accessibility and semantic meaning
Example: <search><form>...</form></search>

Lazy Loading (now standard)

loading="lazy" on images and iframes
Browser handles loading optimization automatically
<img src="image.jpg" loading="lazy">

Declarative Shadow DOM

Server-side rendering for Web Components
<template shadowrootmode="open">
Improves performance and SEO for components

Details “name” Attribute

Accordion behavior built-in
<details name="group"> - opening one closes others
Native accordion without JavaScript

Blocking Attribute

blocking="render" on scripts/styles
Control rendering behavior explicitly
Better performance optimization control

SelectMenu Element (coming soon)

Styleable <select> replacement
More customizable dropdowns
Still in development but promising

Bottom Line

Focus is on developer experience, accessibility, and reducing JavaScript dependencies for common UI patterns.

Styling

Cascading Style Sheets (CSS) is used to format the layout of a webpage.

With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more!

CSS can be added to HTML documents in 3 ways:

Inline - by using the style attribute inside HTML elements
Internal - by using a <style> element in the <head> section
External - by using a <link> element to link to an external CSS file

try it yourself https://www.w3schools.com/html/html_styles.asp

See more at https://www.w3schools.com/html/html_css.asp

behaviors

with Javascript

JavaScript makes HTML pages more dynamic and interactive.

see https://www.w3schools.com/html/html_scripts.asp

Front End vs Back End

Front End (Client-Side)

Runs in the browser on the user’s device
What users see and interact with directly
Technologies: HTML, CSS, JavaScript
Handles UI, animations, form validation, user interactions

Back End (Server-Side)

Runs on a server - remote computer responding to requests
Users don’t see this code
Technologies: Node.js, Python, Ruby, Java, PHP, databases
Handles business logic, authentication, database operations, API endpoints

JavaScript’s Dual Role

Front End JavaScript

Runs in the browser
Manipulates the DOM, handles clicks, updates UI
Example: Making a dropdown menu interactive

Back End JavaScript (Node.js)

Node.js lets JavaScript run on servers (outside the browser)
Same language, different environment
Example: Processing form submissions, querying databases

The Connection

Before Node.js: JavaScript was front end only, back end used different languages
After Node.js: Developers can use JavaScript for both front and back end
They’re still separate - front end code and back end code don’t mix, but you can use the same language for both

DNS

Domain Name System (DNS) is a system that translates human-readable domain names (like “www.example.com”) into IP addresses (like “192.0.2.1”).

when you create website

buy the domain name from a registrar
host the website on a server
point the domain name to the server

setup includes

domain name
https & ssl certificate
- HTTPS: Encrypted version of HTTP - locks the data traveling between your browser and the website so no one can spy on it.
- SSL Certificate: Digital ID card that proves a website is who they claim to be and enables the encryption lock.
email

Focus : a link

<a href="https://skatai.com"
    alt="Computer science courses"
    style="font-size: 20px; color: #3366FF;"
    onclick="alert('You clicked the link!')"
>
    Skatai.com
</a>

Markdown + Jekyll

We’ve seen markdown

# H1
## H2

- list item 1
- list item 2

[link](https://skatai.com)

![image](/assets/images/woodpecker_03.png)

all my slides and pages are markdown files
they include a header that specifies the layout template : default_en, slides, etc
I build the website with terminal commands

JEKYLL_ENV=production bundle exec jekyll build

then commit and push to github

git add .
git commit -m "update website"
git push origin master

the hosting company (digitalocean.com)
- automatically detects new content on the master branch of the github repository
- that triggers a build process
- then deploys the website

and … tada! the new page is online