Course Time Machine

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.

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. Working in teams of 3
   2. Whiteboard drawing on the tasks for today

Class

• During the class we work in groups of 3.
• The team has 3 tasks to complete, each team member picks up one task.
• After completing one task you explain to your team how the code works and help your team mates to add your code.
• Feel free to adapt each task to your own design ideas.

If you still feel a need to understand CSS selectors check out videos Type and universal selectors and 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. You can learn more about CSS grid on this LinkedIn 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. You can learn more about position on this LinkedIn Learning course
3. Fonts
   1. Look at Brutalistwebsites.com for some inspiration
   2. Pick some nice Google Fonts
   3. Watch this video on how to add fonts
   4. Add the fonts to your project
   5. Bonus: Maytal approves of your font selection 😁