Miguel Costa
"A serious and good philosophical work could be written consisting entirely of jokes."
Learn Web Development
with old computer interfaces
(like the ZX Spectrum)
Show off your text!
Skills
- Structure
- p, div, span
- Styling
- text & background
- box model?
Replicate this screen
Skills
- Structure
- p, div, span
- Styling
- text & background
- box model
Replicate this screen
including the arrow!
Skills
- Structure
- p, div, images?
- Styling
- text & background
- box model
- positioning?
Reproduce this screen
including the borders
Skills
- Structure
- p, div, span
- Styling
- text & background
- box model
Reproduce this screen
Skills
- Structure
- p, div, a, alert?
- Styling
- text & background
- box model
anchor or dialog?
Reproduce this screen
Skills
- Structure
- p, div, span, a, alert?
- Styling
- text & background
- box model
centered
"SAY HELLO" in bold
anchor or dialog?
Reproduce this screen
Skills
- Structure
- p, div, section, header, footer, span, a, alert?
- Styling
- text & background
- box model
- animation
anchor or dialog?
optional animation
Replicate this screen
Skills
- Structure
- p, div, section, header, footer, span, a, alert?
- Styling
- text & background
- box model
- animation
source (it is also the actual page)
strong text is red
links are green
visited are yellow
ul have asterisks for each item (and pink text)
Heading
Reproduce this screen
Skills
- Structure
- p, div, section, header, footer, span, a, alert?
- Styling
- text & background
- box model
- animation
all caps
optional animation
frame
Reproduce this screen
Skills
- Structure
- p, div, span?, a, alert?
- Styling
- text & background
- box model
- shadow and effects
shadow?
anchor or dialog?
Reproduce this screen
Skills
- Structure
- p, div, span?, a, alert?, dl, dd
- Styling
- text & background
- box model
shadow?
description list? List in list?
Reproduce this menu
Skills
- Structure
- panel, div or article?, list
- Styling
- text & background
- box model
- list
- positioning?
panel header
with bg image?
list of links?
hovered or focused option
Reproduce this menu
Skills
- Structure
- panel, div or article?, list
- Styling
- text & background
- box model
- list
- positioning?
ordered list with letters?
Animated loading screen
Skills
Resources
Speccy Exercises
By Miguel Costa
