Difference between revisions of "Course Time Machine"
VKranendonk (talk | contribs) |
VKranendonk (talk | contribs) |
||
Line 58: | Line 58: | ||
'''Class''' | '''Class''' | ||
During the class we will work in groups of 3. | During the class we will work in groups of 3. 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. | ||
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 [https://www.linkedin.com/learning/css-essential-training-3/type-and-universal-selectors Type and universal selectors] and [https://www.linkedin.com/learning/css-essential-training-3/class-and-id-selectors Class and ID selectors] | In this class we have a live demo on CSS selectors. If you still feel a need to understand CSS selectors check out videos [https://www.linkedin.com/learning/css-essential-training-3/type-and-universal-selectors Type and universal selectors] and [https://www.linkedin.com/learning/css-essential-training-3/class-and-id-selectors Class and ID selectors] | ||
Line 67: | Line 65: | ||
# CSS Grid | # 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] | ## Create a two column website similar to [https://kostasmurkudis.org/about kostasmurkudis.org] | ||
## You can learn more about CSS grid on this https://www.linkedin.com/learning/responsive-layout/intro-to-css-grid?autoplay=true LinkedIn Course] | |||
## '''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 | ||
## | ## 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/ kostasmurkudis.org] | ## Add a position absolute element over the grid like the flower on [https://www.bigzh.ch/ kostasmurkudis.org] | ||
## '''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. | ||
### You can learn more on LinkedIn Learning: | |||
### Video 1: [https://www.linkedin.com/learning/cutting-edge-css/position-explained-14448738?autoplay=true&u=57693369 Position Explained] | |||
### Video 2: [https://www.linkedin.com/learning/css-layouts-from-float-to-flexbox-and-grid/position-relative-and-absolute?autoplay=true | |||
Position: Relative and Absolute] | |||
### Video 3: [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] | |||
# Fonts | # Fonts | ||
## 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 | ## Watch [https://hrnl-my.sharepoint.com/:f:/g/personal/kranv_hr_nl/Eplujb6NkU9JkvXQL7en_wwBeJ63tLkAcRfWzVtE0jrXUg?e=fTdQah this video] | ||
## 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 10:55, 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.
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. 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
- CSS Grid
- A reference on CSS grid can be found on W3Schools CSS Grid.
- Create a two column website similar to kostasmurkudis.org
- You can learn more about CSS grid on this https://www.linkedin.com/learning/responsive-layout/intro-to-css-grid?autoplay=true LinkedIn Course]
- Bonus: Create the list with links on the left side like kostasmurkudis.org
- Position absolute and fixed
- A reference on position can be found on W3Schools Position
- Add a position absolute element over the grid like the flower on kostasmurkudis.org
- Bonus: Add a couple of position fixed and sticky elements randomly over the page. Have a look at waltersantomauro.com for some inspiration.
- You can learn more on LinkedIn Learning:
- Video 1: Position Explained
- Video 2: [https://www.linkedin.com/learning/css-layouts-from-float-to-flexbox-and-grid/position-relative-and-absolute?autoplay=true
Position: Relative and Absolute]
- Video 3: Position: Fixed, sticky and static
- Fonts
- Look at Brutalistwebsites.com for some inspiration
- Pick some nice Google Fonts
- Watch this video
- 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.