Webdevelopment for Beginners – XHTML and CSS

Recently I decided to start learning more about webdevelopment, since fronend coders are hard to find at the moment. I started looking for some good tutorials that should help me to get an overview over this topic. Start off with XHTML/CSS, followed by JavaScript and finally RubyOnRails - sounded like a good plan. Well, it turned out to be much harder to find some good tutorials that would help a novice with his first steps, especially since I wanted to learn to write W3C compatible code right from the start. Anyway…here are some of the resources I used for my first steps (and I’m still a novice in this area).

A good thing to start is creating your own little project. Try to code something you really want to use like a personal website or a blog template. This should help with your motivation since the first steps can be pretty tough (try to get your design to work in IE6 and you know what I mean). I designed a little website in photoshop and transformed it to HTML/CSS just to find out how it works.

So here we go…some links you should find useful:

Before you start - some basic rules

10 Principles of the CSS Masters
Some nice advice from guys how know how to code…always listen to those with experience, even if you can’t use the information at the moment. You will remember it when the time comes.

Beautyful CSS - Organizing your stylesheets
Every good library has a system to order books - same should be true for your CSS file. Order your stylesheet and categorize your classes and it will be easier to manage in the long run, especially if you work on large projects.

Cross Browser Strategies
Getting your design to look the same in all browsers can be frustrating to say the least. Read this to get an idea what you can do to make your life easier.

SEO - First Steps
As a webdeveloper, you should know at least the basics of SEO - Search Engine Optimization. Start reading this article and go on learning more about it as you develop your skills. There is only so much you can do with your coding to improve SEO of your website, but you just have to do it once and it might have a great impact on your ranking.

Firefox Addons for Webdevelopers
There are some tools out there that can make your life so much easier. Read this article to find out how those tools can help you.

Tutorials for beginners
Here we go, some tutorials to start with your own homepage. You just need a design (make your own in photoshop or download a design from deviantart.com but remember that you can use those only for training purposes).

From PSD to HTML

Building a sleek Portfolio website from scratch

Create a wordpress theme from scratch

20 CSS tutorials to help you master CSS

Adittional reading material
Some more articles you might find useful.

Solving 5 common CSS headaches

Position is everything - browser bugs
An overview over most known browser bugs and how to work around them.

Blueprint Framework
The Blueprint framework is a CSS framework that can help you speed up your development process, since it offers pre-build css classes you can use for your projects.

Debugging CSS for Beginners
It took you an hour to find the missing ; in your CSS which screwed up your design? Read this for some basics in CSS debugging.

Webdevelopers Handbook 2.0
A great collection of links! Here you will find everything you will ever need and more about webdevelopment.

101 CSS Techniques
Another great collection of CSS tutorials.

Debugging CSS - The Plan of Attack
Yet another tutorial for CSS debugging

Those are just a few tutorials I found, but I think it is good to start with just a few basics to keep focused. If you try to read every article out there, you will never write a single line of code. So find an interesting project and start coding! There will be plenty of time to read other articles but it won’t help you to read about advanced CSS techniques when you haven’t started with the basics yet.

Do you know other good tutorials for beginners? Feel free to leave a comment!

Share and Enjoy: