ClosedLess as in less closed, not always open

Behind the Scenes: How I Made This Site.

[Blog #1]


Hi, welcome to the final, main iteration of this blog. I wanted this blog to be updated incrementally over time and every time I made significant changes to the website, I would update this blog with those newly added changes. However, that hasn’t worked out utterly how I might have planned it; come to think of it I never planned this blog…

To keep this introduction short for a very long and documented blog, I just wanted to outline what will be covered in this blog. This blog contains documentation of how I built the ClosedLess website from scratch, what I believe to be the essential starting template, what certain web semantics mean and how I employ them, and finally additional content that is used to add functionality to the website. I will primarily refer to ClosedLess, since my user space incorporates the ClosedLess design – it only makes sense for me to use my own design for my own space. Without further ado, let’s get to it.

If you haven’t already, check out my blog post on the website layout and design: Blog #2 | DIY and Redecorating Our Home

Moving from Front to Back: Under the Hood.

Whilst it’s always possible for a user to open devtools and view the elements of a web page, it doesn’t provide much explanation as to why the website is developed like it is, neither what the elements are themselves.

This section will go over the structure of the web page layout, and give an understanding of the HTML5 compliant tags which might be obscure to some users (I’ve learnt a lot so I will share this knowledge) and will make use of the Mozilla MDN documentation.


The !DOCTYPE

It’s easy to consider the basics as being something everyone knows how to perform. In a new HTML file you put: <html><header><title>Hello World</title></header><body>Hello World!</body></html>, and then continue from there. However, the basic template which should be used across most cases of HTML documents contains a bit more than just this single, in-line code block.

If you have an editor with a language server and linter setup for HTML5, ES2021 and CSS3 development, then you’ve probably encountered your editor giving a complaint about not being able to find a DOCTYPE for the file. Before getting into the exacts of each individual element tag, let’s first show what I believe to be the standard base template every website should start with:

Code snippet 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- <link rel="icon" type="image/png" href="/favicon.png"> -->
        <title>[page title goes here]</title>
    </head>
    <body>
    </body>
</html>

Let’s break it down.

<!DOCTYPE html>[1]
MDN makes a very clear point that this attribute is a requirement for preventing a browser from entering what’s known as “quirk mode” [2]. It’s an essential preamble for preventing this mode and having the browser try and render the page differently. It’s like the shebang line of a Linux script starting with: #!.
<html><head>...</head><body></body></html> [3]
You’re most likely familiar with this setup, it’s the basic construction of an HTML web page and is shown everywhere. For clarification however: <html> is the root of the document, known as the root element. All elements within are children; <head> contains the metadata of a web page, like the title, stylesheets, scripts, etc.; <body> is the main HTML document which elements within will be rendered to the screen.
The <title> tag provides the title of the web page (found on the tabs bar) and is located in the <head> tag.
<meta charset="utf-8">[4]
This declares the document’s character encoding. Using “utf-8” instead of “UTF-8” because the latter is only HTML5 specified. Mostly every modern computer and browser has support for UTF-8 encoding and thus should be enabled for use of the ASCII and extended-ASCII character sets.
<meta name="viewport" content="width=device-width, initial-scale=1"> [5]
This allows for a website to have optimisation for mobile-viewport of the web page; by extension, it allows for an optimised responsive site. In layman’s terms, the content which you can see on the screen is the viewport, the width is set to the width of the device (or can be specific), and the initial scale is the zoom of the page when first rendered. Bear in mind, if the width was set to 720px, it means any CSS attribute width: 100% will not be the full width of the device, but what is defined by the viewport.
For more about the viewport, see: MDN - The Viewport [6]
<link rel="icon" type="image/png" href="/favicon.png">[7]
This is how you set an icon for your website, and can be seen as the little logo at the top of your screen in the tabs bar. It is not mandatory to have, and for that reason I have commented it out. However, if you are setting up a website, a favicon (or “favourite icon”) can give your website a unique identity which can be easily identified in a browser’s bookmark, or recently visited. It represents the logo of your website/ business collectively.

If a favicon cannot be found, then the browser will respond with a 404 HTTP status code meaning, “this couldn’t be found”. This in turn adds overhead delay to loading the web page itself as the <head> element is processed first before the <body> element. When you can, use this tag to speed up web page loading and give an identity to your website.

As you can see there’s a lot of information regarding these technicalities, and more information about each can be found on the official MDN website (see footnotes). Now we have a strong foundation to build a robust, inclusive and responsive website, let’s consider the main body of the ClosedLess website and how we’ve built upon this foundation template.


How the Body You See is Constructed

The <body> is the main document of the web page which the user can see. It contains all the information, content and assets which the user sees, and that content is rendered differently depending on the markup elements used. If a developer wants a user to see “this text” bold, they’d use the <b> tag to turn “this text” bold. Apposed to markdown, which is achieved using **; thus, “this text” (however in a browser you can’t really tell the differences because markdown can contain markup, but not vice versa. **“this text”**).

With this, a developer can configure the layout how they wish for everyone to see it the exact same (excluding CSS styling; defines how it looks, not how it’s structured). So what are some of the HTML elements used to create ClosedLess, and what do they mean? Below is a snippet of the basic structure for a ClosedLess web page:

Code snippet 
<!DOCTYPE html>
<html lang="en">
    <body>
        <header>
            <div>
                <!-- The top bar which contains the website logo, name and slogan. Also
                contains the icon to toggle themes. -->
            </div>
            <nav>
                <!-- The main navigation bar which redirects to different subdomains, or
                back to the main domain. Sits beneath the top bar. -->
            </nav>
        </header>
        <main>
            <div id="sidebar" class="nav-bar sidebar-hidden">
                <ul>
                    <!-- A list of subpages which can be navigated to. It is the left-most
                    panel of the web page, next to the main body content and is not fixed.
                    -->
                </ul>
            </div>
            <section>
                <h1 class="heading">ClosedLess Philosophies</h1>
                <hr>
                <h3>Footnotes</h3>
                <div class="footnote">   
                    <!-- A list of footnotes for markers throughout the main document.
                    This is not a mandatory requirement if no footnote markers are used. -->
                </div>
                <footer>ClosedLess. Copyright 2021-22 ©</footer>
            </section>
        </main>
    </body>
</html>

There are a lot of elements being used, some of which aren’t necessarily taught during web development courses because they don’t necessarily provide a distinct feature compared to some of the more basic elements. Take for example the <b>, <i> and <u> tags, they all format text differently; bold, italics and underlined. Then you have <ul> and <ol> which create (un)ordered lists – <table> for tabling. However, the elements <nav> and <section> at a surface level may just look and act like reworked <div> element containers, but serve a greater purpose. Let’s discuss these semantics a bit more using the <dl>, <dt> and <dd> elements to provide descriptions.

<header>[8]
This element is a method of providing “introductory” content before the main content of a document. This can be used for “navigational aids” and logos, amongst other things.
It’s for these reasons that ClosedLess uses the <header> element tag. It contains the site’s logo, name and slogan, a theme changer icon in the top half; and in the second half, a navigation bar for aid across different subdomains – a menu.
<nav>[9]
The <nav> element differs from the <header> element since its purpose is to provide “navigation links, either within the current document or to other documents”. Common types of same document navigation include indexes, TOC, and menus.
ClosedLess uses the <nav> element for a menu to navigate to subdomains of the website, or to allow ease of getting back the main domain homepage.

<main>[10]
Representing the dominant content of the <body>, the <main> element consists of content that is directly related to the central topic of the document, or “central functionality of an application”.
The latter reason of use for the <main> element is used throughout ClosedLess. It represents the central functionality of the document since it contains both the main content of the document body, as well as a navigational sidebar container.

<section>[11]
This element is used when another specific semantic element doesn’t exist to represent the content within it. It provides a “generic standalone section of a document”, and should always, with very few exceptions, have a heading – can also contain a footer.
For this reason, the <section> element is used to contain the entire document of the web page within it, since semantically speaking it always requires a heading. There’s no reason to leave “floating” elements, like headings, images, paragraphs, etc., in the <main> element container, since there is the <div id=sidebar> container as well. The <main> element is also styled with a grid display, meaning that all the primary content of the body must be descendants of another element. Whilst a <div> element could be used for this, the <section> element provides better semantics for the purpose it serves on ClosedLess.

<blockquote>[12]
There is no explicit use of the <blockquote> element within the code snippet; however, it is another uncommon semantic which is used throughout ClosedLess when required. This element has basic semantics and is used to indicate that the text encapsulated within the element is an extended quotation. However, this really only describes semantics within in-document quotations, and the <cite> tag is used within this element for in-text citations.
ClosedLess uses this element a bit more than the defined semantics. When including citation references for a bibliography, reference list, or footnote section, the <blockquote> element is used to specifically encapsulate the reference style. It should not be used to provide additional text that might be prevalent in a footnote section. This will furthermore be outlined under the ClosedLess Language Policy.

Hopefully after explaining these semantics and why they were used in ClosedLess, you have a better understanding of what they are and how to use them when creating a website. However, they aren’t the only elements that make up the website, so what about the remaining elements? Well, those are more well-known in the purpose they serve, but here’s a list of the remaining elements, and what their purpose serves for the website:

  • The first <div> in <header> –

    This container is the top-most bar on the web page which contains the ClosedLess logo, name and slogan, and a theme changer icon which is represented as a moon courtesy of Nerd Font. It’s stylised as a grid container with the following attribute: grid-template-columns: auto 1fr auto. This essentially pushes the theme changer icon to the right-most part of the viewport, without specifying an absolute positioning.


  • <div id="sidebar"> –

    The main navigation bar which differs from the aforementioned <nav> element since it provides navigation to subpages of a domain. Now technically speaking, /~theonepath/ is itself a subpage of the domain ClosedLess; however, to easily define userspaces within ClosedLess, these areas are not subdomains but can be thought like them.

    Given the semantics of the <nav> element outlined above, this element tag may be switched with the <nav> tag, since I would consider this container to contain content which is more relevant to the semantics of the <nav> element, and not subdomain navigation.

  • <h1 class="heading"> –

    This element is self-explanatory for those familiar with HTML, and the outlined semantics of the <section> element. It provides the heading of the web page document, nothing more.

  • <hr>[13] –

    The markup for rendering a “horizontal rule” which provides paragraph separation; a thematic break. It’s used in ClosedLess to separate the footnote section from the main body content, the sidebar to split common navigation links for grouping, and for my blogs to separate the area which defines the creation date, last updated, author and other footer information about the blog – but isn’t the main footer which contains a copyright notice.

  • <h3>Footnotes</h3> –

    Another self-explanatory element. It provides the heading for the footnote section of a document body.

  • <div class="footnotes"> –

    The container which encapsulates the footnotes, which are referenced via markers throughout the document body.

  • <footer> –

    The main footer of the document body and the web page as a whole. It contains the copyright notice for that page of the website.

This is the how the ClosedLess website is constructed in an abstract sense, as each page will differ with the content it has to specify the layout. I won’t document my userspace since it’s the exact same as the ClosedLess structure, essentially using the code snippet above as the template across my userspace pages.


closedless.css – The Stylesheet

Technically speaking, CSS is related to UX/UI design rather than providing functionality. If “under the hood” refers the engine of a car (along with the chassis), CSS is the body of the car. It doesn’t just determine how the car looks, but also how the components of the car are positioned, coloured and styled. Let’s take a look at the ClosedLess stylesheet.

Code snippet 
@import url("/resources/CSS/hljs-gruvbox-CSSVARS.css");
@import url("/resources/CSS/gruvbox-themes.css");
@import url("/resources/CSS/fonts.css");


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    font-family: var(--font-sans);
    font-weight: 400;
    color: var(--gruv-fg1);
    letter-spacing: 0.8pt;
}


