HTML and CSS for beginners

It has come to my attention that many of my lovely musician friends out there need some help unraveling the mystery that is HTML and CSS coding. Of course, I am always happy to answer questions and help with code, but I thought I'd share some great resources with you guys.


How I became a coding goddess
When I was in college, my friend Adam gave me jessirobertson.com and he designed a lovely site for me. As time went on, and I wanted to update the content, I found myself extremely frustrated because I had no idea what to do.

Eventually I started puttering around various html cheat sheets and learning to use snippets of code. Later on, I would upload CSS from some MySpace generator to make my page look pretty. So I started playing around with CSS as well, so I could do it myself instead of relying on those limiting generators. I really hate being at the mercy of anyone, and even more so, being at the mercy of anyTHING!

Ok, so enough with the back story. I'm just trying to say that if I figured it out anyone can!



What the heck is HTML?
Because I love "The Office", this is coming to ya straight outta Wikipedia:

HTML stands for HyperText Markup Language.

1. Hypertext is ordinary text that has been dressed up with extra features, such as formatting, images, multimedia, and links to other resources.
2. Markup is the process of taking ordinary text and adding extra symbols. Each of the symbols used for markup in HTML is a command that tells a browser how to display the text.

Tutorial
http://www.w3schools.com/html/html_intro.asp
This is the starting place of it all. I know it's boring to read, but if you understand the way HTML is structured it will make life oh so much easier.


Live Examples
http://www.w3schools.com/html/html_examples.asp
Oh baby, this is awesome. These examples show you the code and the result. But the really cool part is how you can edit the code and press a button to see a live preview of your own code. This will show you if what you do is working or not. I love it and still use it all the time when I'm a little iffy on how to do something.


CSS
CSS stands for Cascading Style Sheets.

Again, Wikipedia is the man:

Prior to CSS, nearly all of the presentational attributes of HTML documents were contained within the HTML markup; all font colors, background styles, element alignments, borders and sizes had to be explicitly described, often repeatedly, within the HTML. CSS allows authors to move much of that information to a separate stylesheet resulting in considerably simpler HTML markup.

Ok, in other words, CSS makes things look really cool and you can just update changes in appearance in one place instead of having to add lots of HTML to every sentence of your MySpace page when you want to make some text red and some text gray.


Tutorial
http://www.w3schools.com/css/css_intro.asp
For those of you ready to move on to CSS, check out this great intro and tutorial.


Live Examples
http://www.w3schools.com/css/css_examples.asp
And yes, they also have awesome live CSS examples as well.


To wrap it up, I have lots of great resources bookmarked. If you have something in particular you want help with, like scrolling text or some other nonsense, comment back on this blog and I will try to help you out. I will be sharing more coding stuff over the next few weeks. Maybe even a special, update your MySpace tutorial. Cuz I love you guys. Mwah!