Course Time Machine - Revision history

VKranendonk: /* Class 2 */

2022-10-07T14:47:15Z

Class 2

← Older revision		Revision as of 14:47, 7 October 2022
Line 52:		Line 52:
	## Build a two-column layout with an image over the layout		## Build a two-column layout with an image over the layout
	# Tasks		# Tasks
	~~## Working in teams of 3~~
	## Whiteboard drawing on the tasks for today		## Whiteboard drawing on the tasks for today

	'''Class'''		'''Class'''

	* During the class we work in groups of 3.		* During the class we work in groups of 2
	* ~~The team has 3~~ tasks ~~to complete, each team member picks up one task.~~		* Complete the tasks below
	* ~~After completing one task you explain to your team how the code works and help your team mates to add your code.~~		* Then make the website your own by adding content and changing design
	* Make the website your own by adding content and changing design		* Make sure both your GIF's are visible on the website

	~~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]		First watch the following videos to understand CSS selectors:
			1. [https://www.linkedin.com/learning/css-essential-training-3/type-and-universal-selectors Type and universal selectors]
			2. [https://www.linkedin.com/learning/css-essential-training-3/class-and-id-selectors 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 [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 below. 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.''

VKranendonk: /* Program */

2022-10-07T12:34:56Z

Program

← Older revision		Revision as of 12:34, 7 October 2022
Line 87:		Line 87:
	## '''Bonus:''' Maytal approves of your font selection 😁		## '''Bonus:''' Maytal approves of your font selection 😁
	## '''Bonus:''' Learn more about fonts on the web by watching this [https://www.linkedin.com/learning/css-essential-training-3/typography-for-the-web LinkedIn Learning Course]		## '''Bonus:''' Learn more about fonts on the web by watching this [https://www.linkedin.com/learning/css-essential-training-3/typography-for-the-web LinkedIn Learning Course]

			'''Starter'''
			<source lang="html5">
			<!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>
			</source>

VKranendonk: /* Class 2 */

2022-10-07T12:21:57Z

Class 2

← Older revision		Revision as of 12:21, 7 October 2022
Line 73:		Line 73:
	## A reference on CSS grid can be found on [https://www.w3schools.com/css/css_grid.asp W3Schools 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]
	## '''Bonus:''' 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:''' You can learn more about CSS grid on this [https://www.linkedin.com/learning/responsive-layout/intro-to-css-grid?autoplay=true LinkedIn Learning 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
Line 86:		Line 86:
	## 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 😁
	## '''Bonus:''' Learn more about fonts on the web by watching this [https://www.linkedin.com/learning/css-essential-training-3/typography-for-the-web LinkedIn Course]		## '''Bonus:''' Learn more about fonts on the web by watching this [https://www.linkedin.com/learning/css-essential-training-3/typography-for-the-web LinkedIn Learning Course]

VKranendonk: /* Class 2 */

2022-10-07T12:21:22Z

Class 2

← Older revision		Revision as of 12:21, 7 October 2022
Line 86:		Line 86:
	## 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 😁
	## '''Bonus:''' Learn more about fonts on the web by watching this [~~LinkedIn Learning course~~ https://www.linkedin.com/learning/css-essential-training-3/typography-for-the-web]		## '''Bonus:''' Learn more about fonts on the web by watching this [https://www.linkedin.com/learning/css-essential-training-3/typography-for-the-web LinkedIn Course]

VKranendonk: /* Class 2 */

2022-10-07T12:17:16Z

Class 2

← Older revision		Revision as of 12:17, 7 October 2022
Line 86:		Line 86:
	## 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 😁
			## '''Bonus:''' Learn more about fonts on the web by watching this [LinkedIn Learning course https://www.linkedin.com/learning/css-essential-training-3/typography-for-the-web]

VKranendonk: /* Class 2 */

2022-10-07T12:13:32Z

Class 2

← Older revision		Revision as of 12:13, 7 October 2022
Line 60:		Line 60:
	* The team has 3 tasks to complete, each team member picks up one task.		* The team has 3 tasks to complete, each team member picks up one task.
	* After completing one task you explain to your team how the code works and help your team mates to add your code.		* After completing one task you explain to your team how the code works and help your team mates to add your code.
	* ~~Feel free to adapt each task to~~ your own design ~~ideas.~~		* Make the website your own by adding content and changing design

	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]		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]

VKranendonk: /* Class 2 */

2022-10-07T12:12:57Z

Class 2

← Older revision		Revision as of 12:12, 7 October 2022
Line 73:		Line 73:
	## A reference on CSS grid can be found on [https://www.w3schools.com/css/css_grid.asp W3Schools 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:''' 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
Line 79:		Line 79:
	## Add a position absolute element over the grid like the flower on [https://www.bigzh.ch/ bigzh.ch]		## Add a position absolute element over the grid like the flower on [https://www.bigzh.ch/ bigzh.ch]
	## '''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 about position on this [https://www.linkedin.com/learning/css-layouts-from-float-to-flexbox-and-grid/position-relative-and-absolute LinkedIn Learning course]		## '''Bonus:''' You can learn more about position on this [https://www.linkedin.com/learning/css-layouts-from-float-to-flexbox-and-grid/position-relative-and-absolute LinkedIn Learning course]
	# Fonts		# Fonts
	## Look at [https://brutalistwebsites.com/ Brutalistwebsites.com] for some inspiration		## Look at [https://brutalistwebsites.com/ Brutalistwebsites.com] for some inspiration

VKranendonk: /* Class 2 */

2022-10-07T12:11:58Z

Class 2

← Older revision		Revision as of 12:11, 7 October 2022
Line 82:		Line 82:
	# Fonts		# Fonts
	## Look at [https://brutalistwebsites.com/ Brutalistwebsites.com] for some inspiration		## Look at [https://brutalistwebsites.com/ Brutalistwebsites.com] for some inspiration
			## Watch [https://hrnl-my.sharepoint.com/:f:/g/personal/kranv_hr_nl/Eplujb6NkU9JkvXQL7en_wwBeJ63tLkAcRfWzVtE0jrXUg?e=fTdQah this video] on how to add select and add Google fonts
	## Pick some nice [https://fonts.google.com Google Fonts]		## Pick some nice [https://fonts.google.com Google Fonts]
	~~## Watch [https://hrnl-my.sharepoint.com/:f:/g/personal/kranv_hr_nl/Eplujb6NkU9JkvXQL7en_wwBeJ63tLkAcRfWzVtE0jrXUg?e=fTdQah this video] on how to add fonts~~
	## 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 😁

VKranendonk: /* Class 2 */

2022-10-07T12:10:30Z

Class 2

← Older revision		Revision as of 12:10, 7 October 2022
Line 54:		Line 54:
	## Working in teams of 3		## Working in teams of 3
	## Whiteboard drawing on the tasks for today		## Whiteboard drawing on the tasks for today
	~~## Installing Live Share~~

	'''Class'''		'''Class'''

VKranendonk: /* Class 2 */

2022-10-07T12:07:09Z

Class 2

← Older revision		Revision as of 12:07, 7 October 2022
Line 58:		Line 58:
	'''Class'''		'''Class'''

	* During the class we work in groups of 3.		* During the class we work in groups of 3.
	* The team has 3 tasks to complete, each team member picks up one task.		* The team has 3 tasks to complete, each team member picks up one task.
	* After completing one task you explain to your team how the code works and help your team mates to add your code.		* After completing one task you explain to your team how the code works and help your team mates to add your code.
	* Feel free to adapt each task to your own design ideas.		* Feel free to adapt each task to your own design ideas.

	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]		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]