Editing Text And Code: Alice's Adventures in Computerland (section)

=== Class 5 ===

For this class we will use [https://www.linkedin.com/learning/ LinkedIn Learning]. You can login to [https://www.linkedin.com/learning/ LinkedIn Learning] with your school account.

'''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?]
# 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].
# 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].

''Online tools are available as well to make SVG animations. Try out for example Vivus Instant''
# Make your own animated SVGs with [https://maxwellito.github.io/vivus-instant/ Vivus Instant]. For more advanced usage, check the [https://maxwellito.github.io/vivus/ Vivus] JavaScript library.
# Add the animated SVGs made with Vivus to your project

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