If we are editing the index.html file in the entry2 folder, how might we create a link back to the index.html file in the far left column?
<ahref="../../index.html">Return to homepage</a>
CSS classes
CSS classes allow us to add custom controls to a page layout. With CSS, we can target all html elements with an HTML selector like this:
Or we can add specific controls to only certain elements using classes, like this:
📓 SVGs and CSS Animations
A SVG is a scalable vector graphic. It’s a useful image format for us because:
It retains quality at a variety of sizes
Can be animated and edited with code
Is a relatively small image size
It’s a preferable image type for:
logos(on websites)
iconography
vector based illustration
1. Creating the SVG
First create your artwork in illustrator.
Simplify your shapes so that there are as few moves as possible
If you don’t want to edit the stroke weight, make sure to expand your shape
Work in a clean environment. File assets should only have the artwork on the artboard(nothing in the margins and no leftover pixels)
Export for screens, naming your asset something descriptive
Great! When you have that asset you can preview it and see that it looks like an image. Try opening that file in a text editor. You should see something that looks like this
A couple things to notice: there is an ID in place(if you recall, IDs are one way of specifying an element between the HTML and CSS). You can rename this to something you’d like, or give it a class instead.
You’ll see that this particular image is made up of a path and circle both of which have classes generated that you can rename. Every SVG is made up of different elements. Sometimes it can be tricky to figure out what you need to select to target the shape, so this is when using Google Chrome inspector is really handy.
Midterm Refreshers
Linking backwards
<a href="../../index.html">Return to homepage</a>CSS classes
📓 SVGs and CSS Animations
1. Creating the SVG
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><style>.cls-1{fill:#d2928b;}</style></defs><path class="cls-1" d="M337,609.25c10.48-51.08,44.58-95.11,94.05-112.62,49.21-17.41,103.15-15.08,152-33.85,79.83-30.66,128-115.65,123.74-199.57C702.2,172.28,633.36,106.06,545,93.1,315.1,59.34,100.05,258.49,90.84,483.47q-.34,8.26-.34,16.53c0,214.75,165.31,390.88,375.62,408.11C382.76,825.82,313.1,725.93,337,609.25ZM500,246a42.5,42.5,0,1,1-42.5,42.5A42.5,42.5,0,0,1,500,246Z"/><circle class="cls-1" cx="500" cy="711.5" r="42.5"/></svg>2. Using the SVG