Skip to content

Instantly share code, notes, and snippets.

@kccnma

kccnma/studentsite-johndoe-subpage-notes.html

Last active March 5, 2024 00:03
Show Gist options
  • Save kccnma/6cf77d0159bcad57924eeee48f12d578 to your computer and use it in GitHub Desktop.
Save kccnma/6cf77d0159bcad57924eeee48f12d578 to your computer and use it in GitHub Desktop.
Download ZIP
John Doe's Student Site ART 128 Sub Page HTML
Raw
studentsite-johndoe-subpage-notes.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>John Doe | Notes</title>
<meta name="description"
content="This is an example student website for John Doe, a fictional web design student.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../css/style.css" rel="stylesheet" type="text/css">
</head>
<body class="page-sub">
<header>
<div class="site-id">
<h1><a href="../index.html">JD</a></h1>
</div>
<nav class="site-nav">
<ul>
<li><a href="../art128/index.html">ART 128</a></li>
<li><a href="index.html">Notes</a></li>
</ul>
</nav>
</header>
<main>
<section class="hero">
<h2>Notes</h2>
<p>Web Design and Frontend Dev-related Resources</p>
</section>
<section>
<div class="container two-col-sidebar">
<aside>
<h3>Contents</h3>
<ol>
<li>
<a href="#intro">Introduction</a>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#links">Links</a></li>
<li><a href="#tech">Technologies</a></li>
</ul>
</li>
<li>
<a href="#setup">Getting Setup</a>
<ul>
<li><a href="#folders">Folder Structure</a></li>
<li><a href="#html">Blank HTML Doc</a></li>
<li><a href="#css">Blank CSS Doc</a></li>
</ul>
</li>
<li>
<a href="#base-styles">Base Styles</a>
<ul>
<li><a href="#global-resets">Global Resets</a></li>
<li><a href="#global-colors">Global Colors</a></li>
<li><a href="#global-typography">Global Typography</a></li>
</ul>
</li>
<li>
<a href="#glossary">Glossary</a>
<ul>
<li><a href="#definitions">Common Terms</a></li>
<li><a href="#cli-commands">Global Colors</a></li>
</ul>
</li>
</aside>
<div class="primary">
<h2 id="intro">Introduction</h2>
<p id="about">
This page contains my notes taken while studying web design and front-end web
development.
</p>
<h3 id="links">My Personal Links:</h3>
<ul>
<li>
My Github:
<a href="https://github.com/johndoenma">https://github.com/johndoenma</a>
</li>
<li>
My Codepen:
<a href="https://codepen.io/johndoenma">https://codepen.io/johndoenma</a>
</li>
</ul>
<h3 id="tech">Technologies &amp; Applications:</h3>
<ul>
<li><a href="#">Git</a> (Version Control System)</li>
<li><a href="#">Github</a> (Free Cloud Source Code Storage and Git-based Version Control System)
</li>
<li><a href="#">Github Pages</a> (Free Static Site Hosting)</li>
<li><a href="#">VS Code</a> (Code Editor)</li>
</ul>
<hr />
<h2 id="setup">Getting Setup</h2>
<h3 id="folders">Basic Website Folder Structure</h3>
<pre><code>
sitename/
├── <a href="https://gist.github.com/johndoenma/696e1b3bc6e5b9d001e1129cd5c8b118">index.html</a>
├── css/
│ ├── <a href="https://gist.github.com/kccnma/3cce7281cfe835b687fedfe80c099c12">style.css</a>
</code></pre>
<hr />
<h3 id="html">Blank HTML Document</h3>
<p>Example index.html file:</p>
<script src="https://gist.github.com/johndoenma/696e1b3bc6e5b9d001e1129cd5c8b118.js"></script>
<hr />
<h3 id="css">Blank CSS Document</h3>
<p>Example style.css file with a CSS Table of Contents:</p>
<script src="https://gist.github.com/johndoenma/5abb1b0fb4eb4a8a0f864266ebaa1fe4.js"></script>
<hr />
<h2 id="base-styles">Base Styles</h2>
<h3 id="global-reset">CSS Global Reset</h3>
<script src="https://gist.github.com/johndoenma/5ef7eb0b89ca05fe451f3fa2950da32e.js"></script>
<hr />
<h3 id="global-colors">CSS Global Colors</h3>
<script src="https://gist.github.com/johndoenma/363ad9d4af5e678b9776cafa8a16d643.js"></script>
<hr />
<h3 id="global-typography">CSS Global Typography</h3>
<div class="markup-box">
<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
<p>This is a paragraph. This is <strong>bold text</strong>. This is <em>italic text</em>. This
is an <a href="#">inline text link</a>. Lorem ipsum dolor sit amet, consectetur adipiscing
elit.</p>
<ul>
<li>This is an Unordered List Item</li>
<li>This is an Unordered List Item</li>
<li>This is an Unordered List Item</li>
</ul>
<ol>
<li>This is an Ordered List Item</li>
<li>This is an Ordered List Item</li>
<li>This is an Ordered List Item</li>
</ol>
<p>This is a <a href="#">link</a>.</p>
</div>
<script src="https://gist.github.com/johndoenma/5b875c1db2658e181587e8be6394fbea.js"></script>
<script src="https://gist.github.com/johndoenma/5045d389a3c941a2f31edb66c116a1a7.js"></script>
<hr />
<h2 id="glossary">Glossary:</h2>
<h3 id="glossary">Common Terms &amp; Definitions:</h3>
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dt>JS</dt>
<dd>JavaScript</dd>
<dt>CLI</dt>
<dd>Command Line Interface</dd>
<dt>GUI</dt>
<dd>Graphical User Interface</dd>
</dl>
<hr />
<h3 id="cli-commands">Helpful CLI Commands:</h3>
<pre><code>
$ pwd (or simply "cd" on a PC) // returns path to current directory
$ ls (or "dir" on a PC) // returns list of contents inside the current directory
$ cd Desktop // move down one level into a sub directory
$ cd .. // move up one level into the parent directory
$ git clone https://github.com/username/reponame // copies a remote repo to your local computer
</code></pre>
</div>
</div>
</section>
</main>
<footer>
<nav class="social-nav">
<ul>
<li><a href="https://github.com/johndoenma">My Github</a></li>
<li><a href="https://codepen.io/johndoenma">My Codepen</a></li>
</ul>
</nav>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment