index.html

---
layout: default
---
<h1>Contents</h1>
<ul>
    <li>The basics</li>
    <li><a href="ubuntu">Unix on your laptop</a></li>
    <li><a href="wordpress">Wordpress on your laptop</a></li>
    <li><a href="public">Getting ready to go public</a></li>
</ul>
<div style="display: inline-block; float: right;"><a href="ubuntu">Next lesson</a></div>

<h1>The basics</h1>
<ol>
<li>
    Set up a simple web site on GitHub. 
    <ul><li>Some basic instructions <a href="https://homelesshack.github.io/homelesstemplate/">here</a>. Make a note of the web link it generates as you will need it later.</li>
    <li>There are other reasons for having a GitHub account later but for now it is a good way to play around with things and see how they work. I’ve used it for hackathons e.g. <a href="https://homelesshack.github.io/">this one</a> and people who don’t have a lot of money, like a small charity, might not need anything more than this.</li></ul>
</li>
<li>
    Learn some basic HTML. Go to: <a href="https://www.w3schools.com/html/default.asp">w3schools</a> and do the first few pages (to Attributes).
    <ul><li>Everything on the web uses HTML. You can use it with GitHub Pages, Wordpress and pretty much everything.</li></ul>
</li>
<li>
    Find the Google Developer tools
    <ul><li>Go and look at any old website in Google Chrome. Right mouse click on something on the page and choose the "inspect" item.
    This opens up Developer tools and shows you the HTML (and other stuff) which makes the website.</li>
    <li>Make a list of things you like and copy the bits of HTML from the developer tools window.</li></ul>
</li>
<li>
    Make your first website.
    <ul><li>Create an HTML page as you learnt in step 2.</li>
        <li>Keep the parts between the <code>&ltbody&gt</code> and <code>&lt/body&gt</code> tags but delete the rest as github will generate that for you.
        <li>Add these three lines at the top (don't worry why right now)
<pre><code>---
layout: default
---
</code></pre></li>
<li>Save it as "index.html" and upload it to the github repository you made in step 1.</li>
<li>Git hub will rebuild your website and you can go and see it. If you didn't take a note of the link in step 1 you can find it again in the settings. It will probably be <code>https://<i>username</i>.github.io/<i>repository name</i>/</code>.</li>
<li>It might take a few minutes to work so wait a bit and refresh a few times to see your glorious creation</li>
</ul>
    </li>
</ol>
<div style="display: inline-block; float: right;"><a href="ubuntu">Next lesson</a></div>