Course Time Machine
From Publication Station
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
- 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. After completing one task you explain to your team how the code works.
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.
- 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 abosulte element over the grid like the flower on kostasmurkudis.org
- Watch 1 video Position: Fixed, sticky and static
- Add a couple of position absolute 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