But just because something is easier doesn’t mean it’s easy. If you’re not willing to sit in a borders for 5 hours each day of the week (plus a few more hours at home) looking through forums, magazines, online articles, and books, as well as consuming a cup or two of peppermint hot chocolate, (unless of course you enjoy a cup of coffee… yuck!) it can be tough to jump into web development. And even if you ARE willing to do all that, it would still be useful to have a head start on a few things.
The web is in a constant state of flux, especially in a time when web standards are taking a shift forward and web browsers are attempting to move with them. I am of course referring to HTML5 and CSS3. While they are only in a draft state, what they have to offer is worth learning it now rather than learning the old stuff and coping without it for a short while. That said, with all the content, techniques to learn and the compatibility issues that you have to face in your battle toward learning web development, it would be nice to have a heads up about the kind of battle it is and an arsenal of tips and tricks to help you fight it. Following this is a short (relatively) summary of the many things I had to go onto the web and find to create a basic HTML5 site using CSS3.
Tip 1) HTML5 Compatibility
HTML5 is new and one of the first things you will learn about it is the new structure it gives to your pages. Before your page looked something like this:
Now take a look at HTML 5. Scan through this article and you’ll find in the second and third section what it will look like:
Notice the new tags, <header> <nav> <section> <article> <aside> <footer>. These will make your code more readable and help give a little more structure overall. So that’s not hard to figure out! But what nobody tells you is that IE will usually freak out when you use these new tags. Because it doesn’t recognize them, any kind of styling you use in your CSS for those new tag blocks will not work. Bye-bye nifty navigation bar you created and hello to 5 lines with ugly bullets and blue lettered links! GAH!
Recommended to put in <head>:
Tip 2) Use CSS3, not images
CSS has some new fancy tricks under it’s CSS3 hat such as instant background gradients and shadows for your text and blocks. Today, web sites use tons of images for buttons and backgrounds. A lot of these are simple gradients to make the site look a little fancier. To get a simple site with a few cool lookin’ gradients takes far too many cups of coffee while you sit in Photoshop getting details down to the pixel, saving them, and then later realizing you need to adjust them! By the time your done, you bang your head on your keyboard a few times realizing you could have spent all that time in photoshop making something cooler to make it worth your effort (I just might know someone who did that… but we won’t name names).
THE TIP(2.1): Use CSS3 effects where possible rather than images! Speed is the new thing in the cloud. Google even announced that their search results will start taking site speeds into account! You need a fast attractive site and fewer images the faster. Give your site a good look without all clutter that will slow it down. NOTE: CSS3 isn’t available on all browsers, so if you DO use CSS3 effects, make sure their is a simplified alternative for those still struggling to figure out what a browser is, let alone updating it to the latest version (I love you grandma).
THE TIP(2.2): To make a background gradient (or fancy shadows, rounded corners, and similar new CSS features) in Firefox, Chrome, or IE takes different lines to create the style. So here’s what you need to cover most browsers (I say most because there will always be that weird or outdated browser people use that it still won’t work with).
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#555555′, endColorstr=’#222222′); /* for IE */
background: -moz-linear-gradient(top, #555, #222); /* for FireFox */
background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#222)); /* for Chrome, Safari, and others */
TIP 4) Fonts?
So I got this really awesome font that makes my site look sick! But wait, nobody else has the font and so it goes to something generic like Arial… dang. While this is can be solved with more complicated techniques, CSS3 brings @font-face which is very useful! It can link to fonts hosted on the web to give you great fonts that aren’t normally found on viewers computers, or at least by their browsers. But wait! FONTS ARE FREAKIN’ EXPENSIVE!!! I haven’t played around with it much yet but from what I can tell- getting a license for some of those good fonts out there is really expensive.
THE TIP: There are sites that will give you free fonts! In fact, Google is creating a directory of free fonts it hosts at http://code.google.com/webfonts. Follow instructions on there and you’ll have some fonts to work with using @font-face! You may even be able to find someplace that hosts cheaper fonts, but so far they seem hard to find.