website/webdevelopment/gsfullstack/show.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("Getting Started as a Full Stack Developer"));
heading.append(addParagraph("Tom Geller - LinkedIn Learning - August 2021"));
heading.append(addParagraph("Chapter 3 - Show Information with Display Technologies"));

main.append(addHeader("What People Expect from a Website"));
main.append(addParagraph("Most people are familar enough with websites to be able to recognise certain de facto standards.  For example, the Home button or link is usually in the top left hand corner and where the user is required to login to a site, the link is usually in the top left and once the user logs in, it becaomse a user link giving access to profile information and so on."));
main.append(addParagraph("Quick aside: you can see the world's first ever web page by clicking <a href='http://info.cern.ch/hypertext/WWW/TheProject.html'>this link</a> and this might be of interest for several reasons, not least of which is to see how the web has changed over time.  This page is produced with HTML only - it was produced before things like CSS and JavaScript existed."));
main.append(addParagraph("If you compare this to a modern site such as <a href='https://www.linkedin.com/learning/'>LinkedIn Learning</a>, there are a number of obvious differences.  The links are much less obvious and less consistent we don't have the same strict hierarchy of title.  There are also other differences such as a more complex layout."))
main.append(addParagraph("Another big change which is not immediately obvious just by looking at a site is the fact that pages nowadays are usually more responsive in order to look better on different devices.  A good example of this is <a href='https://dribbble.com/'>dribble.com</a>.  If you view this in a full sized PC monitor, it has a menu bar at the top and four columns.  If you then decrease the width of the viewport, you will see that at a certain size it reduces to three columns and then two and finally one.  The top menu changes to a Hamburger menu at a certain width and the menu below this changes slightly.  It doesn't disappear but the Popular drop down and Filters button which are to the left and right of the menu respectively at full size are moved to a seaprate line to leave more room for the menu at a certain width and some of the menu options disappear (they are still there but off screen so you have to scroll along to access them)."));
main.append(addParagraph("This is, of course, intended to make the page easier to view on a smaller screen such as a phone or tablet and if it is done properly, it will optimise the layout for wahetver size of screen or viewport the page is being viewed in."));
main.append(addParagraph("This is one area in which your site can be made more accessible.  Another important area of accessibility is making a site more accessible for users with visual or aural impairments or other disabilities.  THis can mean using better contrast in your site, larger fonts and adding tags to images so a screen reader can read them out."));
main.append(addParagraph("Modern web designs are often more responsive by default so there is no longer the same need to make them responsive.  This is reflected in the fact that LinkedIn Learning courses on Responsive design tend to be quite old (that is, more than 6 years old).  Accrssibility hasn't changed as much and is still a topic worth investigating and there are several courses on this topic including <a href='https://www.linkedin.com/learning/accessibility-for-web-design'>Accessibility for Web Design</a> by Derek Featherstone."));

addSidebar("webdev");