body {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
}


header {
    position: sticky;
    position: -webkit-sticky;
    top: 0px;
    width: 100%;
    z-index: 1;
}


a {
    text-decoration: none;
    color: inherit;
}


a sup {
    color: var(--gruv-aqua);
}


header div {
    display: grid;
    grid-template-columns: auto 1fr auto;
    width: 100%;
    font-size: 24pt;
    padding: .75rem 1rem;
    align-items: center;
    background-color: var(--gruv-bg3);
}


header div a {
    color: var(--gruv-fg1);
}


header p {
    font-size: 16pt;
    margin-left: .75em;
}


header p i {
    font-size: 15pt;
    margin-left: .5em;
}


nav {
    display: inline-flex;
    width: 100%;
    padding-left: .5em;
    justify-content: start;
    align-items: center;
    background-color: var(--gruv-bg1);
}


nav a {
    font-size: 14pt;
    margin: .5em;
}


main {
    position: relative;
    display: grid;
    grid-template-columns: 25% 1fr;
    width: 100%;
}


div.nav-bar {
    width: 100%;
    height: 100%;
    background-color: var(--gruv-bg4);
}


div.nav-bar ul {
    margin: 1em 0;
}


div.nav-bar ul li {
    list-style: none;
    margin: .5em 0;
}


