From 210c71941d685a6aa82d94b3f8b7d61a81184941 Mon Sep 17 00:00:00 2001
From: Nathan Steel <aney.login+rpi3@gmail.com>
Date: Tue, 22 Nov 2022 10:29:49 -0500
Subject: [PATCH] Add webpage-to-website guide

The follow up of your-first-website
---
 guides/index.html              |   1 +
 guides/web-dev-101.html        |  13 +++-
 guides/webpage-to-website.html | 130 +++++++++++++++++++++++++++++++++
 3 files changed, 143 insertions(+), 1 deletion(-)
 create mode 100644 guides/webpage-to-website.html
diff --git a/guides/index.html b/guides/index.html
index e69c9df..5276c81 100644
--- a/guides/index.html
+++ b/guides/index.html
@@ -39,6 +39,7 @@
 				</ul>
 				<h2>2022</h2>
 				<ul>
+					<li><a href="/guides/webpage-to-website.html">Webpage to website</a> - 22/11/2022</li>
 					<li><a href="/guides/your-first-webpage.html">Your first webpage</a> - 18/11/2022</li>
 					<li><a href="/guides/web-dev-101.html">Web Development 101</a> - (WIP)18/11/2022</li>
 					<li><a href="/guides/password-protect-webpage.html">Password protect webpages</a> - (WIP)14/09/2022</li>
diff --git a/guides/web-dev-101.html b/guides/web-dev-101.html
index 2bc20ce..0a46a01 100644
--- a/guides/web-dev-101.html
+++ b/guides/web-dev-101.html
@@ -38,14 +38,25 @@
 			</section>
 
 			<section>
-				<h2>HTML</h2>
+				<h2>Getting started</h2>
 				<ul>
 					<li><a href="/guides/your-first-webpage.html">Your first webpage</a></li>
+					<li><a href="/guides/webpage-to-website.html">Webpage to website</a></li>
+				</ul>
+			</section>
+
+			<section>
+				<h2>HTML</h2>
+				<ul>
+					<li>What is a tag/element?</li>
 				</ul>
 			</section>
 
 			<section>
 				<h2>CSS</h2>
+				<ul>
+					<li>What is a selector?</li>
+				</ul>
 			</section>
 
 			<section>
