I came across Code Academy some time ago, and tried a few lessons but didn't stick with it. I've come back and they've made quite a few additions to the languages that they offer, including HTML, which is where I'm going to get started. The lessons are quite straightforward, introducing simple concepts with practice, but I know I won't remember it properly unless I actively capture and make sense of things as I go.
Web Fundamentals - Introduction to HTML
Lesson 1 - Why learn HTML?
HTML, like all coding languages, has its own syntax, or language rules - hopefully I'll pick up on these as I go! The first one seems to be a simple instruction that the code is actually HTML <!DOCTYPE HTML> After that you can add text as you like, and use <strong> either side to make things bold.
Lesson 2 - HTML and CSS
What does HTML mean? HyperText Markup Language.
HyperText - literally 'text with links in it', so you can embed links to other web pages in the text.
Markup Language - can turn text into images, tables, etc
CSS = Cascading Style Sheets. This is the 'skin' to HTML's 'bones', and allows you to make web pages look visually appealing. More of this later apparently.
Whenever you're writing in HTML, you need to add <html> before the first line of code, and </html> after the last line of code. Simple!
Lesson 3 - Basic terminology
The last point in Lesson 2 was introducing the concept of tags, a little like parentheses in normal language. These need to be used in pairs, to open up and close something, and if you're using multiple tags (this is is referred to as nesting) then the most recently opened one has to be closed first. This is like something I've come across a little bit in a forum editor already for making text bold, italic, adding hyperlinks and images, so I've already found some familiar ground with my existing experience.
Lesson 4 - Make the head
So I'm now creating a head using the <head> tag, and then specifying a title using the <title> tag - this creates a heading that appears at the top of the browser window rather than on the page itself. One thing that I've noticed about editing is that you have to be careful where you click on the page before you edit, as you're often automatically highlighting words or sections and can easily over-write portions by accident!
Lesson 5 - Paragraphs in the body
Now that I've learned to create a header for the web page, it's time to put some body text in. By adding in the <body> tag you can specify text that is to appear in the body of the webpage, and add the <p> tag to separate out into paragraphs.
I notice something familiar about the way the base code has been added in - they have put deliberate indents in to separate out elements. This was something that a colleague pointed out to me when he was writing some SQL code to link up two databases. Although the code would work without this, it makes it a lot easier to come back and check your coding for errors later.
I think I'll stop there for now, little and often is probably better. Part way through the lessons I stopped to follow the Code Academy team on Twitter, and found that Linda Liukas' advice on learning was especially helpful - just getting stuck in and asking questions later is the key. I know I could drive myself crazy if I ask too many questions right now...
