Difference between revisions of "Course Time Machine"

From Publication Station
(Created page with "Welcome to the Time Machine course. The Time Machine consists of two classes: # The Sh***y 90's # BRUTalist Websites Screenshot of the recreated page of the first website. Photograph: Rao, Achintya © 2019-2022 CERN <small>Screenshot of the recreated page of the first website. Photograph: Rao, Achintya © 2019-2022 CERN</small>")
 
 
(60 intermediate revisions by the same user not shown)
Line 1: Line 1:
Welcome to the Time Machine course.  
Welcome to the Time Machine course.  


The Time Machine consists of two classes:
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.
# The Sh***y 90's
# BRUTalist Websites


[[File:Screenshot-World-Wide-Web-project-small.png|Screenshot of the recreated page of the first website. Photograph: Rao, Achintya © 2019-2022 CERN]]
[[File:Back to the Future.gif]]
<small>Screenshot of the recreated page of the first website. Photograph: Rao, Achintya © 2019-2022 CERN</small>
 
== Program ==
=== Class 1 ===
'''Demos'''
# Websites in the 90's
## Take a look at [[Timeline_of_the_Interweb|websites made in the 90's]]
## Quiz question: What is the first item ever sold on the web?
## What do you notice changing over time? Does the content and audience change? And how about the design?
# Follow along HTML / CSS
 
'''Tasks'''
# Try out
## [https://www.w3schools.com/cssref/pr_text_text-align.asp text-align]
## [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-size.asp font-size]
## [https://www.w3schools.com/cssref/css3_pr_font-stretch.asp font-stretch]
## [https://www.w3schools.com/cssref/pr_font_font-style.asp font-style]
## [https://www.w3schools.com/cssref/pr_font_weight.asp font-weight]
## [https://www.w3schools.com/cssref/pr_dim_height.asp height]
## [https://www.w3schools.com/cssref/pr_margin.asp margin]
## [https://www.w3schools.com/cssref/css3_pr_opacity.asp opacity]
## [https://www.w3schools.com/cssref/pr_padding.asp padding]
## [https://www.w3schools.com/cssref/pr_text_color.asp color]
## [https://www.w3schools.com/cssref/pr_dim_line-height.asp line-height]
## [https://www.w3schools.com/cssref/pr_class_visibility.asp visibility]
## [https://www.w3schools.com/cssref/pr_border.asp border]
## [https://www.w3schools.com/cssref/css3_pr_box-shadow.asp box-shadow]
## [https://www.w3schools.com/cssref/css3_pr_text-shadow.asp text-shadow]
## [https://www.w3schools.com/cssref/css3_pr_background.asp background]
## [https://www.w3schools.com/cssref/css3_pr_filter.asp filter]
## [https://www.w3schools.com/cssref/pr_class_cursor.asp cursor]
## [https://www.w3schools.com/cssref/css3_pr_text-shadow.asp text-shadow]
## [https://www.w3schools.com/cssref/css3_pr_transform.asp transform]
## [https://www.w3schools.com/cssref/css3_pr_transition.asp transition]
## [https://www.w3schools.com/cssref/pr_class_position.asp position]
## [https://www.w3schools.com/cssref/css3_pr_perspective.asp perspective]
## [https://www.w3schools.com/cssref/pr_grid.asp grid]
## [https://www.w3schools.com/cssref/css3_pr_columns.asp columns]
## [https://www.w3schools.com/cssref/css3_pr_animation.asp animation]
 
=== Class 2 ===
'''Demos'''
# BRUTALIST
## Take a look at [https://brutalistwebsites.com/ BrutalistWebsites.com]
# Code
## Build a two-column layout with an image over the layout
# Tasks
## Whiteboard drawing on the tasks for today
 
'''Class'''
 
* During the class we work in groups of 2
* Complete the tasks below
* Then make the website your own by adding content and changing design
* Make sure both your GIF's are visible on the website
 