div.nav-bar ul li:hover {
    background-color: var(--gruv-gray-l);
}


div.nav-bar ul li a {
    display: block;
    margin: 0;
    padding: .5em 1rem;
    text-decoration: none;
    color: inherit;
    font-size: 14pt;
    font-weight: 500;
}




main section {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 1em 3em;
    background-color: var(--gruv-bg2);
}


main section h1.heading {
    margin: 1em 0;
}


main section h1, h2, h3, h4, h5, h6 {
    margin-top: 1.5em;
    margin-bottom: .25em;
}


main section p {
    line-height: 1.5em;
    margin-block-start: 1.5em;
    margin-block-end: 1.5em;
}


main section a:hover {
    color: var(--gruv-orange);
    text-decoration: underline;
}


main section ol li, main section ul li {
    padding: .5em 1em;
}


main section ul {
    margin: 1em .5em;
    list-style-position: inside;
}


main section ul li p {
    margin-left: 1em;
    margin-top: .5em;
}


main section div.about-header {
    position: relative;
    display: inline-flex;
    width: 100%;
    padding: 1em 0;
    justify-content: center;
    align-items: center;
    text-align: left;
}


footer {
    width: 100%;
    padding: 2em;
    padding-bottom: 0;
    font-size: 11pt;
    text-align: center;
}


