HOME

Hopefully you've finished a couple of HTML tutorials on Codeacademy by now and you're on your way to becoming an HTML expert. Maybe you've already built a social media profile (HTML Basics II) or a clickable photo page (HTML Basics III). Now it's time to get into CSS. What is CSS? CSS stands for "Cascading Style Sheets," although knowing that probably won't help you much. The best way to understand CSS is to head over to CSS Zen Garden. As you can see, there are thousands of different themes for this website. Try clicking on a few. The only things that change are the layout, color, and style. All of the text and the basic format stay the same because the HTML hasn't changed. CSS is what determines most of how the page looks. If HTML is the skeleton, CSS is the skin.

CSS Zen Garden has a link to a great collection of CSS resources right here: http://www.mezzoblue.com/zengarden/resources

Although they only accept the best designs, getting your theme accepted to Zen Garden is something to work towards. First off though, we want to style our own website.

There are already several CSS courses on Codacademy. It's probably a good idea to start off with the three CSS courses in the Web Fundamentals Section.

After that, you can move on to this course: http://www.codecademy.com/courses/create-a-personal-webpage/0#!/exercises/0

Wow, that was easy! You can already build a nice looking web page!

My mom asked me a very good question - "How long will it take to learn to code in Codeacademy?" Codeacademy started fall of 2011 with just a handful of lessons, and new lessons are being added weekly. Coding, like sailing, seems to be one of those things that you could spend your entire life learning. In fact, January of last year, codeacademy started a plan called "Code Year" where you could reasonably get through every single lesson in a year by making weekly progress (and still keep your friends and your full-time job). Fingers crossed that they'll do it again this January!

But how long will it take before you can build your first website using what you learn on Codeacademy? Even if you have zero experience you can build a site within one week.

By doing just 5 exercises a day you can get through "HTML Fundamentals" and "Build your First Web Page" in six days. In order to make the most out of Codeacademy, I recommend that you have a goal. For instance, wanting to build your own portfolio site could be a goal. Having a concrete goal will make Codeacademy more than a game - it will help you to connect what you're learning to the actual practice of building websites in the real world.

Draw a layout of the website that you want to build on paper or mock it up in Photoshop or Gimp if you want to be fancy. For the first version, just focus on creating the text that you want to display when you open the page with a browser (we'll get into "hosting" sites in a later lesson.) For instance, your first website's code could look something like this:

<html>

<h1> Monica Houston's Portfolio </h1>

<h2>Everything is better on a boat</h2>

<p>Hi, I'm Monica Houston and I live on a boat...yada yada yada</p>

<h3> follow or friend me here</h3>

<ul>

<li>http://twitter.com/houstonconsult</li>

<li>http://www.behance.net/Mhouston</li>

<li>http://www.linkedin.com/in/houstonmonica</li>

<li>http://www.codecademy.com/users/zebular13</li>

<li>https://github.com/zebular13</li>

</ul>

</html>

Write your code into a text editing program like text-edit or notepad and save it as something like "index.html." Right click and open it with your browser. BAM! You've made your first real web page!

So how do you make it pretty? Codeacademy has an entire series of courses on CSS - the language that is used to style HTML. I'll go over resources for learning CSS in my next post, but for now I'll leave you with this useful video:

Learn HTML in 30 Minute

Beginning CSS (for free!)

Build a Website in One Week with Codacademy