Difference between revisions of "Course Time Machine"
From Publication Station
VKranendonk (talk | contribs) |
VKranendonk (talk | contribs) |
||
Line 50: | Line 50: | ||
## Take a look at [https://brutalistwebsites.com/ BrutalistWebsites.com] | ## Take a look at [https://brutalistwebsites.com/ BrutalistWebsites.com] | ||
# Code | # Code | ||
## CSS and classes | ## CSS and classes | ||
## Setting the height of the body (so the CSS grid can take height) | ## Setting the height of the body (so the CSS grid can take height) | ||
## Installing Live Share | |||
'''Tasks''' | '''Tasks''' |
Revision as of 10:07, 30 September 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 and classes
- Setting the height of the body (so the CSS grid can take height)
- 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.
- CSS Grid
- Read our documentation on CSS Grid or w3schools doc on CSS grid
- 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
- Check w3schools docs on position
- Add a position fixed element over the grid like the flower on kostasmurkudis.org
- Add a couple of position absolute elements randomly over the page. Have a look at waltersantomauro.com for some inspiration.
- Fonts
- Look at Brutalistwebsites.com for some inspiration
- Pick some nice Google Fonts
- Read this documentation on implementation
- Add the fonts to your project