div.footnote a {
    text-decoration: underline;
}


svg#logo > image {
    width: 100%;
    height: 100%;
}


hr {
    border: 1px solid var(--gruv-gray);
}


.profile-rounded {
    border-radius: 4px;
    box-shadow: 1px 1px 8px 2px var(--gruv-gray-alt-2);
}


/* media queries */
@media only screen and (min-width: 601px) {
    main section ol {
        margin-left: 3em;
        margin-top: 1em;
    }


    a#hamburger-icon {
        display: none;
    }


    .about-header h1 {
        padding: 0;
        margin: 0;
        font-size: 24pt;
    }


    .about-header h2 {
        padding: 0;
        margin: 0;
        font-size: 14pt;
        color: var(--gruv-gray);
    }


    .about-header svg, .about-header div {
        margin: 0 1em;
    }




    div.footnote {
        padding-inline-start: 2em;
        padding-block-end: 2em;
    }


    div.footnote i {
        margin-inline: 2em;
    }
}


@media only screen and (max-width:600px) {
    header p {
        font-size: 14pt;
        margin-left: .75em;
    }


    header p i {
        font-size: 13pt;
        margin-left: .5em;
    }


    a#hamburger-icon {
        display: block;
        cursor: pointer;
    }


    div.nav-bar {
        position: fixed;
        z-index: 2;
        opacity: 1;
    }


    div.sidebar-hidden {
        display: none !important;
        opacity: 0;
    }


    /* tell the main section to take up the entire grid */
    main section {
        grid-column: 1/3;
        padding: 1em 1em;
    }


    main section div.about-header {
        position: relative;
        display: inline-block;
        width: 100%;
        justify-content: space-around;
        align-items: center;
        text-align: center;
    }


    main section div.container {
        display: inline-flex;
        width: 100%;
        padding: .5em 0;
        justify-content: center;
    }


    main section div.container div {
        width: max-content;
    }


    main section ul {
        margin: 1em 0;
        list-style-position: inside;
    }


    .about-header h1 {
        padding: 0;
        margin: 0;
        font-size: 22pt;
    }


    .about-header h2 {
        padding: 0;
        margin: 0;
        font-size: 12pt;
        color: var(--gruv-gray);
    }


    div.footnote {
        padding-inline-start: 1em;
        padding-block-end: 1em;
    }


    div.footnote i {
        margin-inline: 1em;
    }


    .profile, .github-avatar {
        display: none;
        overflow-x: hidden;
    }
}


