Difference between revisions of "Course Time Machine"

From Publication Station
Line 20: Line 20:
## [https://www.w3schools.com/cssref/pr_font_font.asp font]
## [https://www.w3schools.com/cssref/pr_font_font.asp font]
## [https://www.w3schools.com/cssref/pr_font_font-family.asp font-family]
## [https://www.w3schools.com/cssref/pr_font_font-family.asp font-family]
font-size
## [https://www.w3schools.com/cssref/pr_font_font-size.asp font-size]
font-stretch
## [https://www.w3schools.com/cssref/css3_pr_font-stretch.asp font-stretch]
font-style
## [https://www.w3schools.com/cssref/pr_font_font-style.asp font-style]
font-weight
## [https://www.w3schools.com/cssref/pr_font_weight.asp font-weight]
height
## [https://www.w3schools.com/cssref/pr_dim_height.asp height]
margin
## [https://www.w3schools.com/cssref/pr_margin.asp margin]
opacity
## [https://www.w3schools.com/cssref/css3_pr_opacity.asp opacity]
padding
## [https://www.w3schools.com/cssref/pr_padding.asp padding]
color
## [https://www.w3schools.com/cssref/pr_text_color.asp color]
line-height
## [https://www.w3schools.com/cssref/pr_dim_line-height.asp line-height]
visibility
## [https://www.w3schools.com/cssref/pr_class_visibility.asp visibility]
border
## [https://www.w3schools.com/cssref/pr_border.asp border]
box-shadow
## [https://www.w3schools.com/cssref/css3_pr_box-shadow.asp box-shadow]
text-shadow
## [https://www.w3schools.com/cssref/css3_pr_text-shadow.asp text-shadow]
background
## [https://www.w3schools.com/cssref/css3_pr_background.asp background]
filter
## [https://www.w3schools.com/cssref/css3_pr_filter.asp filter]
cursor
## [https://www.w3schools.com/cssref/pr_class_cursor.asp cursor]
text-shadow
## [https://www.w3schools.com/cssref/css3_pr_text-shadow.asp text-shadow]
transform
## [https://www.w3schools.com/cssref/css3_pr_transform.asp transform]
transition
## [https://www.w3schools.com/cssref/css3_pr_transition.asp transition]
position
## [https://www.w3schools.com/cssref/pr_class_position.asp position]
perspective
## [https://www.w3schools.com/cssref/css3_pr_perspective.asp perspective]
grid
## [https://www.w3schools.com/cssref/pr_grid.asp grid]
columns
## [https://www.w3schools.com/cssref/css3_pr_columns.asp columns]
animation
## [https://www.w3schools.com/cssref/css3_pr_animation.asp animation]

Revision as of 08:50, 30 September 2022

Welcome to the Time Machine course.

The Time Machine consists of two classes in which we introduce basic HTML and CSS skills. We start of in The Sh***y 90's, building websites from back in the day. We then fast-forward, via the fourth dimension, to the BRUTALIST design period.

Screenshot of the recreated page of the first website. Photograph: Rao, Achintya © 2019-2022 CERN Screenshot of the recreated page of the first website. Photograph: Rao, Achintya © 2019-2022 CERN

Program

Class 1

Demos

  1. Websites in the 90's
    1. Take a look at websites made in the 90's
    2. Quiz question: What is the first item ever sold on the web?
    3. What do you notice changing over time? Does the content and audience change? And how about the design?
  2. Follow along HTML / CSS

Tasks

  1. Try out
    1. text-align
    2. font
    3. font-family
    4. font-size
    5. font-stretch
    6. font-style
    7. font-weight
    8. height
    9. margin
    10. opacity
    11. padding
    12. color
    13. line-height
    14. visibility
    15. border
    16. box-shadow
    17. text-shadow
    18. background
    19. filter
    20. cursor
    21. text-shadow
    22. transform
    23. transition
    24. position
    25. perspective
    26. grid
    27. columns
    28. animation