Text And Code: Alice's Adventures in Computerland - Revision history

VKranendonk: /* Class 4 */

2022-10-04T09:54:56Z

Class 4

← Older revision		Revision as of 09:54, 4 October 2022
Line 101:		Line 101:

	'''Videos'''		'''Videos'''

	Videos for the double scroll and positioning paragraphs are available [https://hrnl-my.sharepoint.com/:f:/g/personal/kranv_hr_nl/EkXfK-yko7NCiJMk_H-FmLcBSomuBHpXAYTktS9u3ekkcg?e=xDp72c here]		Videos for the double scroll and positioning paragraphs are available [https://hrnl-my.sharepoint.com/:f:/g/personal/kranv_hr_nl/EkXfK-yko7NCiJMk_H-FmLcBSomuBHpXAYTktS9u3ekkcg?e=xDp72c here]

VKranendonk: /* Class 4 */

2022-10-04T09:54:48Z

Class 4

← Older revision		Revision as of 09:54, 4 October 2022
Line 99:		Line 99:
	'''Duration'''		'''Duration'''
	2 hours		2 hours

			'''Videos'''
			Videos for the double scroll and positioning paragraphs are available [https://hrnl-my.sharepoint.com/:f:/g/personal/kranv_hr_nl/EkXfK-yko7NCiJMk_H-FmLcBSomuBHpXAYTktS9u3ekkcg?e=xDp72c here]

	'''Demos'''		'''Demos'''

VKranendonk: /* Class 4 */

2022-10-04T09:04:38Z

Class 4

← Older revision		Revision as of 09:04, 4 October 2022
Line 96:		Line 96:

	=== Class 4 ===		=== Class 4 ===

			'''Duration'''
			2 hours

	'''Demos'''		'''Demos'''

VKranendonk: /* Class 4 */

2022-10-04T08:59:22Z

Class 4

← Older revision		Revision as of 08:59, 4 October 2022
Line 98:		Line 98:

	'''Demos'''		'''Demos'''
	# ~~Show element~~ with ~~JS on mouseover~~		# Making a double scroll page with anchors
	# ~~Show multiple~~ elements ~~with JS~~		# Position paragraphs with float left and position absolute
			# Modify classes on elements after user events

	'''Tasks'''		'''Tasks'''
	# ~~Use the JS functions to show images (or other elements) on hover~~		# Follow along coding sessions
	~~# Create a navigation with images~~

	'''Extra'''		'''Extra'''

VKranendonk: /* Class 5 */

2022-10-04T08:45:29Z

Class 5

← Older revision		Revision as of 08:45, 4 October 2022
Line 120:		Line 120:
	'''Tasks'''		'''Tasks'''
	# Not sure what an SVG is? Watch the video [https://www.linkedin.com/learning/learning-svg/what-is-svg?autoplay=true&resume=false&u=57693369 What is SVG?]		# Not sure what an SVG is? Watch the video [https://www.linkedin.com/learning/learning-svg/what-is-svg?autoplay=true&resume=false&u=57693369 What is SVG?]
	# Try drawing ~~and~~ SVG '''with 2 shapes''' using only code by watching some of the videos in [https://www.linkedin.com/learning/learning-svg/svg-shapes-overview?autoplay=true&resume=false&u=57693369 3. Creating SVGs in code]		# Try drawing one SVG '''with two shapes''' using only code by watching some of the videos in [https://www.linkedin.com/learning/learning-svg/svg-shapes-overview?autoplay=true&resume=false&u=57693369 3. Creating SVGs in code]
	# Open the SVG you made with Joseph in the browser and use the inspector to inspect and modify the SVG. Watch [https://www.linkedin.com/learning/learning-svg/svg-as-code?autoplay=true&resume=false&u=57693369 SVG as code].		# Open the SVG you made with Joseph in the browser and use the inspector to inspect and modify the SVG. Watch [https://www.linkedin.com/learning/learning-svg/svg-as-code?autoplay=true&resume=false&u=57693369 SVG as code].
	# Add your SVG to an HTML file in Visual Studio Code, see [https://www.linkedin.com/learning/learning-svg/add-svg-to-a-web-document?autoplay=true&resume=false&u=57693369 Add SVG to a web document].		# Add your SVG to an HTML file in Visual Studio Code, see [https://www.linkedin.com/learning/learning-svg/add-svg-to-a-web-document?autoplay=true&resume=false&u=57693369 Add SVG to a web document].

VKranendonk: /* Class 5 */

2022-10-04T08:44:05Z

Class 5

← Older revision		Revision as of 08:44, 4 October 2022
Line 122:		Line 122:
	# Try drawing and SVG '''with 2 shapes''' using only code by watching some of the videos in [https://www.linkedin.com/learning/learning-svg/svg-shapes-overview?autoplay=true&resume=false&u=57693369 3. Creating SVGs in code]		# Try drawing and SVG '''with 2 shapes''' using only code by watching some of the videos in [https://www.linkedin.com/learning/learning-svg/svg-shapes-overview?autoplay=true&resume=false&u=57693369 3. Creating SVGs in code]
	# Open the SVG you made with Joseph in the browser and use the inspector to inspect and modify the SVG. Watch [https://www.linkedin.com/learning/learning-svg/svg-as-code?autoplay=true&resume=false&u=57693369 SVG as code].		# Open the SVG you made with Joseph in the browser and use the inspector to inspect and modify the SVG. Watch [https://www.linkedin.com/learning/learning-svg/svg-as-code?autoplay=true&resume=false&u=57693369 SVG as code].
	# Add your SVG to ~~your existing or new web project~~, see [https://www.linkedin.com/learning/learning-svg/add-svg-to-a-web-document?autoplay=true&resume=false&u=57693369 Add SVG to a web document].		# Add your SVG to an HTML file in Visual Studio Code, see [https://www.linkedin.com/learning/learning-svg/add-svg-to-a-web-document?autoplay=true&resume=false&u=57693369 Add SVG to a web document].
	# Animate your SVG with CSS, see video [https://www.linkedin.com/learning/css-animation-14153685/animating-svg-with-css?autoplay=true&u=57693369 Animating SVG with CSS]. You might first want to understand CSS animations by watching [https://www.linkedin.com/learning/css-animation-14153685/css-keyframe-animation-fundamentals?autoplay=true&resume=false&u=57693369 2. Understanding CSS animations].		# Animate your SVG with CSS, see video [https://www.linkedin.com/learning/css-animation-14153685/animating-svg-with-css?autoplay=true&u=57693369 Animating SVG with CSS]. You might first want to understand CSS animations by watching [https://www.linkedin.com/learning/css-animation-14153685/css-keyframe-animation-fundamentals?autoplay=true&resume=false&u=57693369 2. Understanding CSS animations].

VKranendonk: /* Class 5 */

2022-10-04T08:43:02Z

Class 5

← Older revision		Revision as of 08:43, 4 October 2022
Line 120:		Line 120:
	'''Tasks'''		'''Tasks'''
	# Not sure what an SVG is? Watch the video [https://www.linkedin.com/learning/learning-svg/what-is-svg?autoplay=true&resume=false&u=57693369 What is SVG?]		# Not sure what an SVG is? Watch the video [https://www.linkedin.com/learning/learning-svg/what-is-svg?autoplay=true&resume=false&u=57693369 What is SVG?]
	# Try drawing and SVG '''with 2 shapes''' using only code - [https://www.linkedin.com/learning/learning-svg/svg-shapes-overview?autoplay=true&resume=false&u=57693369 3. Creating SVGs in code]		# Try drawing and SVG '''with 2 shapes''' using only code by watching some of the videos in [https://www.linkedin.com/learning/learning-svg/svg-shapes-overview?autoplay=true&resume=false&u=57693369 3. Creating SVGs in code]
	# Open the SVG you made with Joseph in the browser and use the inspector to inspect and modify the SVG. Watch [https://www.linkedin.com/learning/learning-svg/svg-as-code?autoplay=true&resume=false&u=57693369 SVG as code].		# Open the SVG you made with Joseph in the browser and use the inspector to inspect and modify the SVG. Watch [https://www.linkedin.com/learning/learning-svg/svg-as-code?autoplay=true&resume=false&u=57693369 SVG as code].
	# Add your SVG to your existing or new web project, see [https://www.linkedin.com/learning/learning-svg/add-svg-to-a-web-document?autoplay=true&resume=false&u=57693369 Add SVG to a web document].		# Add your SVG to your existing or new web project, see [https://www.linkedin.com/learning/learning-svg/add-svg-to-a-web-document?autoplay=true&resume=false&u=57693369 Add SVG to a web document].

VKranendonk: /* Class 5 */

2022-10-04T08:42:22Z

Class 5

← Older revision		Revision as of 08:42, 4 October 2022
Line 123:		Line 123:
	# Open the SVG you made with Joseph in the browser and use the inspector to inspect and modify the SVG. Watch [https://www.linkedin.com/learning/learning-svg/svg-as-code?autoplay=true&resume=false&u=57693369 SVG as code].		# Open the SVG you made with Joseph in the browser and use the inspector to inspect and modify the SVG. Watch [https://www.linkedin.com/learning/learning-svg/svg-as-code?autoplay=true&resume=false&u=57693369 SVG as code].
	# Add your SVG to your existing or new web project, see [https://www.linkedin.com/learning/learning-svg/add-svg-to-a-web-document?autoplay=true&resume=false&u=57693369 Add SVG to a web document].		# Add your SVG to your existing or new web project, see [https://www.linkedin.com/learning/learning-svg/add-svg-to-a-web-document?autoplay=true&resume=false&u=57693369 Add SVG to a web document].
	# Animate your SVG with CSS, see video [https://www.linkedin.com/learning/css-animation-14153685/animating-svg-with-css?autoplay=true&u=57693369]. You might first want to understand CSS animations by watching [https://www.linkedin.com/learning/css-animation-14153685/css-keyframe-animation-fundamentals?autoplay=true&resume=false&u=57693369 2. Understanding CSS animations].		# Animate your SVG with CSS, see video [https://www.linkedin.com/learning/css-animation-14153685/animating-svg-with-css?autoplay=true&u=57693369 Animating SVG with CSS]. You might first want to understand CSS animations by watching [https://www.linkedin.com/learning/css-animation-14153685/css-keyframe-animation-fundamentals?autoplay=true&resume=false&u=57693369 2. Understanding CSS animations].

	''Online tools are available as well to make SVG animations. Try out for example Vivus Instant''		''Online tools are available as well to make SVG animations. Try out for example Vivus Instant''

VKranendonk: /* Class 5 */

2022-10-04T08:41:10Z

Class 5

← Older revision		Revision as of 08:41, 4 October 2022
Line 131:		Line 131:
	'''Extra'''		'''Extra'''

	# [https://www.linkedin.com/learning/svg-clipping-masking-and-filters/clipping-masking-and-filtering-svg?autoplay=true&u=57693369 ]Clipping and masking with SVGs		# [https://www.linkedin.com/learning/svg-clipping-masking-and-filters/clipping-masking-and-filtering-svg?autoplay=true&u=57693369 Clipping and masking with SVGs]

	== Tools overview ==		== Tools overview ==

VKranendonk: /* Class 5 */

2022-10-04T08:37:33Z

Class 5

← Older revision		Revision as of 08:37, 4 October 2022
Line 121:		Line 121:
	# Not sure what an SVG is? Watch the video [https://www.linkedin.com/learning/learning-svg/what-is-svg?autoplay=true&resume=false&u=57693369 What is SVG?]		# Not sure what an SVG is? Watch the video [https://www.linkedin.com/learning/learning-svg/what-is-svg?autoplay=true&resume=false&u=57693369 What is SVG?]
	# Try drawing and SVG '''with 2 shapes''' using only code - [https://www.linkedin.com/learning/learning-svg/svg-shapes-overview?autoplay=true&resume=false&u=57693369 3. Creating SVGs in code]		# Try drawing and SVG '''with 2 shapes''' using only code - [https://www.linkedin.com/learning/learning-svg/svg-shapes-overview?autoplay=true&resume=false&u=57693369 3. Creating SVGs in code]
	# Open the SVG you made with Joseph in the browser and use the inspector to inspect and modify the SVG. ~~See~~ [https://www.linkedin.com/learning/learning-svg/svg-as-code?autoplay=true&resume=false&u=57693369 SVG as code].		# Open the SVG you made with Joseph in the browser and use the inspector to inspect and modify the SVG. Watch [https://www.linkedin.com/learning/learning-svg/svg-as-code?autoplay=true&resume=false&u=57693369 SVG as code].
	# Add your SVG to your existing or new web project [https://www.linkedin.com/learning/learning-svg/add-svg-to-a-web-document?autoplay=true&resume=false&u=57693369 Add SVG to a web document]		# Add your SVG to your existing or new web project, see [https://www.linkedin.com/learning/learning-svg/add-svg-to-a-web-document?autoplay=true&resume=false&u=57693369 Add SVG to a web document].
	# Animate your SVG with CSS, see video [https://www.linkedin.com/learning/css-animation-14153685/animating-svg-with-css?autoplay=true&u=57693369]. You might first want to understand CSS animations by watching [https://www.linkedin.com/learning/css-animation-14153685/css-keyframe-animation-fundamentals?autoplay=true&resume=false&u=57693369 2. Understanding CSS animations]		# Animate your SVG with CSS, see video [https://www.linkedin.com/learning/css-animation-14153685/animating-svg-with-css?autoplay=true&u=57693369]. You might first want to understand CSS animations by watching [https://www.linkedin.com/learning/css-animation-14153685/css-keyframe-animation-fundamentals?autoplay=true&resume=false&u=57693369 2. Understanding CSS animations].

	''Online tools are available as well to make SVG animations. Try out for example Vivus Instant''		''Online tools are available as well to make SVG animations. Try out for example Vivus Instant''