1 files changed, 54 insertions, 0 deletions
diff --git a/tutorials/www/quick-intro-html-css.html b/tutorials/www/quick-intro-html-css.html
index 33fba18..53073d3 100644
--- a/tutorials/www/quick-intro-html-css.html
+++ b/tutorials/www/quick-intro-html-css.html
@@ -1,3 +1,55 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
+<head>
+  <meta charset="utf-8" />
+  <meta name="generator" content="pandoc" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+  <title>quick-intro-html-css</title>
+  <style>
+    code{white-space: pre-wrap;}
+    span.smallcaps{font-variant: small-caps;}
+    span.underline{text-decoration: underline;}
+    div.column{display: inline-block; vertical-align: top; width: 50%;}
+    div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
+    ul.task-list{list-style: none;}
+  </style>
+</head>
+<body>
+<nav id="TOC" role="doc-toc">
+<h2 id="toc-title">Contents</h2>
+<ul>
+<li><a href="#web-browsers-render-code">Web browsers render code</a>
+<ul>
+<li><a href="#html">HTML</a>
+<ul>
+<li><a href="#basic-format">Basic Format</a></li>
+<li><a href="#tables-and-links">Tables and Links</a></li>
+<li><a href="#and-everything-else...">And Everything Else...</a>
+<ul>
+<li><a href="#shortlist-of-text-and-formatting-tags">Shortlist of Text and Formatting Tags</a></li>
+</ul></li>
+<li><a href="#html-metadata">HTML Metadata</a></li>
+</ul></li>
+<li><a href="#css">CSS</a>
+<ul>
+<li><a href="#add-style-without-css">Add style <em>without</em> CSS</a></li>
+<li><a href="#basic-formatting">Basic Formatting</a></li>
+<li><a href="#image-formatting">Image Formatting</a></li>
+<li><a href="#making-custom-classes">Making Custom Classes</a>
+<ul>
+<li><a href="#use-the-div-tag-to-make-sections">Use the div tag to make sections</a></li>
+</ul></li>
+<li><a href="#mobile-optimization">Mobile Optimization</a></li>
+</ul></li>
+<li><a href="#how-to-look-things-up">How to look things up</a></li>
+<li><a href="#references">References</a>
+<ul>
+<li><a href="#html-1">HTML</a></li>
+<li><a href="#css-1">CSS</a></li>
+</ul></li>
+</ul></li>
+</ul>
+</nav>
 <p><em>Note: you should run the examples to see how they work. You can either write the files yourself and open them in a web browser, or use an online HTML editor like</em> <a href="https://html-css-js.com/"><em>this one</em></a></p>
 <p>As you can see from the current state of this site, I'm not exactly exactly the most skilled web designer. But I struggled through the basics enough to get an idiot's sense of front-end web design, so that perspective might be useful if you have no clue where to start with this like I did.</p>
 <p>The building blocks are very simple, <em>but there's a lot of blocks</em>. The <a href="https://dev.w3.org/html5/spec-LC/semantics.html#semantics">HTML5 specification</a>, which most browsers are built around, defines the semantics of elements that can should be rendered by a web browser. CSS similarly defines the <em>attributes</em>--or styles--that can be applied to those elements in a format specified <a href="https://www.w3.org/TR/CSS1/">here</a>. I've never gotten deep into the weeds like professional designers do--and to be honest, I don't really want to. But I <em>do</em> like understanding how things work. And getting a unique custom HTML site is something anyone with a text editor and a web browser can get done in a weekend.</p>
@@ -338,3 +390,5 @@ src="https://archive.md/zP2NL/9d16630c80f93351469867fde13ea5199cd1f483.jpg"
 <li>https://3body-net.medium.com/building-mobile-optimized-layouts-with-css-html-1a736d779b1b</li>
 <li>https://stallman.org/common/stallman.css</li>
 </ol>
+</body>
+</html>