So, Google want to teach millions of American girls how to code because their workforce is 70% male. Even Obama’s been getting his knickers (or whatever undergarments he wears – errrr, anyway) in a twist because turns out it’s freaking important to know how to code. Not least because basically everything is online these days but also because it means you can make your own awesome website instead of paying someone upwards of £2,000 (!!) to do it for you. Unless – and maybe even then – you recently won the lottery – there’s no way that’s ever gonna be an option.
So when Steer – one of the many courses popping up recently in attempts to simplify coding (and prevent people from breaking out in a cold sweat whenever they see anything resembling and etc), invited me to come along to their one day course - by the end of which they promised I would have created my own website - my reply was a (part terrified, part) very excited helllls yeah!
Turns out my fear was pretty unwarranted because, okay it’s not the easiest thing in the world but it’s not actually that hard, either. It’s essentially a bit like learning a new language (or just knowing how to use Google Translate – or the coding equivalent - effectively).
All you need before you get going is nifty device to do it on; and if you have nothing but a dusty old laptop that you were thinking of replacing, the **Microsoft Surface 3 **is an excellent option as it can replace both your tablet *and *your laptop and comes with a detachable keyboard which is especially handy if you move around a lot for work. It’s the thinnest and lightest Surface to date, so is super portable and it has over 10 hours of battery life. To turn your table into your laptop just use the clever 3 position kickstand. It even runs Windows and Microsoft Office perfectly. Sorted.
So now you’re ready; this how do you dip your toe into the HTML-encoded world without panicking at words like HTML-encoded...
1. First, you’re going to have to download some stuff. Know how to do that? Ok, you can continue.
You need a couple of things downloaded on your Microsoft Surface 3 before you can start to create your website. It’s free, and it’s easy to download and you’ll already have one of them: a browser. Steer recommend using Google Chrome because it’s the easiest. Then download Sublime Text, which basically just allows you to input plain text (even Word has coding already in it), and is set up with numbers down the side that will be a massive lifesaver in terms of organizing your thoughts and your instructions.
2. And definitely, definitely figure out how you want your site to look before you start
Just like with anything else, creating a website is infinitely easier if you know what you want it to look like. Whether you do this with a designer or on your own in Photoshop or InDesign or whatever (you don’t really have to be a pro at this it’s more so you have an outline of where you want things to go,) create a layout for your site.
Then make a folder on your Microsoft Surface 3 desktop or somewhere easy to get to with smaller folders – one for images, one for text and etc, with everything you want to have on the site. The folder structure is super important as you – and your code – need to know what the source for each item is, and you won’t be able to change this later on. Drag and drop this into Sublime Text and hey presto you’re ready to start bossing some code around.
3. Now you’re ready to start writing some stuff down!
Create a file called index.html in Sublime Text. This is basically where the structure and content for the site is going to go. You can use a site like Html5doctor.com
to look up the code to do stuff like insert a heading, section off bits and add images, and you can even copy the codes you need straight off the site.
Knowing which tag to use and when is the hardest part, so this is pretty much the best cheat code out there. Embedding stuff from Twitter, YouTube or whatever else is also pretty simple as the embed code will already be on each of those sites, ready for you to just whack into your Sublime Text file.
Then just work down from your outline that you did for step two and add in each bit in order of how you’d want it to appear on your site. Steer recommend indenting your instructions and leaving as much white space as you can/want to as it makes it way easier for you to read and makes no difference on your Microsoft Surface 3.
4. And write even more stuff...
Once you’ve got all the HTML stuff sorted, you’re pretty much halfway there, now all that’s left is getting the styling done. For this, create a new file called style.css in Sublime Text. This is basically going to be controlling everything from layout, background colours and images to font and anything else that will give your site character and stop it looking like one of those old school 90’s ones.
First link this file to the other file by adding in a bit of code (you can find this on html5doctor too.) Then start at the top with the more general themes and work your way down to more specific ones like which font you want used for a particular section on your site. Just like with HTML, there’s a website you can go to that will tell you the different CSS rules and how to use them. Steer recommended Learnlayout.com.
5. And...voila! Finish up and admire your handiwork
Then TA-DA! You’re done. In your browser click file, open file, then select to open index.html which means you can see your hard work live and kicking! You can refresh throughout the process, which will help see if there are any major issues that need changing. Once you’re happy with it you can get it online by signing up (and paying, soz, I guess some money had to be exchanged somewhere) to a hosting service like Heartinternet.com or Gandi.net. Some come with their own tools to easily upload the site folder and put it online, otherwise you’d need to buy file storage elsewhere. Steer.me/blog/getting-online has more on all that kinda thing.
Like this? You may be interested in:
Follow Alya on Twitter @moorizZLA
This article originally appeared on The Debrief.