Dear Developers, you still have to know basic body language to code

It’s been two weeks since I announced to the world I'd be learning to code from scratch and documenting it all here on the internet...for everyone to see. And if that isn’t a motivator, I don’t know what is.

The past couple of weeks have flown by, as they always do. You’ll be proud to know I stuck to my four hours a week goal, and even found that after two hours I had enough for a post for you guys. One challenge I found with writing this article for you was how to format it to keep the mass of you engaged, whether you’re learning with me or just interested in my journey.

I figured I’d start with stating my end goal, it’s all good and well my saying I’m going to learn but if there is no ongoing work-in-progress, I could just be copy pasting this for all you know. Having something tangible that I can build week by week and share with you to show my progress and continue to (hopefully) inspire, is ideal really.

"So, I have decided my end goal is going to be, queue drum roll please, my very own website! I bet you weren’t expecting that one after learning I am teaching myself HTML and CSS."

These days I guess it’s kind of horrific not to have your own personal website, right?

It's clear that professionals have a need for it, for example there are lots of Designers who don’t know how to code but need an online portfolio to show their work. This offensive thought has led me to the plan of building a personal website, consisting of the standard website material you see these days of young professionals. I’ll also play about with the idea of a blog called ‘The Food Store’, and will be my starting point.

Here’s an overview of what is in today’s entry:

• The 'stupid' questions
• Boilerplate code
• Body language
• Takeaways

Pledging total honesty, as always.

The ‘stupid’ questions

"First of all, a quick recap. HTML aka Hyper Text Markup Language, is the computer language that defines the structure and presentation of raw text, providing a logical way to structure content for web pages."

I call this section the ‘stupid’ questions because it holds the answers to things I was a little afraid to ask. But here, safe behind my screen there is no-one to judge me. I now understand what HTML means, but where exactly am I supposed to write it? How do I get to view it locally? And once I’m done, how do I get it to become an actual website?

Technically, you can write HTML in any kind of word processor but there are two programs that’ll make you feel a little more suave and like you’re doing this for real. Sublime Text is a developer go to when it comes to writing code, with ATOM being a close second. Both text editors are free but Sublime Text pesters you with ads every thirty minutes if you don’t have a license.

Sublime Text looks like this and is described as the text editor you’ll fall in love with:

And ATOM, like this:

Once you’ve chosen your desired text editor and are set to start building your website. To start viewing how your code will show in the browser, first save your work as index.html to somewhere like your documents. When you open it, it’ll launch in your browser and you’ll see how your code has translated into the browser. Then once you’re all set and ready to go, you can deploy it using a web hosting service, like Media Temple, Pixeno, and GoDaddy.

"Pixeno has been recommended to me as one of the easier services to understand, so beginners, go forth."

There, that’s all out of the way and I feel no shame. I know which text editor I’m going to use to write my HTML, I know how to view it locally and I know that when I’m done, I’ll need to take it to a web hosting site and show some cash.

Now for what I’ve learnt the past couple of weeks!

Basic vocabulary

"Before getting into the thick of any task, it’s essential that we lay down the common terms that are used."

On this journey I expect to come across a bunch of new jargon which is totally alien to me. Best to start making notes and getting familiar with them sooner rather than later.

• Angle brackets: These are the < and > signs - you’ll be seeing a lot of these babies
• HTML element: This is the code that resides within the aforementioned angle brackets. Can also just be referred to as ‘element’.
• Opening tag: The first tag that introduces a HTML element (eg.<p>)
• Closing tag: The second tag that closes a html element, these tags usually have a ‘/’ in them. With the exception of a few, most elements consist of an opening and closing tag. (eg.</p>)

Boilerplate Code

"‘Boilerplate code’ is the basic HTML which is needed to build a webpage."

In order for the web browser to understand your HTML document there are a few things you have to set straight first. You need to declare what kind of language you’ll be writing by introducing it within the first line of your HTML documents, as it is essential for the computer to be able to read the code efficiently.

This is done by introducing your document with the following element:

<!DOCTYPE html>

I like to think of this first step like a handshake, a polite introduction to the computer. If you don’t state your intent, the computer may assume that you are using the most current version of HTML language, which is HTML 5. New adaptations of the language are coming out all the time, so it’s best to declare it straight away to be sure there are no misinterpretations. So, always start with <!DOCTYPE html>.

However, <!DOCTYPE html> doesn’t add HTML structure. For this, in the next line, you’ll need to add <html>and close with </html>. Anything and everything between these tags will be considered HTML.

So far, my document looks like this.

Now that we’ve stated our intent by declaring the document, what comes next is to start personalising it. Next Codecademy introduces the <head> tags. Within the opening and closing tags the code/text you will not be displayed directly on the webpage.

For example, the <title> tags can sit within the <head> tags and the text that sits between the <title> tags will appear in your browser tab.

For example if my code looks like this:

Will show up like this in my browser:

As for what we want to appear on the actual webpage, we need to add <body> tags. Similar to <head> tags, everything we enter between these tags will be read as html but will appear in the browser webpage. That’s it, that’s the basic HTML that you need to start building your website, also referred to as 'boilerplate code'.

Body language

