Difference between revisions of "Course Time Machine"

From Publication Station
Line 67: Line 67:


# CSS Grid
# CSS Grid
## Watch the first 4 videos (Intro to CSS Grid -> Sizing Rows and Columns) in the section [https://www.linkedin.com/learning/responsive-layout/intro-to-css-grid?autoplay=true&resume=false&u=57693369 3. Grid Layout] on LinkedIn Learning.
## Watch the first 4 videos (Intro to CSS Grid -> Sizing Rows and Columns) in the section [https://www.linkedin.com/learning/responsive-layout/intro-to-css-grid?autoplay=true 3. Grid Layout] on LinkedIn Learning.
## Create a two column website similar to [https://kostasmurkudis.org/about kostasmurkudis.org]
## Create a two column website similar to [https://kostasmurkudis.org/about kostasmurkudis.org]
## '''Bonus:''' Create the list with links on the left side like [https://kostasmurkudis.org/about kostasmurkudis.org]
## '''Bonus:''' Create the list with links on the left side like [https://kostasmurkudis.org/about kostasmurkudis.org]
# Position absolute and fixed
# Position absolute and fixed
## Watch 1 video [https://www.linkedin.com/learning/cutting-edge-css/position-explained-14448738?autoplay=true&u=57693369 Position Explained]
## Watch 1 video [https://www.linkedin.com/learning/cutting-edge-css/position-explained-14448738?autoplay=true&u=57693369 Position Explained]
## Watch 1 video [https://www.linkedin.com/learning/css-layouts-from-float-to-flexbox-and-grid/position-relative-and-absolute?autoplay=true&resume=false&u=57693369 Position: Relative and Absolute]
## Watch 1 video [https://www.linkedin.com/learning/css-layouts-from-float-to-flexbox-and-grid/position-relative-and-absolute?autoplay=true  Position: Relative and Absolute]
## Add a position absolute element over the grid like the flower on [https://www.bigzh.ch/ kostasmurkudis.org]
## Add a position absolute element over the grid like the flower on [https://www.bigzh.ch/ kostasmurkudis.org]
## Watch 1 video [https://www.linkedin.com/learning/css-layouts-from-float-to-flexbox-and-grid/position-relative-and-absolute?autoplay=true&resume=false&u=57693369 Position: Fixed, sticky and static]
## Watch 1 video [https://www.linkedin.com/learning/css-layouts-from-float-to-flexbox-and-grid/position-fixed-sticky-and-static?autoplay=true  Position: Fixed, sticky and static]
## '''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:''' 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.
# Fonts
# Fonts
## Watch 1 video [https://www.linkedin.com/learning/css-essential-training-3/web-fonts-with-google-fonts?autoplay=true&resume=false&u=57693369 Web Fonts with Google Fonts] (the interface of Google Fonts has changed a bit)
## Watch 1 video [https://www.linkedin.com/learning/css-essential-training-3/web-fonts-with-google-fonts?autoplay=true Web Fonts with Google Fonts] (the interface of Google Fonts has changed a bit)
## Look at [https://brutalistwebsites.com/ Brutalistwebsites.com] for some inspiration
## Look at [https://brutalistwebsites.com/ Brutalistwebsites.com] for some inspiration
## Pick some nice [https://fonts.google.com Google Fonts]
## Pick some nice [https://fonts.google.com Google Fonts]
## Watch 1 video [https://www.linkedin.com/learning/css-essential-training-3/project-google-fonts?autoplay=true&resume=false&u=57693369 Project: Google Fonts]
## Watch 1 video [https://www.linkedin.com/learning/css-essential-training-3/project-google-fonts?autoplay=true Project: Google Fonts]
## Add the fonts to your project
## Add the fonts to your project
## '''Bonus:''' Maytal approves of your font selection 😁
## '''Bonus:''' Maytal approves of your font selection 😁


''It is recommended to first try and complete the tasks with only the instructions above. 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.''
''It is recommended to first try and complete the tasks with only the instructions above. 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.''

Revision as of 11:19, 5 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 classes and IDs
  3. Tasks
    1. Working in teams of 3
    2. Whiteboard drawing on the tasks for today
    3. Installing Live Share

Class

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. Feel free to adapt each task to your own design ideas.

In this class we have a live demo on CSS selectors. If you still feel a need to understand CSS selectors check out videos Type and universal selectors and Class and ID selectors

Tasks

  1. CSS Grid
    1. Watch the first 4 videos (Intro to CSS Grid -> Sizing Rows and Columns) in the section 3. Grid Layout on LinkedIn Learning.
    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. Watch 1 video Position Explained
    2. Watch 1 video Position: Relative and Absolute
    3. Add a position absolute element over the grid like the flower on kostasmurkudis.org
    4. Watch 1 video Position: Fixed, sticky and static
    5. Bonus: Add a couple of position fixed and sticky elements randomly over the page. Have a look at waltersantomauro.com for some inspiration.
  3. Fonts
    1. Watch 1 video Web Fonts with Google Fonts (the interface of Google Fonts has changed a bit)
    2. Look at Brutalistwebsites.com for some inspiration
    3. Pick some nice Google Fonts
    4. Watch 1 video Project: Google Fonts
    5. Add the fonts to your project
    6. Bonus: Maytal approves of your font selection 😁

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

Retrieved from ‘https://ps.wdka.nl/wiki/index.php?title=Course_Time_Machine&oldid=8858’