Learn CSS Online

Web design might not be the most accessible area to everyone, but CSS and HTML can be very useful, and these are two parts of coding which are really easy. I mean to change the color of your font you just need to type: “color:red”, does it get easier than that?

Well actually, it gets harder but it’s worth taking a look, since you can customize everything from your blog to your Google Docs documents with a tiny bit of CSS knowledge.  Let’s take a look at where you learn css online free and get CSS tutorials for beginners.

W3Schools

W3Schools is a great site. They have lots of tutorials from HTML to PHP and you can be sure that everything you read is up to standards since the site is maintained by the W3C, responsible for the web standards of today.

The CSS lessons are pretty detailed and will take you through most of what you need to know, but since this is more of a technical page you will see less examples than elsewhere and the examples they do have are a bit constrained.

If you already know some CSS though this is a great reference source.

Tizag

I come across this website a lot when looking up things and I had a look at their CSS tutorials, which I found slightly better structured than W3School’s. The basic information is the same, but if you are an absolute beginner you might want to start here.

Tizag in my eyes is a bit less formal. It seems to me that their examples are closer to real life and the tone is friendlier. There are also helpful tutorials on many other languages like HTML and MySQL, so if you liked the CSS bit you can stay on for the same quality in other languages.

CSS Zen Garden

This site is very different from the tutorial sites I mentioned before. On CSS Zen Garden you can put your knowledge to the test or learn from the code written by others. The whole idea is that there is one static and unchangeable HTML file and you have to create a separate look for it using only CSS.

You can upload your work and it will be showcased, and you can download others’ files to take a look at how they did this and that. This is really useful because I myself learned way more by example than by actually learning. The same goes for WordPress templates – if you like one, download it and take a peek in style.css to see how things are done.

CSS Play

CSS Play is a website in between Zen Garden and the tutorial sites because it shows off specific functionality in CSS and allows you to view the source code.

Instead of having a whole page or a whole site, you can take a look at examples of fly-out menus, opacity examples, IE specific workarounds and so on.

If you need a specific functionality and want to get in the know, this website might be the best place to start. It has a fair share of ads which can be a bit distracting, but the info there is solid, and a lot of times the code, or at least the method is very thoroughly explained.

Google

That’s right, plain old Google Search can be a great companion to learning CSS online and finding CSS tutorials for beginners. Aside from obviously being able to research things you need, you can also look at how specific CSS properties work. Don’t know what values “overflow” can have? Just type “css overflow” or “css overflow property” and the first result will tell you what you need to know.

The same goes for actually all programming languages, I use this for PHP and MySQL as well, and I don’t think the first result has ever failed me yet.

So there you are, no more excuses, it’s time to learn some CSS! You can add your own Google Docs templates, modify your WordPress templates, and do such a lot more, happy CSS-ing!

Tags: , , , , ,

Rapid Web Development

I have to admit, I’ve never liked or took serious any developers who tout their hardcore-ness by pounding their chest and screaming, “I use notepad and nothing else”.

Really?  That’s like taking a pen to a test or a knife to a gun-fight.

Let’s get REAL.  If you’re in the business of making any-kind-websites, any-kind-applications, etc. then you like me know that time is money.  This is business 101.  So if its taking you 60 hours to complete a 10 hour project, it’s impossible to be profitable (and productive!).

Enter the world of rapid web development.  Roll up your sleeves, crack your knuckles, adjust your sitting position BANG! go go go go!!!

No no, this isn’t about mashing out websites nilly-willy… this is about utilizing tools and frameworks that help increase productivity and explode your profit earning potential.

Check out some of these great open-source frameworks and maybe you’ll consider one of them for your next project:

Tags: , , , , , , , , ,

Live Box from Facebook & Internet Explorer 8

Posting to save others time (and hair) is always a great pleasure. The most important thing to remember, is you have the power to find answers to all your challenges. Being resourceful on the Internet can be the difference between landing that next big IT job or moving up the food-chain.

This post is strictly for those looking to resolve their IE8 and Live (fan) Box from Facebook. As it turns out, Facebook provides you with a nifty widget that allows you to stream most recent wall posts and top friends on your company (or personal) website.

Live Box Interface Settings

Facebook does a great job of giving you an easy to use configuration interface to set up your Live Box – and with a quick copy/paste, you’ll be up in no time.

There is one caveat however, and that is with the default code Facebook provides. It utilizes the asynchronous method to help speed up load times and not drag your page through the mud when loading.

Apparently, Internet Explorer 8 doesn’t care for “the new and improved” and totally renders the widget useless.

Solution

Go for the static non-asynchronous route.  Make sure you include Facebooks all.js file and make your script call straightforward.  The sample below masks the appId which should be replaced with your own.  Some of you just blew past that line of instruction, so I’ll repeat it again…

USE YOUR OWN APP ID, K? Thanks!

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js" ></script>
<script>
FB.init({appId: '123456789', status: true, cookie: true, xfbml: true});
</script>
<fb:like-box profile_id="123456789" width="292" connections="0" stream="true" header="true"></fb:like-box>

No go make some fans.

Tags: , , , ,