You can find these instructions at https://chnsa.ws/25r.
Create new folders: js & includes.
Create new file in includes: footer.html.
Cut <footer> … </footer> from index.html & paste into footer.html & save it.
Create new file in js: include.js.
Copy code from https://chnsa.ws/25p into include.js & save it.
Where <footer> … </footer> used to go, enter this instead:
<script>
includeHTML('/includes/footer.html', 'main');
</script>Enter <script src="/js/include.js"></script> in <head> (or at least above where you call the includeHTML function).
Live Preview!
Now find & replace <footer> … </footer> with the <script> lines above.
Go look at the code for /services/landscape-maintenance.html & you’ll notice that it didn’t get replaced. Manually do that.
Go to footer.html & add .social-media-icons onto the <ul> that contains the icons.
Live Preview /services/landscape-maintenance.html.
Create new file in js: breadcrumb.js.
Copy code from https://chnsa.ws/25q into breadcrumb.js & save it.
Cut the following from fertilizers.html:
<nav aria-label="breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/products/">Products</a></li>
<li>Fertilizers</li>
</ol>
</nav>In its place, enter this:
<script src="/js/breadcrumb.js"></script>Add an ID of header onto the <header› element, like this:
<header id="header">Add this CSS:
.breadcrumb li:not(:last-child)::after {
content: "\00A0➤\00A0";
}In short, li:not(:last-child)::after tells the rendering engine to insert \00A0➤\00A0 after every <li>, but not after the one that is the last child of its parent. To understand exactly how it means that, read on.
First let’s look at the declaration: content: "\00A0➤\00A0";. content tells the rendering engine to insert whatever its value is. 00A0 is the Unicode number for a non-breaking space (in HTML we’d use  , remember?). To insert Unicode ID numbers in CSS, you preface them with a \ (a backslash). In the middle of the value is ➤, a Unicode character identified as “Black Right Arrowhead”. Therefore, this declaration tells the rendering engine to insert a non-breaking space, then a ➤, & then a non-breaking space.
Now let’s examine the selector.
.breadcrumb li is easy: select every <li> that is a descendant of a <breadcrumb>. It’s everything after the li that’s a wee bit complicated.
::after is a pseudo-element (you can tell by the :: in front of it). If it simply said li::after, that would tell the rendering engine to insert the value of the content property (in this case, \00A0➤\00A0) after every <li>.
Remember that our breadcrumb looks like this:
Home / Products / Fertilizer
If the selector was simply .breadcrumb li::after, it would now look like this:
Home ➤ Products ➤ Fertilizer ➤
Hmmm. The first two uses of ➤ are fine, but we don’t want the one at the end! How do we tell the rendering engine to insert ➤ after every <li> except the last one? That’s where :not(:last-child) comes in.
:last-child is a pseudo-class (you can tell by the : in front of it) that selects the last child of a parent element. If our selector was .breadcrumb li:last-child, that would target the last <li> that was the child of a parent element, if that <li> was a descendant of .breadcrumb. Say we had this HTML:
<div class="breadcrumb">
<ul>
<li>Cthulhu</li>
<li>Nyarlathotep</li>
<li>Shoggoth</li>
</ul>
</div>In this case, .breadcrumb li:last-child would select the <li> around Shoggoth, because that <li> is the last child of its parent (here, <ul>), & that <li> is a descendant of an element with a class of breadcrumb.
Going back to Home ➤ Products ➤ Fertilizer ➤, we want to insert a ➤ after every <li> except the last child. That’s where :not(:last-child) comes in.
:not() is another pseudo-class that let’s you specify DOM objects you do not want to select. You specify what you do not want to target by putting that selector inside the () after :not. In other words, li:not(:last-child) tells the rendering element that you want to select every <li> except the <li> that is the last child of a parent.
Putting it all together, li:not(:last-child)::after specifies that you want to insert \00A0➤\00A0 after every <li>, but not after the one that is the last child of its parent (and of course, those <li> elements have to be the descendant of an element with a class of breadcrumb).
Thus, given a CSS selector that looks like .breadcrumb li:not(:last-child)::after, our breadcrumb will now look like this:
Home ➤ Products ➤ Fertilizer
The selector told the rendering engine to insert \00A0➤\00A0 after each <li> (here, Home & Products) but not after the last child <li>, which here would be Fertilizer. Exactly what we want!
Hopefully you can now see how specifically CSS let’s you target selectors, & you learned a bit more about pseudo-classes & pseudo-selectors.
Live Preview!