Difference between revisions of "Course Time Machine"
VKranendonk (talk | contribs) |
VKranendonk (talk | contribs) |
||
Line 75: | Line 75: | ||
## 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-relative-and-absolute?autoplay=true&resume=false&u=57693369 Position: Fixed, sticky and static] | ||
## Add a couple of position | ## '''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&resume=false&u=57693369 Web Fonts with Google Fonts] (the interface of Google Fonts has changed a bit) | ||
Line 82: | Line 82: | ||
## 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&resume=false&u=57693369 Project: Google Fonts] | ||
## Add the fonts to your project | ## Add the fonts to your project | ||
## '''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 10:35, 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.
Program
Class 1
Demos
- Websites in the 90's
- Take a look at 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
Class 2
Demos
- BRUTALIST
- Take a look at BrutalistWebsites.com
- Code
- CSS classes and IDs
- Tasks
- Working in teams of 3
- Whiteboard drawing on the tasks for today
- 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.
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
- CSS Grid
- Watch the first 4 videos (Intro to CSS Grid -> Sizing Rows and Columns) in the section 3. Grid Layout on LinkedIn Learning.
- Create a two column website similar to kostasmurkudis.org
- Bonus: Create the list with links on the left side like kostasmurkudis.org
- Position absolute and fixed
- Watch 1 video Position Explained
- Watch 1 video Position: Relative and Absolute
- Add a position absolute element over the grid like the flower on kostasmurkudis.org
- Watch 1 video Position: Fixed, sticky and static
- Bonus: Add a couple of position fixed and sticky elements randomly over the page. Have a look at waltersantomauro.com for some inspiration.
- Fonts
- Watch 1 video Web Fonts with Google Fonts (the interface of Google Fonts has changed a bit)
- Look at Brutalistwebsites.com for some inspiration
- Pick some nice Google Fonts
- Watch 1 video Project: Google Fonts
- Add the fonts to your project
- 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.