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:
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
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:
CSS border radius
https://www.w3.org/TR/css-backgrounds-3/#the-border-radiusLorem ipsum dolor sit amet.
Corner shaping
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore, et.
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
CSS Animations
source: Travery Media