HTML, CSS and/or Javascript experimentations go here

These are the most often used elements by beginners:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is a normal paragraph

This paragrph is explicitly Times New Roman

This paragraph is explicitly monospaced

This date is surrounded by a time element: 2019-11-29

You can get all time elements in Javascript by pressing ctrl-shift-i or F12 and putting document.querySelectorAll("time") into the console

Here are some fancier HTML elements

Using Pythagoras' theorem to solve for the hypotenuse a of a triangle with sides b and c

To make George eat an apple, selectFile|Eat Apple...

`<details>` animation test

Automated Status: Operational

Velocity: 12m/s

Direction: North

Copying "Really Achieving Your Childhood Dreams"

Copying... 25%

Transfer rate:: 452KB/s
Local filename:: /home/rpausch/raycd.m4v
Remote filename:: /var/www/lectures/raycd.m4v
Duration:: 01:16:27
Color profile:: SD (6-1-6)
Dimensions:: 320×240

Detail Element

The following shows how a details element can be used to hide some controls by default:

Name & Extension:

Hide extension

CSS border radius

https://www.w3.org/TR/css-backgrounds-3/#the-border-radius

Lorem ipsum dolor sit amet.

Corner shaping

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore, et.

Image scaling

smooth

high-quality

crisp-edges - this looks broken :(

pixelated

default

font weirdness

wut

CSS transitions

Hover me 1

Hover me 2

CSS Animations

source: Travery Media