diff --git a/guides/webpage-to-website.html b/guides/webpage-to-website.html
new file mode 100644
index 0000000..395b0b6
--- /dev/null
+++ b/guides/webpage-to-website.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="description" content="Following on from the previous guide, this will cover creating a website from the single webpage we currently have. Links, additional design, all the shebang.">
+		<meta name="author" content="Nathan (Aney) Steel">
+		<meta name="theme-color" content="white">
+		<meta name="theme-color" content="black">
+		<link rel="stylesheet" type="text/css" href="/main.css">
+		<link rel="icon" type="image/png" href="/images/favicon.svg">
+		<title>Webpage to website</title>
+	</head>
+
+	<body>
+		<header>
+			<h1>Webpage to website</h1>
+			<input id="burger-toggle" type="checkbox"/>
+			<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
+			<hr/>
+			<nav>
+				<a href="/">home</a>
+				<a href="/about.html">about</a>
+				<a href="/projects.html">projects</a>
+				<a href="/blog/">blog</a>
+				<a href="/sitemap.html">misc</a>
+				<a href="/support.html">support</a>
+			</nav>
+			<hr/>
+		</header>
+
+		<main>
+			<section>
+				<p>With a <a href="/guides/your-first-webpage.html">basic webpage</a> now created, the next hurdle is to add multiple pages, and get them all linked together into a website of some sort.</p>
+
+				<h2>Create a new page</h2>
+				<p>First off we need a second page, with its own unique name. Let's call it <strong>about.html</strong>.</p>
+				<p>To quickly get this up, copy and paste the <strong>index.html</strong> file from the previous guide, and simply rename it.</p>
+
+				<h2>Link the pages</h2>
+				<p>Next up, creating our links. We're going the <em>traditional</em> route, with a navbar. So at the top of the body tag, above the other content, add the following.</p>
+<pre><code>&lt;nav&gt;
+	&lt;a href="index.html"&gt;Home&lt;/a&gt;
+	&lt;a href="about.html"&gt;About&lt;/a&gt;
+&lt;/nav&gt;</pre></code>
+
+				<p>The key part of the snippet is the <strong>anchor/a</strong> tag, as this tells the browser to create the link to the files in the hrefs.</p>
+
+				<h3>Style the navigation</h3>
+				<p>In the style tag, add the following (I recommend at the bottom of what's already there). Then give the page a reload.</p>
+<pre><code>nav{
+	background-color: white;
+	border-bottom: 1px solid gainsboro;
+	padding: 12px;
+}
+nav a{
+	padding: 12px;
+	text-decoration: none;
+	font-weight: bold;
+}
+nav a:hover{
+	background-color: black;
+	color: white;
+}</code></pre>
+
+				<p>Give each link a click to check everything's alright. Doing this you may spot the nav styling is only on one page, oops, simple mistake. To fix this you'll have to open up the other HTML file, and add the styling in there too.</p>
+
+				<h2>Make the styling global</h2>
+				<p>With multiple pages up, imagine for a second if you had 10-15 more pages. How much of a pain would changing some styling be? Even just a simple colour change would be mega annoying, and time consuming. <em>Open file, change style, save, and repeat...</em></p>
+
+				<p>Thankfully there's a simple solution to this problem, and it's actually best-practice to do this for every website!</p>
+
+				<h3>External CSS</h3>
+				<p>Our current internal stylesheet is now a hindrence as we've got multiple pages. So what we're going to do is take its content, and pop it into its own file.</p>
+
+				<h3>How</h3>
+				<p>First off, create a new file (same place as the .html files) called <strong>main.css</strong>, this will be our external stylesheet.</p>
+				<p>Next, open up one of the .html pages, and copy everything between the style tags, paste it into the CSS file, and save each file.</p>
+
+				<p>Now we've got the styling, we can get rid of the internal CSS entirely. Delete the style tags, and everything between from the .html pages, and replace them with the following snippet.</p>
+				<pre><code>&lt;link rel="stylesheet" type="text/css" href="main.css"&gt;</code></pre>
+				<p>Reload, and voila! The site looks exactly the same. It's just easier to manage now.</p>
+
+				<h2>Footer</h2>
+
+				<p>To finish things off, why not add a quick footer proclaiming our copyright of the site?</p>
+
+				<p>Add the following snippet just before the closing <code>&lt;/body&gt;</code> tag.</p>
+
+<pre><code>&lt;footer&gt;
+	&lt;p&gt;&copy; Aney 2022 | Made with &heartsuit;&lt;/p&gt;
+&lt;/footer&gt;</code></pre>
+
+				<p>And a little styling to the CSS file.</p>
+<pre><code>body{
+	display: flex;
+	flex-direction: column;
+}
+main{
+	flex: 1 0 auto;
+}
+footer{
+	background-color: black;
+	color: white;
+}</code></pre>
+
+				<p>You may notice that body has already been used in the CSS, and that's OK thanks to the cascading nature of CSS. This can become a problem if you have the same selectors scattered around though, as it can begin to override styling. To avoid this problem I recommend having just the one location for each selector. So take the new <strong>body</strong> styling, and add it to the pre-existing body styling near the top of your CSS file.</p>
+
+				<h2>We got a website</h2>
+				<p>A little bit of content here, and there. A couple of styling tweaks, and a few more pages then you've got your very first website.</p>
+
+				<p>From here there are a few different directions. You could:</p>
+				<ol>
+					<li>Follow along to the rest of my <a href="/guides/web-dev-101">web-dev 101</a></li>
+					<li>Venture to the internet and learn everything you can about web development</li>
+					<li><a href="/guides/guide-to-server-hosting.html">Setup a server</a>, pop what you've got on the worldwide web, and call it a day</li>
+				</ol>
+
+				<p>Whatever you choose to do, I offer you the best of luck.</p>
+
+			</section>
+		</main>
+
+		<footer>
+			<hr/>
+			<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
+		</footer>
+	</body>
+</html>
+