First watch the following videos to understand CSS selectors:
1. [https://www.linkedin.com/learning/css-essential-training-3/type-and-universal-selectors Type and universal selectors]
2. [https://www.linkedin.com/learning/css-essential-training-3/class-and-id-selectors Class and ID selectors]
 
''It is recommended to first try and complete the tasks with only the instructions below. However, feel free to use these [https://hrnl-my.sharepoint.com/:f:/g/personal/kranv_hr_nl/Eplujb6NkU9JkvXQL7en_wwBeJ63tLkAcRfWzVtE0jrXUg?e=fTdQah demo videos] when you get stuck.''
 
'''Tasks'''
 
To start a project and create a file, see VsCode [http://ps.wdka.nl/wiki/Visual_Studio_Code#File_explorer documentation].
 
# CSS Grid
## A reference on CSS grid can be found on [https://www.w3schools.com/css/css_grid.asp W3Schools CSS Grid].
## Create a two column website similar to [https://kostasmurkudis.org/about kostasmurkudis.org]
## '''Bonus:''' You can learn more about CSS grid on this [https://www.linkedin.com/learning/responsive-layout/intro-to-css-grid?autoplay=true LinkedIn Learning Course]
## '''Bonus:''' Create the list with links on the left side like [https://kostasmurkudis.org/about kostasmurkudis.org]
# Position absolute and fixed
## A reference on position can be found on [https://www.w3schools.com/cssref/pr_class_position.asp W3Schools Position]
## Add a position absolute element over the grid like the flower on [https://www.bigzh.ch/ bigzh.ch]
## '''Bonus:''' Add a couple of position fixed and sticky elements randomly over the page. Have a look at [http://www.waltersantomauro.com/#/list waltersantomauro.com] for some inspiration.
## '''Bonus:''' You can learn more about position on this [https://www.linkedin.com/learning/css-layouts-from-float-to-flexbox-and-grid/position-relative-and-absolute LinkedIn Learning course]
# Fonts
## Look at [https://brutalistwebsites.com/ Brutalistwebsites.com] for some inspiration
## Watch [https://hrnl-my.sharepoint.com/:f:/g/personal/kranv_hr_nl/Eplujb6NkU9JkvXQL7en_wwBeJ63tLkAcRfWzVtE0jrXUg?e=fTdQah this video] on how to add select and add Google fonts
## Pick some nice [https://fonts.google.com Google Fonts]
## Add the fonts to your project
## '''Bonus:''' Maytal approves of your font selection 😁
## '''Bonus:''' Learn more about fonts on the web by watching this [https://www.linkedin.com/learning/css-essential-training-3/typography-for-the-web LinkedIn Learning Course]
 
'''Starter'''
<source lang="html5">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* In here we type CSS */
    </style>
</head>
<body>
    <div class="twoColumns">
        <div class="leftColumn">
            <h1>BRUTALIST</h1>
            <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut, consectetur cumque inventore fugiat ullam dolores sint quaerat debitis perspiciatis, placeat officiis veritatis magni ducimus enim minima qui sequi tempore quos.
            </p>
        </div>
        <div class="rightColumn">
            <h1>BRUTALIST-ER</h1>
            <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut, consectetur cumque inventore fugiat ullam dolores sint quaerat debitis perspiciatis, placeat officiis veritatis magni ducimus enim minima qui sequi tempore quos.
            </p>
        </div>
    </div>
    <img id="overlayImage" src="./brutalist.gif" />
</body>
</html>
</source>

Latest revision as of 14:47, 7 October 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.

Back to the Future.gif

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

Class 2

Demos

  1. BRUTALIST
    1. Take a look at BrutalistWebsites.com
  2. Code
    1. Build a two-column layout with an image over the layout
  3. Tasks
    1. Whiteboard drawing on the tasks for today

Class

  • During the class we work in groups of 2
  • Complete the tasks below
  • Then make the website your own by adding content and changing design
  • Make sure both your GIF's are visible on the website

First watch the following videos to understand CSS selectors: 1. Type and universal selectors 2. Class and ID selectors

It is recommended to first try and complete the tasks with only the instructions below. However, feel free to use these demo videos when you get stuck.

Tasks

To start a project and create a file, see VsCode documentation.

  1. CSS Grid
    1. A reference on CSS grid can be found on W3Schools CSS Grid.
    2. Create a two column website similar to kostasmurkudis.org
    3. Bonus: You can learn more about CSS grid on this LinkedIn Learning Course
    4. Bonus: Create the list with links on the left side like kostasmurkudis.org
  2. Position absolute and fixed
    1. A reference on position can be found on W3Schools Position
    2. Add a position absolute element over the grid like the flower on bigzh.ch
    3. Bonus: Add a couple of position fixed and sticky elements randomly over the page. Have a look at waltersantomauro.com for some inspiration.
    4. Bonus: You can learn more about position on this LinkedIn Learning course
  3. Fonts
    1. Look at Brutalistwebsites.com for some inspiration
    2. Watch this video on how to add select and add Google fonts
    3. Pick some nice Google Fonts
    4. Add the fonts to your project
    5. Bonus: Maytal approves of your font selection 😁
    6. Bonus: Learn more about fonts on the web by watching this LinkedIn Learning Course

Starter 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* In here we type CSS */
    </style>
</head>
<body>
    <div class="twoColumns">
        <div class="leftColumn">
            <h1>BRUTALIST</h1>
            <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut, consectetur cumque inventore fugiat ullam dolores sint quaerat debitis perspiciatis, placeat officiis veritatis magni ducimus enim minima qui sequi tempore quos.
            </p>
        </div>
        <div class="rightColumn">
            <h1>BRUTALIST-ER</h1>
            <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut, consectetur cumque inventore fugiat ullam dolores sint quaerat debitis perspiciatis, placeat officiis veritatis magni ducimus enim minima qui sequi tempore quos.
            </p>
        </div>
    </div>
    <img id="overlayImage" src="./brutalist.gif" />
</body>
</html>
Retrieved from ‘https://ps.wdka.nl/wiki/index.php?title=Course_Time_Machine&oldid=8879’