/* styles for printing layout only */
@media only print {
    body { display: block; }
    #dark-toggle { display: none; }
    header div { position: relative; top: 0; border-bottom: 2px solid var(--gruv-gray); }
    header nav { display: none; }
    #sidebar { display: none; }
    section { display: block; grid-column: 1/3; padding: 0; font-size: 12px; }
}

As much as I’d love to document heavily this CSS similar to how I have with the structure of HTML, I’d rather not sob myself to sleep for the next week wondering when I will actually finish this blog. I’ve dotted the styling of elements throughout when explaining the layout of ClosedLess, but to summarise everything:

  • The header container is sticky with top: 0 so it can stay in position at the top when the user scroll the page. This means the top-most bar and <nav> bar will stay in position.

  • The main container is then a grid display to split the navigational sidebar from the <section> container. The navigational sidebar then behaves differently on mobile devices and is hidden by default, and will then overlay on visible. The <section> element will also take up the entire grid display using grid-columns: 1/3.

Tinkering the Web Page – Manipulation Through JS

This part of the blog is still possibly susceptible to being updated since the JavaScript features might be reworked or expanded upon, whereas the structure of ClosedLess is unlikely to change much within the future. The stylesheet too will be updated, but rather it’ll be just the code snippet which will change, not the explanations. This section will contain code snippets as well as trying to explain what the purpose of the system is, and what it aims to achieve.

The Theme Changer

The method used to change the theme of a web page is fairly simple, whilst incorporating an API which might not be commonly known to the average developer – Window.localStorage [14]. The localStorage is a property of the window interface, allowing storage of data for the document’s origin. This means that an item with value can be set on one web page, and accessed again on another web page within the same origin.

ClosedLess makes use of this storage by setting an item for the theme, called data-theme, and is set to one of two values: “light” or “dim”. We use the term “dim” since “dark” could be slightly misleading in the way we use colours. See, most implementations of a “dark theme” have a black greyscale with white being the primary colour of text; however, ClosedLess doesn’t use a black greyscale theme for its “dark”, hence “dim” whereby the colours aren’t as luminous and bright compared to the light-theme.

The following are code snippets for how the theme changer is implemented:

Code snippet 
// Assign getting the theme to a "variable"
const currentTheme = localStorage.getItem("theme");


//
// storeBackgroundColour()
//
// Args: None
//
// Ret: undefinied
//
// Desc: Stores the background colour of the users page.
//       Allows the css to fade between page colours


function storeBackgroundColour()
{
    // get the current background colour for the page, identified with ID 'main'
    var element = document.getElementById("main");
    if (element === null)
    {
        element = document.body
    }
    var colour = window.getComputedStyle(element).getPropertyValue("background-color"); // returns rgb(a) value
    // store the value in local storage to allow other pages to read the value of the last page
    localStorage.setItem("last_page_colour", colour);
}


//
// changeTheme()
//
// Args: None
//
// Ret: undefined
//
// Desc: toggles the theme between dim and light.
//       Stores chosen theme using localStorage API
//


function changeTheme()
{
    if (document.documentElement.getAttribute("data-theme") === "dim")
    {
        document.documentElement.setAttribute("data-theme", "light");
        localStorage.setItem("theme", "light");
    }
    else
    {
        document.documentElement.setAttribute("data-theme", "dim");
        localStorage.setItem("theme", "dim");
    }


    storeBackgroundColour();


    // swap the logo for the appropriate theme
    // get the logo element
    let logo = document.getElementById("logo").childNodes[1];
    if (logo === null) return;


    if (document.documentElement.getAttribute("data-theme") === "light") {
        logo.setAttribute("href", "/resources/IMG/closedless/closedless_black.svg");
    } else if (document.documentElement.getAttribute("data-theme") === "dim") {
        logo.setAttribute("href", "/resources/IMG/closedless/closedless_white.svg");
    }
}


//
// initLoad()
//
// Args: None
//
// Ret: undefined
//
// Desc: loads the users theme IF SET
//       otherwise does nothing really 


function initLoad()
{
    const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
    if (currentTheme)
    {
        document.documentElement.setAttribute("data-theme", currentTheme);
        storeBackgroundColour();
    }   
    else
    {
        if (userPrefersDark) {
            document.documentElement.setAttribute("data-theme", "dim");
            storeBackgroundColour();
        }
    }
}

