Difference between revisions of "Course Time Machine"

From Publication Station
Line 60: Line 60:
We have 3 tasks to complete, each team member picks up one task. After completing one task you explain to your team how the code works.
We have 3 tasks to complete, each team member picks up one task. After completing one task you explain to your team how the code works.


We recommend you first try to complete the task with the instructions below. When you get stuck, [https://hrnl-my.sharepoint.com/:f:/g/personal/kranv_hr_nl/Eplujb6NkU9JkvXQL7en_wwBeJ63tLkAcRfWzVtE0jrXUg?e=fTdQah demo videos] are also available.
First try with your team to complete the task with the instructions below. When you get stuck, [https://hrnl-my.sharepoint.com/:f:/g/personal/kranv_hr_nl/Eplujb6NkU9JkvXQL7en_wwBeJ63tLkAcRfWzVtE0jrXUg?e=fTdQah demo videos] are also available.


# CSS Grid
# CSS Grid

Revision as of 07:59, 3 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. CSS and classes
    2. Setting the height of the body (so the CSS grid can take height)
    3. Installing Live Share

Tasks

During the class we will work in groups of 3. Using the Live Share functionality in Visual Studio Code you can work together.

We have 3 tasks to complete, each team member picks up one task. After completing one task you explain to your team how the code works.

First try with your team to complete the task with the instructions below. When you get stuck, demo videos are also available.

  1. CSS Grid
    1. Read our documentation on CSS Grid or w3schools doc on CSS grid
    2. Create a two column website similar to kostasmurkudis.org
    3. Bonus: Create the list with links on the left side like kostasmurkudis.org
  2. Position absolute and fixed
    1. Check w3schools docs on position
    2. Add a position fixed element over the grid like the flower on kostasmurkudis.org
    3. Add a couple of position absolute elements randomly over the page. Have a look at waltersantomauro.com for some inspiration.
  3. Fonts
    1. Look at Brutalistwebsites.com for some inspiration
    2. Pick some nice Google Fonts
    3. Read this documentation on implementation
    4. Add the fonts to your project