Merge branch 'release/0.8.0'
Nathan Steel
3 years ago
commit
bce141358d
@ -0,0 +1,69 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="An introduction to who I am, and what I do.">
|
||||||
|
<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>About me</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>About me</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>
|
||||||
|
<h2>Who are you</h2>
|
||||||
|
<p>I'm Aney, a developer, and self-hoster that enjoys art/design, automation, Unix, and those pesky Japanese cartoons. Yes, that's a straight up rip from the homepage, why re-invent the wheel right?</p>
|
||||||
|
|
||||||
|
<p>I set this website up as a means to share information to educate, and help people, as well as to easily point people to my answers for common questions.</p>
|
||||||
|
|
||||||
|
<h2>What do you do?</h2>
|
||||||
|
<p>I'm currently employed as a web developer, and I enjoy it to an extent. I love solving problems, optimising sites, and creating designs/experiences, but building the guts, not so much.</p>
|
||||||
|
<p>Outside of work I practise minimalism, frugalism (to an extent), and work towards Financial Independance (FI/RE). I also love the idea of OneBagging, self-sufficiency, and travelling, so these are things I'm trying to work towards.</p>
|
||||||
|
|
||||||
|
<h2>What else do you do?</h2>
|
||||||
|
<p>Ok sure, I'm (extremely) slowly working on the basic infrastructure, and website for <a href="https://anetwork.uk" target="_blank" rel="noopener">aNetwork</a>, a gaming community, and public game server host. I'm also working on writing <a href="/guides/">guides</a> on <a href="/guides/guide-to-server-hosting.html">server hosting</a>, and <a href="/guides/web-dev-101.html">web development</a>.</p>
|
||||||
|
<p>If there's ever anything else, you can find out more on my <a href="/projects.html">projects</a> page, or on my <a href="/blog/">blog</a>.</p>
|
||||||
|
|
||||||
|
<h2>What do you own?</h2>
|
||||||
|
<p>Following up on the minimalism, it seem you've almost got to do an "everything I own" to prove you only have 6 items in your possession. I'm not that bad, yet, but I honestly feel like that's like my little hidden goal.</p>
|
||||||
|
<p>I've got a few pages about this on the site, so if you do want to know, check out:</p>
|
||||||
|
<ul>
|
||||||
|
<li>My <a href="/equipment.html">hardware/tech</a></li>
|
||||||
|
<li>My kitchen</li>
|
||||||
|
<li>Living Room and Bedroom</li>
|
||||||
|
<li>Collectables and Sentimental</li>
|
||||||
|
<li>Misc</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>Why are you telling me this?</h2>
|
||||||
|
<p>I figured it'd make for an easy introduction for anyone who stumbles across my site.</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>
|
||||||
|
|
||||||
@ -0,0 +1,62 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="Burger menu, who dis? I've added a burger menu to the site, and figured I'd write a piece about it as it's currently the only 'advanced' piece of funtionality that exists here.">
|
||||||
|
<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>Hello, Burger menu!</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Hello, Burger menu!</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 class="intro">On Friday 18th of November 2022, I released version 0.8.0 of this website. With that a large, and very noticable change occured. The addition of a burger menu.</p>
|
||||||
|
|
||||||
|
<h2>What is a burger menu?</h2>
|
||||||
|
<p>A burger menu is simply a type of navigational menu. It's typically hidden by default with just a visible icon, but when (the icon is) clicked the navigational content becomes visible, and accessible.</p>
|
||||||
|
<h3>Why is it called a burger menu?</h3>
|
||||||
|
<p>The name burger/hamburger comes from the appearance of the icon. It consists of 3 horizontal lines, ordered vertically, so at a glance it sort of looks like the top of a bun, a patty, and the bottom of a bun.</p>
|
||||||
|
|
||||||
|
<h2>Why add a burger menu?</h2>
|
||||||
|
<p>Simple, I wasn't a fan of how the site showed the navigational menu on mobiles. I felt it took up too much of the screen real estate, and the requirement for some users to scroll down to get to the content is terrible design. With the implimentation of the burger menu I believe the site looks much cleaner, with a better user-experience on mobiles. So an overall great success, all without losing any navigational control.</p>
|
||||||
|
|
||||||
|
<h2>CSS only</h2>
|
||||||
|
<p>Unlike many of the burger menus you'll spot in the wild, the burger menu on my site is written with pure CSS. It makes use of a checkbox input for toggling, so those of you with Javascript disabled can still benefit from the better user experience.</p>
|
||||||
|
<p>The only downside to this is in the case that CSS doesn't load, as there will be a random visible checkbox atop of the navigation.</p>
|
||||||
|
|
||||||
|
<h2>What? I don't see it?</h2>
|
||||||
|
<p>This could be one of two reasons, your browser isn't small enough (try resizing it), or you've got the old CSS cached. If you've got the old CSS you'll notice the random checkbox I mentioned, try hitting CTRL+F5 to perform a hard-reload.</p>
|
||||||
|
|
||||||
|
<h2>Inspiration</h2>
|
||||||
|
<p>Like many things, I started by googling similar implementations, and found this <a href="https://codepen.io/alvarotrigo/pen/MWEJEWG" target="_blank" rel="noopener">snippet by Alvaro</a>. I used this as the starting point, stripping it down, and making my own changes to make it work for my site in a way I liked.</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>
|
||||||
|
|
||||||
@ -0,0 +1,82 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="A collection of typically tech related guides, authored by Aney.">
|
||||||
|
<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>Aney's Guides</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Aney's Guides</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>
|
||||||
|
|
||||||
|
<h2>Pinned</h2>
|
||||||
|
<ul>
|
||||||
|
<li><a href="/guides/guide-to-server-hosting.html">Guide to server hosting</a></li>
|
||||||
|
<li><a href="/guides/web-dev-101.html">Web Development 101</a></li>
|
||||||
|
</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>
|
||||||
|
<li><a href="/guides/nginx-proxy.html">Proxy services with Nginx</a> - (WIP)14/09/2022</li>
|
||||||
|
<li><a href="/guides/install-kvm-virtual-machine.html">Install a KVM Virtual Machine</a> - (WIP)14/09/2022</li>
|
||||||
|
<li><a href="/guides/setup-git-server.html">Setup git server</a> - 13/09/2022</li>
|
||||||
|
<li><a href="/guides/backup-with-cron.html">Automate Backups with Cron</a> - 26/08/2022</li>
|
||||||
|
<li><a href="/guides/server-install-debian.html">Debian Install Guide (for Server)</a> - 22/08/2022</li>
|
||||||
|
<li><a href="/guides/set-static-ip.html">How to set a static IP</a> - 22/08/2022</li>
|
||||||
|
<li><a href="/guides/vm-seperation-of-concerns.html">VM Seperation of Concerns</a> - 29/07/2022</li>
|
||||||
|
<li><a href="/guides/setup-kvm-bridge.html">Setup a KVM bridge</a> - 29/07/2022</li>
|
||||||
|
<li><a href="/guides/virsh-cheatsheet.html">Virsh Cheatsheet</a> - 29/07/2022</li>
|
||||||
|
<li><a href="/guides/setup-qemu-kvm.html">Install KVM for virtualisation</a> - 29/07/2022</li>
|
||||||
|
<li><a href="/guides/backup-with-rdiff.html">Backup files with rdiff</a> - 17/07/2022</li>
|
||||||
|
<li><a href="/guides/backup-with-rsync.html">Backup files with rsync</a> - 17/07/2022</li>
|
||||||
|
<li><a href="/guides/add-php-to-nginx.html">PHP on Nginx setup</a> - 10/06/2022</li>
|
||||||
|
<li><a href="/guides/sql-cheatsheet.html">SQL Cheatsheet</a> - 09/06/2022</li>
|
||||||
|
<li><a href="/guides/adminer-setup.html">Adminer Setup</a> - 09/06/2022</li>
|
||||||
|
<li><a href="/guides/backup-mysql-mariadb.html">Backing Up MySQL/MariaDB</a> - 09/06/2022</li>
|
||||||
|
<li><a href="/guides/install-mysql-mariadb.html">MySQL/MariaDB Setup Guide</a> - 09/06/2022</li>
|
||||||
|
<li><a href="/guides/nginx-web-optimisation.html">NGINX web optimisation</a> - 30/05/2022</li>
|
||||||
|
<li><a href="/guides/certbot-ssl.html">Setup SSL with Certbot</a> - 30/05/2022</li>
|
||||||
|
<li><a href="/guides/setup-nginx-website.html">How to setup an nginx website</a> - 30/05/2022</li>
|
||||||
|
<li><a href="/guides/nginx-install.html">How to install an nginx webserver</a> - 30/05/2022</li>
|
||||||
|
<li><a href="/guides/get-a-domain-name.html">How to purchase a domain name</a> - 30/05/2022</li>
|
||||||
|
<li><a href="/guides/add-domain-to-server.html">Link your domain name to your server</a> - 24/05/2022</li>
|
||||||
|
<li><a href="/guides/initial-server-setup.html">Debian Server Setup</a> - 24/05/2022</li>
|
||||||
|
<li><a href="/guides/guide-to-server-hosting.html">Aney's guide to server hosting</a> - 24/05/2022</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</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>
|
||||||
|
|
||||||
@ -0,0 +1,77 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="A beginners guide to front-end web development, from absolutely no knowledge, to a junior developer.">
|
||||||
|
<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>Web Development 101. Guide to web development.</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Web Development 101</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>Interested in web development, but don't know where to begin? Don't worry, I've got you covered.</p>
|
||||||
|
|
||||||
|
<h2>My guides</h2>
|
||||||
|
<p>For each of my guides I recommend typing out the code snippets individually instead of copy and pasting, as it'll help you remember and learn.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<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>
|
||||||
|
<h2>Javascript</h2>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Snippets</h2>
|
||||||
|
</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>
|
||||||
|
|
||||||
@ -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><nav>
|
||||||
|
<a href="index.html">Home</a>
|
||||||
|
<a href="about.html">About</a>
|
||||||
|
</nav></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><link rel="stylesheet" type="text/css" href="main.css"></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></body></code> tag.</p>
|
||||||
|
|
||||||
|
<pre><code><footer>
|
||||||
|
<p>© Aney 2022 | Made with ♥</p>
|
||||||
|
</footer></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>
|
||||||
|
|
||||||
@ -0,0 +1,171 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="Ever thought of building your own website from scratch? This guide covers the basics of creating a webpage, leading on to learning more about the structure, and functionality needed to create one yourself.">
|
||||||
|
<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>Your first webpage</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Your first webpage</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>In my opinion learning is done by doing, so where better to start than making your own basic webpage. This assumes you already have a text editor; you can use Notepad, Vim, etc. but if you're learning coding, I recommend <a href="https://code.visualstudio.com/" target="_blank" rel="noopender">Visual Studio Code</a></p>
|
||||||
|
|
||||||
|
<h2>Create your html file</h2>
|
||||||
|
|
||||||
|
<p>First you need to create the file where the code will reside. For this guide (and others) I recommend making a new folder/directory to put your files in. Once you've created the new directory, make a new file inside of it, naming said file <b>index.html</b> (you may need to show filetypes to rename .txt to .html. So check here for <a href="https://support.apple.com/en-az/guide/mac-help/mchlp2304/mac" target="_blank" rel="noopener">MacOS</a>, or <a href="https://knowledge.autodesk.com/support/autocad/learn-explore/caas/sfdcarticles/sfdcarticles/How-to-enable-hidden-file-extensions-in-Windows.html" target="_blank" rel="noopener">Windows</a>).</p>
|
||||||
|
|
||||||
|
<h2>Basic Boilerplate</h2>
|
||||||
|
|
||||||
|
<p>There are some default things that each webpage needs to be 'compliant' with the web, so I recommend starting each page in the same way.</p>
|
||||||
|
|
||||||
|
<p>Add the following code snippet into your file, and save.</p>
|
||||||
|
|
||||||
|
<pre><code><!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
</body>
|
||||||
|
</html></pre></code>
|
||||||
|
|
||||||
|
<p>Now if you double click the file it'll open a blank page in your browser (if you've got the .html extension). That's to be expected, as there's no actual content (yet).</p>
|
||||||
|
|
||||||
|
<p>Before we do get to the content, let's break down this snippet a little. The aim is to learn, not to blindly copy/paste, right?</p>
|
||||||
|
|
||||||
|
<h3>Snippet explaination</h3>
|
||||||
|
<p><b><code><!DOCTYPE html></code></b> a standalone tag that tells the browser what document type to expect. We're using HTML5, so it's a short and simple declaration.</p>
|
||||||
|
<p><b><code><html lang="en"></code></b> this element is a container for (almost) all the rest of the HTML, as it tells the browser everything inside it needs to be rendered as HTML, and which language the content is.</p>
|
||||||
|
<p><b><code><head></code></b> is a container for metadata (data about data), it gives the browser all the info it needs, to render the page how we want it. Anything between the <b>head</b> tags will not be <em>directly</em> shown on the webpage.</p>
|
||||||
|
<p><b><code><body></code></b> this is a container for the content/body of the webpage. This is where visible elements, and content is applied.</p>
|
||||||
|
|
||||||
|
<h2>Basic Content</h2>
|
||||||
|
<p>So now we'll add some visible content, to make a <em>real</em> webpage, and not just a blank page.</p>
|
||||||
|
|
||||||
|
<p>Between the <b>body</b> tags, we'll add a very simple introduction about ourselves. Change the content between the tags to whatever you want. I'll explain them in a later guide, but for now just play around.</p>
|
||||||
|
<pre><code><main><div class="layout-wrapper">
|
||||||
|
<h1>Hi, I'm <em>Aney</em></h1>
|
||||||
|
<p>Welcome to my site, it's pretty cool!</p>
|
||||||
|
<h2>Skills</h2>
|
||||||
|
<p>I have an assortment of <em>skills</em>, including:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Being swag</li>
|
||||||
|
<li>Getting the bag</li>
|
||||||
|
</ul>
|
||||||
|
<h2>Portfolio</h2>
|
||||||
|
<!-- Any image on the internet can go here -->
|
||||||
|
<img src="https://via.placeholder.com/200x200/">
|
||||||
|
<img src="https://via.placeholder.com/200x200/">
|
||||||
|
<img src="https://via.placeholder.com/200x200/">
|
||||||
|
</div></main></pre></code>
|
||||||
|
|
||||||
|
<p>Now if you refresh the webpage, tada! We have content.</p>
|
||||||
|
|
||||||
|
<h2>A little styling</h2>
|
||||||
|
<p>With content on the page we're done, right? However those keen eyed of you may notice it doesn't look very good, so we'll spice that up a with some basic CSS styling.</p>
|
||||||
|
|
||||||
|
<p>Between the <b>head</b> tags, we'll add the style tag, allowing us to embed the CSS into the page.</p>
|
||||||
|
<pre><code><style>
|
||||||
|
</style></pre></code>
|
||||||
|
|
||||||
|
<h3>The CSS</h3>
|
||||||
|
<p>For the actual styling, add the following snippet between the <b>style</b> tags.</p>
|
||||||
|
<pre><code>html,body{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
html{
|
||||||
|
font-size: 12px;
|
||||||
|
background: #EEE;
|
||||||
|
background: linear-gradient(0, #DDD 0%, #EEE 35%, #FFF 55%, #EEE 100%);
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
margin: 0;
|
||||||
|
text-align: center;
|
||||||
|
font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
|
||||||
|
}
|
||||||
|
.layout-wrapper{
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 4px 12px;
|
||||||
|
max-width: 980px;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
font-size: 22px;
|
||||||
|
background-color: #10106b;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
/* The selector below styles em, but only if it's inside a h1 */
|
||||||
|
h1 em{
|
||||||
|
color: #8cecf5;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
font-size: 20px;
|
||||||
|
background-color: #020024;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
p{
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
ul{
|
||||||
|
padding: 0;
|
||||||
|
list-style-position: inside;
|
||||||
|
list-style-type: square;
|
||||||
|
}
|
||||||
|
img{
|
||||||
|
border: 2px solid #10106b;
|
||||||
|
border-style: dashed;
|
||||||
|
}
|
||||||
|
img:hover{
|
||||||
|
border-color: ##6f6fa5;
|
||||||
|
}</pre></code>
|
||||||
|
|
||||||
|
<p>Note how we specify the name of the HTML tags in the CSS. They're a direct one-to-one, so adding styling to ul in the CSS, changes the appearance of ul in the HTML.</p>
|
||||||
|
|
||||||
|
<h4>Customise your site</h4>
|
||||||
|
<p>I've intentionally made the styling <em>"cool"</em> and <em>experimental</em> for those unfamiliar with CSS. That means that there should be some wiggle room for you to figure out, and mess around with it, to find something you like.</p>
|
||||||
|
|
||||||
|
<p>If you're unsure about the #10106b, etc. they're colours, take a quick look <a href="https://www.google.com/search?q=hex+colour+picker&rlz=1C1CHBF_enGB948GB948&oq=hex&aqs=chrome.2.69i57j0i131i433i512l2j46i433i512j0i131i433i512j69i61l3.3688j0j7&sourceid=chrome&ie=UTF-8" target="_blank" rel="noopener" >here</a>.</p>
|
||||||
|
|
||||||
|
<h2>Page title</h2>
|
||||||
|
|
||||||
|
<p>You know those titles that show at the top of your browser/in tabs? We're going to add that in.</p>
|
||||||
|
|
||||||
|
<p>Between the head tags, and above the style tag add the following.</p>
|
||||||
|
|
||||||
|
<pre><code><title>My website</title></pre></code>
|
||||||
|
|
||||||
|
<p>Reload your webpage and you should spot it. It doesn't show on the page itself, but it will show in your browser tab (hover over it if it doesn't all fit).</p>
|
||||||
|
|
||||||
|
<h2>It's done!</h2>
|
||||||
|
<p>Your first webpage is official complete. Before you start applying for jobs in the field, I do recommend looking at the rest of my <a href="/guides/web-dev-101.html">Web Development 101</a> guide. This will cover the most common elements, more CSS styling, a little Javascript for client-side scripting, and a few additional snippets.</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>
|
||||||
|
|
||||||
@ -1,73 +1,88 @@
|
|||||||
html,body { height:100% }
|
html,body{height:100%}
|
||||||
html { font-size:14px }
|
html{font-size:14px}
|
||||||
body {
|
header{position:relative}
|
||||||
margin:.2rem;
|
header hr{display:none}
|
||||||
max-width:48rem;
|
body{
|
||||||
padding:0 .62rem;
|
max-width:54rem;
|
||||||
font:1.2rem/1.62 sans-serif
|
margin:.2rem;padding:0 .62rem;
|
||||||
}
|
font:1.2rem/1.62 sans-serif;
|
||||||
nav>a {
|
display:-webkit-flex;display:-ms-flexbox;display:flex;
|
||||||
|
flex-direction:column}
|
||||||
|
main{flex:1 0 auto}
|
||||||
|
nav>a{
|
||||||
padding:.2rem 0;
|
padding:.2rem 0;
|
||||||
display:block;
|
display:block;
|
||||||
border-top:1px dotted #000
|
border-top:1px dotted #000}
|
||||||
}
|
nav>a:first-child{border:none}
|
||||||
nav>a:first-child {border:none}
|
|
||||||
|
|
||||||
h1,h2,h3,h4,h5,h6 { line-height:1 }
|
h1,h2,h3,h4,h5,h6{line-height:1}
|
||||||
header h1 { margin: 1.4rem auto 1.2rem }
|
header h1{margin:1.4rem 52px 1.2rem auto}
|
||||||
|
|
||||||
a { text-decoration:none }
|
a{text-decoration:none}
|
||||||
a:link,a:visited { color:#087CA7 }
|
a:link,a:visited{color:#087CA7}
|
||||||
a:hover,a:visited:hover { color:#09B2DC }
|
a:hover,a:visited:hover{color:#09B2DC}
|
||||||
|
|
||||||
ul {
|
ul{padding-left:0;margin-left:0;list-style:inside}
|
||||||
padding-left:0; margin-left:0;
|
ul li{margin:.35rem}
|
||||||
list-style-position:inside
|
li>ul{margin-left:1em}
|
||||||
}
|
|
||||||
ul li{ margin: 0.35rem }
|
|
||||||
li>ul { margin-left:1em }
|
|
||||||
|
|
||||||
.tag {
|
.tag{
|
||||||
font-size:.8rem;
|
font-size:.8rem;vertical-align:middle;
|
||||||
padding:.2rem;border-radius:.33rem;
|
padding:.2rem;border-radius:.33rem;
|
||||||
background-color:#191919;color:#FFF;
|
background:#191919;color:#FFF}
|
||||||
vertical-align:middle
|
|
||||||
}
|
|
||||||
|
|
||||||
pre{
|
pre{
|
||||||
background-color: #191919;color: #FFF;
|
background:#191919;color:#FFF;
|
||||||
white-space: pre-wrap;overflow-x: auto;
|
white-space:pre-wrap;overflow-x:auto;
|
||||||
padding: 12px; border: 1px solid #FFF;
|
padding:12px;border:1px solid #FFF}
|
||||||
}
|
.page-nav{
|
||||||
|
float:right;
|
||||||
|
padding:14px;border:1px solid;
|
||||||
|
margin:1.4rem;margin-right:auto}
|
||||||
|
footer p{margin:0}
|
||||||
|
|
||||||
table{text-align: left;width: 100%;border-collapse: collapse}
|
table{text-align:left;width:100%;border-collapse:collapse}
|
||||||
td, th{border: 1px solid #222;padding: 9px 6px}
|
td,th{border:1px solid #222;padding:9px 6px}
|
||||||
th{padding: 12px;color: white}
|
th{padding:12px;color:#FFF}
|
||||||
thead th{ background-color: #191919 }
|
thead th{background:#191919}
|
||||||
tbody th{ background-color: #292929 }
|
tbody th{background:#292929}
|
||||||
tr:nth-child(even){ background-color: #FEFEFE }
|
tr:nth-child(even){background:#FEFEFE}
|
||||||
tr:hover{ background-color: #DEDEDE }
|
tr:hover{background:#DEDEDE}
|
||||||
|
|
||||||
footer p { margin:0 }
|
.burger-container{
|
||||||
body {
|
position:absolute;height:24px;width:30px;
|
||||||
display:-webkit-flex;display:-ms-flexbox;display:flex;
|
cursor:pointer;top:34px;right:10px}
|
||||||
flex-direction:column
|
#burger-toggle,#burger-toggle~nav{display:none}
|
||||||
}
|
.burger,.burger::after,.burger::before{
|
||||||
main { flex:1 0 auto }
|
position:absolute;background:#000;
|
||||||
|
height:4px;width:30px;border-radius:2px;content:"";
|
||||||
|
transition:transform 300ms cubic-bezier(.4,1,.5,1)}
|
||||||
|
.burger::before{margin-top:-8px}
|
||||||
|
.burger::after{margin-top:8px}
|
||||||
|
#burger-toggle:checked~nav{display:block}
|
||||||
|
#burger-toggle:checked+.burger-container .burger::before{margin-top:0;transform:rotate(45deg)}
|
||||||
|
#burger-toggle:checked+.burger-container .burger::after{margin-top:0;transform:rotate(-45deg)}
|
||||||
|
#burger-toggle:checked+.burger-container .burger{background:rgba(255,255,255,0)}
|
||||||
|
|
||||||
@media print {body {max-width:none}}
|
@media print{body{max-width:none}}
|
||||||
|
@media(min-width:720px){
|
||||||
@media (min-width: 600px) {
|
body{margin:.2rem auto}
|
||||||
body { margin:.2rem auto; }
|
nav>a{margin-left:2rem;padding:auto;display:inline;border:none}
|
||||||
nav>a { margin-left:2rem; padding: auto; display: inline; border: none }
|
nav>a:first-child{padding:1rem 0;margin-left:0}
|
||||||
nav>a:first-child { padding:1rem 0; padding-left:0; margin-left:0 }
|
ul li{margin:auto}
|
||||||
ul li{ margin: auto }
|
.burger-container{display:none}
|
||||||
|
#burger-toggle~nav,header hr{display:block}
|
||||||
|
}
|
||||||
|
@media(max-width:320px){
|
||||||
|
#burger-toggle~nav{display:block}
|
||||||
|
.burger-container{display:none}
|
||||||
|
header h1{margin-right:auto}
|
||||||
}
|
}
|
||||||
@media (prefers-color-scheme: dark) {
|
@media(prefers-color-scheme:dark){
|
||||||
body { color:#FFF; background:#191919 }
|
body{color:#FFF;background:#191919}
|
||||||
a:link,a:visited {color:#9CF}
|
a:link,a:visited{color:#9CF}
|
||||||
a:hover,a:visited:hover {color:#DA4167}
|
a:hover,a:visited:hover{color:#DA4167}
|
||||||
nav>a { border-color:#FFF }
|
nav>a{border-color:#FFF}
|
||||||
.tag {background-color:#FFF;color:#000}
|
.tag{background:#FFF;color:#000}
|
||||||
|
.burger,.burger::after,.burger::before{background:#FFF}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -0,0 +1,49 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="A collection of recipes used, written, and altered by Aney. Bone jaw, I'm the chef.">
|
||||||
|
<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>Aney's Recipes</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Aney's Recipes</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>A collection of recipes I use, mostly budget oriented, but always tastee.</p>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<ul>
|
||||||
|
<li><a href="/recipes/woky-beef-stew.html">Woky Beef Stew</a></li>
|
||||||
|
</ul>
|
||||||
|
</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>
|
||||||
|
|
||||||
@ -0,0 +1,148 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="A simple, filling, and tasty beef stew cooked in a wok.">
|
||||||
|
<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>Woky Beef Stew</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Woky Beef Stew</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>
|
||||||
|
<aside class="page-nav">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#requirements">Requirements</a></li>
|
||||||
|
<li><a href="#ingredients">Ingredients</a></li>
|
||||||
|
<li><a href="#preperation">Preperation</a></li>
|
||||||
|
<li><a href="#instructions">Instructions</a></li>
|
||||||
|
</ul>
|
||||||
|
</aside>
|
||||||
|
<section>
|
||||||
|
<p>This is an incomplete recipe, as I still need to get the seasonings down. Feel free to use, but just note it's not in its entirety.</p>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2 id="requirements">Requirements</h2>
|
||||||
|
<p>Time: ~1.5 hours</p>
|
||||||
|
<ul>
|
||||||
|
<li>Measuring jug</li>
|
||||||
|
<li>Wok</li>
|
||||||
|
<li>Wooden Spoon</li>
|
||||||
|
<li>(Chef's) Knife</li>
|
||||||
|
<li>Cutting Board</li>
|
||||||
|
<li>Tinfoil, or lid for wok</li>
|
||||||
|
<li>Bowl</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2 id="ingredients">Ingredients</h2>
|
||||||
|
<p>These are the ingredients for two adult portions</p>
|
||||||
|
<ul>
|
||||||
|
<li>200g (Stewing) Steak (Diced)</li>
|
||||||
|
<li>1 Potato (Diced)</li>
|
||||||
|
<li>~1.5 Carrot (Sliced)</li>
|
||||||
|
<li>.5 Onion (Sliced)</li>
|
||||||
|
<li>.5 celery stalk (Sliced)</li>
|
||||||
|
<li>2 tsp Corn starch (mixed with water)</li>
|
||||||
|
<li>~75g Peas (Frozen or not)</li>
|
||||||
|
<li>~75g Corn (Frozen or not)</li>
|
||||||
|
<li>1.5 tbsp tomato puree</li>
|
||||||
|
<li>.5 tin chopped tomatos</li>
|
||||||
|
<li>300ml (boiling) water</li>
|
||||||
|
<li>1 beef/vegetable stock cube</li>
|
||||||
|
</ul>
|
||||||
|
<h3>Seasonings</h3>
|
||||||
|
<ul>
|
||||||
|
<li>1 tsp Salt</li>
|
||||||
|
<li>1 tsp Oregano</li>
|
||||||
|
<li>.5 tsp Basil</li>
|
||||||
|
<li>1 tsp Paprika</li>
|
||||||
|
<li>1 tsp Cinnamon</li>
|
||||||
|
<li>1 tsp Sugar</li>
|
||||||
|
<li>.5 tsp Turmeric</li>
|
||||||
|
<li>1 Garlic clove (Bashed)</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2 id="preperation">Preperation</h2>
|
||||||
|
<p>Chop the ingredients as stated in the ingredients section.</p>
|
||||||
|
<p>Add stock cube(s) into the measuring jug, then fill with the boiling water. Mix until disolved little.</p>
|
||||||
|
<p>Add cornstarch into a mug/bowl with a little cold water and mix until a paste.</p>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2 id="instructions">Instructions</h2>
|
||||||
|
<ol>
|
||||||
|
<li>
|
||||||
|
<h3>Brown the beef/steak</h3>
|
||||||
|
<p><em>5-10 minutes</em></p>
|
||||||
|
<p>Add the wok to the stove, and set to a high heat for a few minutes.</p>
|
||||||
|
<p>Add a splash of oil, then the meat.</p>
|
||||||
|
<p>Allow the meat to brown on all sides, 'stirring' occassionally.</p>
|
||||||
|
<p>Once browned drain the fat.</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<h3>Add the flavour (and celery)</h3>
|
||||||
|
<p><em>3-5 minutes</em></p>
|
||||||
|
<p>Add the onion, celery, seasonings, and puree to the wok.</p>
|
||||||
|
<p>Stir thoroughly so that the puree and seasoning covers everything.</p>
|
||||||
|
<p>Slowly stir-fry for 1-3 minutes.</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<h3>Add the liquids</h3>
|
||||||
|
<p><em>15-20 minutes</em></p>
|
||||||
|
<p>Add the chopped tomatos, and the stock to the wok.<p>
|
||||||
|
<p>Mix the contents together.</p>
|
||||||
|
<p>Season to taste with salt/pepper. If unsure, just leave it as is.</p>
|
||||||
|
<p>Bring to a boil, then reduce the stoves heat.</p>
|
||||||
|
<p>Cover the wok with a lid, or some tinfoil, and leave to sit for 15-20 minutes.</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<h3>Add large veg</h3>
|
||||||
|
<p><em>20-25 minutes</em></p>
|
||||||
|
<p>Add the cornstarch mixture to the stew, and mix through.</p>
|
||||||
|
<p>Add the carrot, and potato to the wok.</p>
|
||||||
|
<p>Bring the stew back to a boil, then reduce the heat.</p>
|
||||||
|
<p>Re-cover the wok and leave for 20-25 minutes.</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<h3>Add small veg</h3>
|
||||||
|
<p><em>10-15 minutes</em></p>
|
||||||
|
<p>Add the peas, and corn, and mix through the stew.</p>
|
||||||
|
<p>Re-cover the wok again, and leave for another 10-15 minutes.</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<h3>Simmer or serve</h3>
|
||||||
|
<p><em>0-60 minutes</em></p>
|
||||||
|
<p>The stew should be good to serve now, however if you'd like it a little thicker, or the beef/veg a little softer then leave to simmer for up to an hour.</p>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</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>
|
||||||
|
|
||||||
Loading…
Reference in New Issue