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
- Build a two-column layout with an image over the layout
- Tasks
- Whiteboard drawing on the tasks for today
Class
- During the class we work in groups of 2
- Complete the tasks below
- Then make the website your own by adding content and changing design
- Make sure both your GIF's are visible on the website
First watch the following videos to understand CSS selectors: 1. Type and universal selectors 2. 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.
- CSS Grid
- A reference on CSS grid can be found on W3Schools CSS Grid.
- Create a two column website similar to kostasmurkudis.org
- Bonus: You can learn more about CSS grid on this LinkedIn Learning 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 bigzh.ch
- Bonus: Add a couple of position fixed and sticky elements randomly over the page. Have a look at waltersantomauro.com for some inspiration.
- Bonus: You can learn more about position on this LinkedIn Learning course
- Fonts
- Look at Brutalistwebsites.com for some inspiration
- Watch this video on how to add select and add Google fonts
- Pick some nice Google Fonts
- Add the fonts to your project
- Bonus: Maytal approves of your font selection 😁
- Bonus: Learn more about fonts on the web by watching this LinkedIn Learning Course
Starter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* In here we type CSS */
</style>
</head>
<body>
<div class="twoColumns">
<div class="leftColumn">
<h1>BRUTALIST</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut, consectetur cumque inventore fugiat ullam dolores sint quaerat debitis perspiciatis, placeat officiis veritatis magni ducimus enim minima qui sequi tempore quos.
</p>
</div>
<div class="rightColumn">
<h1>BRUTALIST-ER</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut, consectetur cumque inventore fugiat ullam dolores sint quaerat debitis perspiciatis, placeat officiis veritatis magni ducimus enim minima qui sequi tempore quos.
</p>
</div>
</div>
<img id="overlayImage" src="./brutalist.gif" />
</body>
</html>
