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

Speccy Exercises

  • 603