website/webdevelopment/cssessentialtraining/introduction.js

import { addBanner, addArticle, addTitle, addHeader, addParagraph, addClassParagraph, addSubHeader, addOrderedList, addUnorderedList, addBlockquote, addInset, addInsetList, addInsetCodeListing, addInsetBulletList, addImageWithCaption, addButtonGroup, addSidebar, addSyntax, menu, global_menu } from '/scripts/import.js';
import { local_menu } from '/scripts/webdev.js';

const heading = document.querySelector(".heading");
const global = document.querySelector(".global_menu");
const local = document.querySelector(".local_menu");
const sidebar = document.querySelector(".sidebar");
const main = document.querySelector(".main_content");

heading.append(addTitle("CSS Essential Training"));
heading.append(addParagraph("Christina Truong - LinkedIn Learning - October 2019"));
heading.append(addParagraph("Introduction"));

main.append(addHeader("Introduction"));
main.append(addParagraph("Note that I am doing this course immediately after completing <a href=\"../introductiontocss/introductiontocss.html\">Introduction to CSS</a> (the link is to my notes rather than to the course on LinkedIn - you can access the course <a href=\"https://www.linkedin.com/learning/introduction-to-css\">here</a>).  Because of that, there may be some overlap (although this course seems to cover topics in greater detail) so I may skip over or just briefly mention anything that was already covered in the previous course."));
main.append(addParagraph("I have also created another folder called samples.  This will allow me to save different versions of the HTML file so that it will be possible to view the page at different stages of its development."));
main.append(addParagraph("Throughout the course, we will be styling a single web page which is Christina's resume.  To show this document changes throughout the course, I have created a separate page which lists all of the different versions with a description of what's change in the CSS.  I called this page <a href=\"resumes.html\">resumes.html</a> and you can access it via the link here or below and also via the buttons on any of the pages for this course (not including sample html pages or the actual resume page).  For that reason, when you click on any of the links to any version of the resume, it should open in a new tab since there is no way to get back to the previous page other than by pressing the browser's back button.  There are also links to each resume version at appropriate points throughout the course."));

addSidebar("webdev");