website/webdevelopment/cssessentialtraining/gettingstarted.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("Chapter 1 - Getting Started"));

main.append(addSubHeader("HTML and CSS"));
main.append(addParagraph("CSS is used for styling and presentation.  Without it, web pages would all look very similar and very boring - black text on white backgrounds."));
main.append(addParagraph("While it is true that certain HTML elements provide a certain amount of in-built styling (<h1> headers are larger than <h2> headers which are larger than <h3> headers and so on), it is bad practice to select elements based on their appearance.  HTML elements should be selected because they mean something in the context of the page.  The main header should be an <h1>, the next level of header should be <h2> and so on.  If the size of these look right in your page, their is no need to style them further with CSS, but it is worth remembering that CSS can override that built-in styling and unlike the built-in styling, CSS will make your page look the way you want it to."));
main.append(addSubHeader("Browser Developer Tools"));
main.append(addParagraph("There are a couple of things worth noting here.  If you use the web development tools in Firefox, by default, you will see three columns with the HTML on the left, the default CSS on the right and custom CSS in the middle.  You can collapse the two CSS panes together so you have two columns,  HTML on the left and CSS on the right.  In the CSS column, you can view the custom CSS by clicking on the tab labelled Rules, and the default CSS by clicking on the Layout tab."));
main.append(addParagraph("More information on the Web Developer Tools can be found in the <a href=\"https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools\">MDN docs</a>."));
main.append(addSubHeader("Referencing CSS"));
main.append(addParagraph("You may sometimes see the type attribute being included in a CSS link tag.  It will look like this"));
main.append(addSyntax("type=\"text/css\""));
main.append(addParagraph("This was a requirement in HTML4, but is not required in HTML5.  Personally, I tend to not use it but don't be surprised if you do see it.  In my experience, you will often see this, even in pages written in HTML5 and some courses or videos on CSS will still show it as part of the link tag."));
main.append(addParagraph("When importing an external CSS file, you can do that with @import.  A stylesheet can be imported into another stylesheet or into HTML and you can use this technique to combine CSS files.  As an example, let's say that your site stylesheets are in a folder called css and you have three sheets called layout.css, typography.css and buttons.css.  You can import these into a file called styles.css like this."));
main.append(addSyntax("@import url('/styles/layout.css');@import url('/styles/typography.css');@import url('/styles/buttons.css');"));
main.append(addParagraph("These can then be imported into HTML.  Bear in mind that this is a CSS construct, so you would import into the HTML via the &lt;style&gt; tag like this."));
main.append(addSyntax("&lt;style&gt; @import url(\"css/styles.css\");&lt;/style&gt;"));
main.append(addParagraph("This method is not commonly used these days because it doesn't allow for parallel loading so the whole stylesheet has to be downloaded before the HTML can be loaded.  In addition, I personally don't like it because I use separate stylesheets in part to allow me to target specific styles for specific pages so I don't really want to have all of my styles combined into a single sheet.  The only scenario I can think of where this may be useful is to combine specific sets of sheets into one sheet for a specific purpose such as webdev.css for all of the stylesheets I attach separately to any page relating to web development.  This seems like trading off one type of complexity for another and with the method I currently use, which is separate links to each stylesheet, I think this makes it easier when changing stylesheets and its easier to read."));
main.append(addParagraph("This import method is used with CSS Preprocessors but we are not really covering them in this course so you may come to learn the method if you delve into CSS Preprocessors at some point.  For now, I think that it is important to be aware that the import method exists because you may see it in other people's CSS, but there is no real reason to include it in your own."));
main.append(addSubHeader("Project Overview and Setup"));
main.append(addParagraph("For the purpose of this course, we will be using an HTML file and applying CSS to that file.  This is a resume page which I could attempt for my own resume, but I won't remove any of the HTML sections whilst studying the course so that I can practice the CSS techniques."));
main.append(addParagraph("To keep things simple, I have created a folder within the website to hold the exercise files.  I want to be able to create snapshots of this exercise page so I created another folder called samples with a similar structure - that is, there is a folder called css to hold the css files and a folder for the images."));
main.append(addParagraph("I will start off by calling the page resume1.html and the associated CSS file is called resume1.css.  For each iteration of the page, there will be a file called resume<em class=\"suffix\">n</em>.html and I will create a CSS file called resume.css so at any time I can load up a version of the page with the CSS applying at that time.  There probably won't be much difference between the different versions of the HTML file, I expect most of the changes to occur in the CSS.  At the end of the course, I intend to have a final page listing the different versions for easy access with a brief note explaining what CSS rules have been applied, assuming that is practical."));
main.append(addParagraph("In terms of the content of the page, I'm not concerned about that at the moment but I may personalise it later."));
main.append(addParagraph("One thing to bear in mind is that it is easier to write HTML before CSS because that gives you a structure to work with and you changes made to the CSS are reflected in the sites appearance.  A useful resource for generating placeholder text is <a href=\"https://meettheipsums.com/\">Meet The Ipsums</a>."));
main.append(addSubHeader("Optimizing Images and Retina Displays"));
main.append(addParagraph("Optimizing images can mean optimizing the images themselves (optimizing for performance) or optimizing the way in which they are presented in the HTML and CSS (optimizing for search engines)."));
main.append(addParagraph("With CSS, you can alter the size of the image with in the page, but obviously you can't alter the size of the file on the disk, so if your file is, let's say 4000 x 3000 pixels and you use CSS to display it with a width of 300 pixel, you still have to download a file that is 4000 x 3000 pixels, you just display it with a smaller width.  So some optimization may need to be performed before you start writing CSS.  There is a useful blog posting by Mark Hayes regarding the optimization of images on <a href=\"https://www.shopify.com/blog/7412852-10-must-know-image-optimization-tips\">shopify.com</a>."));
main.append(addParagraph("An important factor in respect to image size is high density screens, in Apple terminology, these are referred to as Retina screens and they have a higher pixel density than traditional screens.  Let's say that you have an image you want to display it at a width of 300 pixels to accommodate smaller screens.  On a high density screen, this will look smaller and rescuing the size will have a negative impact on the resolution.  If the image size is 300 pixels and you use CSS to reduce this to 300 pixels, on a high density screen you won't see any difference in the size, but you won't see the loss of resolution."));
main.append(addParagraph("To get our CSS started, we are going to set the width for images to 300 pixels like this."));
main.append(addInsetCodeListing(["img {", "    width: 300px;", "}"]));
main.append(addParagraph("To see what effect this has on the HTML, you can take a look at <a href=\"resumes/resume1.html\">version 1</a> of the HTML file.  The changes are reflected in <a href=\"resumes/resume2.html\">version 2</a>."));
main.append(addSubHeader("Absolute Paths"));
main.append(addParagraph("A absolute path is one that contains a URL, usually to a resource from another website.  As a general rule, this should be avoided because of the bandwidth it uses on the site you are getting the source from.  However, there are some sites that host resources for people to use and it is perfectly acceptable to create a link to that resource in your page.  An example of this is <a href=\"https://picsum.photos/\">Lorem Picsum</a> which provides online placeholder images.  Even so, it will probably be more practical, where possible, to download the image to your server and then access it via a relative path."));
main.append(addParagraph("It is easy to confuse (as I have in the past) an absolute path and a root relative path.  A root relative path provides a path to some resource (an image, an HTML document and so on) that starts with a / character which represents the site's root directory.  For example, the root directory on a Linux server is usually"));
main.append(addSyntax("/var/www/html/"));
main.append(addParagraph("Let's say that it contains a directory called styles and inside that directory, we have a file called styles.css.  If you are editing this file, for instance with vi, the command to do that including the full path is"));
main.append(addSyntax("sudo vi /var/www/html/styles/styles.css"));
main.append(addParagraph("Confusingly, on a Linux system, this would be considered to be an absolute path.  Within HTML, the site's root directory is /var/www/html - by comparison, the root directory on the Linux server is just / so we can use a root relative path to this file of"));
main.append(addSyntax("/styles/styles.css"));
main.append(addParagraph("In this context, / is a shorthand for /var/www/html."));

addSidebar("webdev");