And that’s it. Each web page includes the script in the <head>, and calls the InitLoad() function via a <script> element at the end of the document body, inside the <body> element: <script charset="utf-8">initLoad()</script>. Then to change the theme, the element: <a id="dark-toggle" class="nf nf-fa-moon_o" onclick="changeTheme()"></a>, is set to call the changeTheme() function when the user clicks the moon icon.

The Responsive Sidebar

When it comes to sidebar content and responsive web design, it’s best to always hide this content from the user to allow for the main body content to consume the entire screen due to the limited size of a portrait viewport. When a user then wants to access the contents within the sidebar, its display should become visible and overlay itself over the main content of the body document.

But how do you make it intuitive for users to find this sidebar? Well, fortunately due to universal understandings through the use of icons, there is one such character icon which is directly linked to additional content which is usually hidden by default off the screen. This icon is known as the triple bar, or hamburger icon (). Typically, when a user sees this icon on a mobile device (an app or web page), they will associate it with a hidden side menu which can be opened by clicking on the icon.

The following is the code which is responsible for togging the view of the sidebar:

Code snippet 
function toggleSidebarNav() {
    let sidebar = document.getElementById("sidebar");
    if (sidebar === null) return;


    /* change sidebar to be visible */
    if ( sidebar.classList.contains("sidebar-hidden") ) {
        sidebar.classList.remove("sidebar-hidden");
    }
    /* change sidebar to be hidden */
    else {
        sidebar.classList.add("sidebar-hidden");
    }
}

With a little bit of CSS, the sidebar’s display can be set to none to override the default attribute when it’s visible, and this mobile-specific class can be encapsulated in the CSS query: @media screen only and (max-width:600px), to ensure it doesn’t affect desktop-view.

Using hightlight.js (hljs)

hljs is a JavaScript library which will manipulate the contents of a web page for formatting code, targeting the <pre><code> element tags. If the language of the code block is not specified as a class name in the <code> element, then hljs will guess the best language the code is associated with and format accordingly.

The newly formatted code block will have certain words wrapped in <span> elements with class attributes to identify the type of syntax that word represents in the identified language. A CSS stylesheet can then be used to change the colouring of the text within the <span> elements to provide syntax highlighting (which I couldn’t live without). These stylesheets can be accessed via the CDN (stylesheets identified by hljs), or optionally a developer can create their own stylesheet for custom syntax highlighting of the elements.

Jump Back-to-Top

This feature is only intended really for lengthy web pages to assist with getting the user back to the top of the document quickly – very much required with this blog. It’s another simple implementation and uses similar principles for the responsive sidebar. There exists another icon which upon a user seeing, while instantly recognise its meaning in the content its being used. This icon is the up arrow () and on long web pages, represents going “back-to-top” (can be labelled with this wording or similar underneath, or show on element hover).

When clicked on by the user, it can either use a href attribute within an anchor element to reference an ID of another element and jump to that section (basic click and jump-to navigation on a web page). Or, it can be set with the onclick attribute to run a snippet of JS. In our case scenario, the latter option is used to implement going “back-to-top”, with some very simple JS: window.scrollTo(0,0);. That’s it, no need for JS functions and fits within a single <a> element like so: <a class="nf nf-fa-arrow_up" onclick="window.scrollTo(0,0)"></a>.

Summary

This finally concludes this blog, which became more documentation than a casual blog post (as intended I suppose). Documentation isn’t necessarily the most “entertaining” of jobs, but it takes a certain skill to document a system good, let alone well enough other people understand it when reading it. This isn’t me tooting my own horn. As I’ve mentioned, documentation can be a very boring and lethargic process. Rather, it’s to outline that not everyone can document systems similar to that seen by the Arch Linux wikis, but it doesn’t mean a developer can’t. And by writing more documentation, the better you become at it.

This blog is, more or less, in a finished state, and will be reviewed by myself and Rob to ensure everything stated here is accurate to our understandings. If you’ve seen pervious versions of this blog, I apologise for its incompleteness and inadequate state of being half-assed (really we are getting to vocabulary above my register and I’m trying not to be repetitive at the same time). From this, if you are wondering where my section about “how I made these blogs” has gone to, I’ll be writing a separate blog later which covers it more in depth…once I’ve figured on a better solution to creating these blogs than what I have, which works, but could have some more work done to it.