By ‘body language’, I mean the text we’re entering between the body tags but it’s nice to make the connection between code and the more familiar human interaction. This section covers the basic body language.

One of the first things to know about html, is that there are six types of heading and no more. The tags for these change with each heading size and are followed by the relevant closing tag. Written from largest to smallest: <h1>, <h2>, <h3>, <h4>, <h5> and <h6> followed by their relevant closing tags.

Here’s an example of how this would look in full form in Sublime:

You’ll see that I’ve now added the body element to write these headings within.

It’ll show like this in the browser:

I’m going to stick with <h1>as this is going to be the title of my page, I'm a girl that likes to have plenty of options for subtitle sizes.

After that, we’re going to want to throw in some more text to tell people a little more about the website they’re on. To begin a paragraph, you open with the <p> tag and close with the </p> tag. In between these tags, type away at your heart’s content.

Here’s mine:

And in the browser:

Remember the self closing tags I mentioned in the basic vocabulary section? There’s one that’s handy for manipulating space within the browser. The ‘break’ tag is self closing and is written as <br/> or simply, <br>. This is written as a standalone tag and can sit within the <p> tags or outside of them. These are used because you'll find that adding white space to your html document won't add any spaces to your text in the browser.

When we’re reading copy, paragraphs are all good and well but nothing draws in a reader more than breaking text down into the short, manageable chunks that are bullet points. There are two types of list that can help structure your text. Unordered lists, (bullet points) and ordered lists (numbered lists).

For an unordered list, you’ll need to start it with the opening with <ul>and close the list with </ul>. Similarly for an ordered list, the same process but with the tags <ol> and </ol>.

Now, for the stand alone points, each point should be opened with the text <li> and closed with </li> as follows.

And the same format for the ordered list. Here’s an example:

Anchors and attributes

"Attributes provide more information about the element’s content."

Think of anchors as the literal object, it holds down the purpose of an element, and the attribute provides more information about that element’s content.

A good place to start is with adding hyperlinks to text. To add a link to a piece of text in HTML, you open with the <a> tag, which acts as the anchor, then add the text you would like to hyperlink and close with </a>. But as well as stating which text or object we would like to link, we need to add a URL. This is where the attribute comes in.

These live directly inside the opening tag and are made up of two parts: the name and the value. In a link element, the name of the attribute is ‘href’ and the value will be the url. To connect the name of the attribute and the value you insert an ‘=’ sign directly after the name and write the URL or other value in speech marks.

Let’s say I wanted to link this word to Marvel’s homepage in HTML it would read like this.

<a href="https://marvelapp.com">word</a>

Simple right?

This can be taken even further, something I was really excited about. If you want to direct the hyperlink to open in a new tab when clicked, you can do this by adding the ‘target’ attribute, with the value of <_blank>.

Reading like this:

<a href="https://marvelapp.com" target="_blank">word</a>

This is crazy useful in terms of visitor engagement, when you click on a link you don’t want to be driving people away from the site and taking control away from users. You just want to show them the link in another tab so they can come back to you with ease, reducing drop offs.

Images

Remember earlier in the article I mentioned there are some elements which do not have closing tags? Image tags are one of these pesky individuals, it’s self closing. The <img/> tag also works as an anchor, similar to the links above and is always followed by the src (source) attribute, where you paste the image URL.

So if I was to link to this lovely image of a delicious Honest Burgers that I found on Google, it’d read like this.

You can easily make the picture a link as well by enclosing the image element inside the link element.

So it reads like this:

Takeaways

That’s it for my first roundup, where I think we’ve covered some good basics. The first couple of weeks have gone really well and Codecademy has been a super simple introduction. Their format of interactive learning gives you this additional leg up, you’re having it explained to you, reading the code in the text editor and seeing the changes you make appear in the browser.

Throughout the courses they have some handy tips on creating a more user friendly website like avoiding text heavy sites and optimising your site for people with disabilities (including captions alongside images by adding the attribute alt within the img element). There are handy tests that pop up and you can quiz yourself when you revisit the site as well.

I think they’ve hit the nail on the head here when it comes to teaching yourself code. For me, taking down notes when I’m running through a course and revisiting them often has really helped in making what I’ve learned really stick. People usually identify with one of the three forms of learning styles: visual, auditory and kinaesthetic or ‘writing’, ‘listening’ and ‘doing’.

"People usually identify with one of the three forms of learning styles: visual, auditory and kinaesthetic."

Using a learning tool like Codecademy, taking detailed notes and using a text editor like Sublime or ATOM to start slowly building your own website targets all three learning styles. So, hopefully this method is foolproof and I’ll be a pro soon enough. I’ve also found it fun and useful to associate different stages of coding with things I am familiar with, like the tag being similar to a handshake, and stating your intent.

"Another thing I have to my advantage is the fact I’m sitting with talented coders in the office everyday. If I have a question there is a person that I can turn to and ask but I realise that’s not the case for everyone. I’d be interested to hear from anyone who’s taught themselves to code and how you challenged this - are there online communities out there that support questions you guys have?"

I hope you’ve enjoyed this post, follow me on Twitter to get updates on future posts and follow my journey.