Well that about concludes this blog and I hope you learned something.

Thanks for reading and ta ta for now.

Footnotes

[1]Always include the DOCTYPE for whichever type of markup document you are producing.
MDN Web Docs. (2021, January 23). Doctype - MDN Web Docs Glossary: Definitions of Web- related terms. Retrieved August 31, 2021, from
https://developer.mozilla.org/en-US/docs/Glossary/Doctype
[2]“quirks mode” occurs in a browser when it tries to emulate nonstandard behaviours from Netscape Navigator (Navigator 4) and Microsoft Internet Explorer (IE5). This is to support compatibility with websites designed before the W3C standardisation.
MDN Web Docs. (2021, July 28). Quirks Mode and Standards Mode - HTML: HyperText Markup Language. Retrieved September 1, 2021, from
https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode
[3]All of the defined element tags can be found in the reference list provided by Modzilla with clear naming and description. The reference list provides links to pages specific to individual tags with a more thorough description and examples on how to use that element tag.
MDN Web Docs. (2021, May 14). HTML elements reference - HTML: HyperText Markup Language . Retrieved September 1, 2021, from
https://developer.mozilla.org/en-US/docs/Web/HTML/Element
[4]Simply not including this tag can be very limiting. By using UTF-8 encoding, you allow the full use of the ASCII character set (inc. the extended set), and it defines the BOM in addition – which is located at the start of a text stream, of a line, also known as endianness.
MDN Web Docs. (2021, June 2). <meta>: The metadata element - HTML: HyperText Markup Language. Retrieved September 1, 2021, from
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#attr-charset
W3C. (2014, February 26). Declaring character encodings in HTML. Retrieved September 1, 2021, from
https://www.w3.org/International/questions/qa-html-encoding-declarations
[5]It’s a general practice to include this tag since, whilst a mobile-compatible layout isn’t a huge focus at the beginning of creating websites, at some point it’ll be important to understand responsive development. There are many more reasons for this tag, and it has a lot more to it. For more, see the MDN documentation.
MDN Web Docs. (2021, July 26). Using the viewport meta tag to control layout on mobile browsers - HTML: HyperText Markup Language. Retrieved September 1, 2021, from
https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
[6]The Viewport has many concepts behind it, and how it interacts with stylesheets. A lot of concepts which will not have be discussed in this blog.
MDN Web Docs. (2021, August 13). Viewport concepts - CSS: Cascading Style Sheets. Retrieved September 1, 2021, from
https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts
[7]Using the link tag to set the website favicon.
MDN Web Docs. (2021, July 26). <link>: The External Resource Link element - HTML: HyperText Markup Language. Retrieved September 1, 2021, from
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
MDN Web Docs. (2020, December 30). Favicon: MDN Web Docd Glossary: Definitions of Web- related terms. Retrieved September 2, 2021, from
https://developer.mozilla.org/en-US/docs/Glossary/Favicon
[8]The <header> element tag.
MDN Web Docs. (2021, July 7). <header> - HTML: HyperText Markup Language. Retrieved September 2, 2021, from
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header
[9]The <nav> element tag.
MDN Web Docs. (2021, July 7). <nav>: The Navigation Section element - HTML: HyperText Markup Language. Retrieved September 2, 2021, from
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav
[10]The <main> element tag.
MDN Web Docs. (2021, July 2). <main> - HTML: HyperText Markup Language. Retrieved September 2, 2021, from
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main
[11]The <section> element tag.
MDN Web Docs. (2021, July 7). <section>: The Generic Section element - HTML: HyperText Markup Language. Retrieved September 2, 2021, from
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section
[12]The <blockquote> element tag.
MDN Web Docs. (2021, June 2). <blockquote>: The Block Quotation element - HTML: HyperText Markup Language. Retrieved September 2, 2021, from
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote
[13]The <blockquote> element tag.
MDN Web Docs. (2021, June 2). <hr>: The Thematic Break (Horizontal Rule) element - HTML: HyperText Markup Language. Retrieved September 3, 2021, from
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr
[14]Similar to browsing history for that session, in private browsing or incognito mode, localStorage will be cleared of any data stored from that session.
MDN Web Docs. (2021, August 21). Window.localStorage - Web APIs. Retrieved September 3, 2021, from
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage