First of all, a few parameters. I have used the term web developer/web designer to cover anyone who is starting out in the web arena. You may have aspirations to progress into a programming role, a design role or indeed a mixture of both or even some of the more specific roles like information architect, user centric designer, experience designer. Regardless of which path you take you will all need a firm grounding in HTML and CSS, and regardless of which path you take these skills will be invaluable on your journey.
Attention to detail
By far the most important of these , particularly in relation to writing HTML and CSS for the novice developer/designer, is attention to detail. This is particularly important for the brave of heart amongst you who will embark on this journey armed only with a text editor, and I would highly recommend this approach. It is all very well to be able to drive your fancy new WYSIWYG, but what are you going to do when it breaks down and you have to go tinkering under the hood. Take it from me, learn how to hand code. It will be worth the endless hours of heartache and pain.
- Check every line of code
- Make sure opening and closing brackets are there on all HTML tags
- Make sure all opening and closing HTML tags are there (remember some tags are self closing )
- Make sure all your equal symbols are there
- Make sure all your quotation marks are there
- Make sure you have spaces where there should be spaces and none where there should be none
- Spell check and proof read your all your content
- Check all your links
Now might be a good time to go online and find yourself a checklist for reference. I could provide links but, as you will see from the remaining points, it is up to you to 'learn how to learn'. So start now.
Ability to teach yourself
Again I cannot emphasis the importance of this enough. In order to progress in this field, in fact this holds true for most fields of work, you must be prepared to learn new skills and enhance and improve your current ones. You must be able to motivate yourself and spend as much time as you can, getting to grips with and keeping up with the ever changing industry standards, benchmarks and techniques. Don't expect to progress if you cannot. There are more than enough sources of information, insight and tutorials online for this purpose. Learn how to use google, read blogs, subscribe to RSS feeds, listen to podcasts and watch tutorial videos. Welcome to the Worldwide University of the Internet. This is self learning or no learning time.
Ability to develop good problem solving and bug solving techniques
You will, and you can be sure of this, very early on in the process of learning HTML and CSS come up against problems. It is vital both for your sanity and your ability to meet a deadline, that you develop skills to be able to deal with these problems. Arm yourself with as many tools as you can, Chris Pederick's Web developer toolbar is a good place to start, and learn how to use them. You will find them invaluable. Remember the importance of validating your code, I refer back to 'attention to detail', which cannot be emphasised enough. (I have lost hours of my life, as a result of missing "=" signs or quotation marks in my markup.)
Establish a systematic debugging process you can follow, with any HTML or CSS problem in order to get to the bottom of it. The first step in fixing a problem is finding the cause. I personally use some or all of the following when working with layouts problems.
- Validate your HTML and CSS to make sure you have not done something silly like remove a starting tag and forgotten to remove the ending tag
- Apply a background colour in your CSS code, to all block elements on the page, making sure all colours are different. This gives you a great insight into how all the elements on the page sit in relation to one another (particularly useful if your elemnts are floated)
- Some people swear by adding 1 pixel borders for the same reason, to display the layout of each element, although I always found the extra 1 pixel border could throw pixel based layouts into disarray. (You mean you haven't studied the Box model yet, why not? I suppose with support for ie 5 and ie6 almost a thing of the past you may never need to know about it, but it would be interesting background all the same)
- You can achieve a similar effect using the web developer toolbar, in particular the outline drop down menu
The important thing is to develop these techniques early on and be able to pull them from your armoury if and when they are required.
If you can master these 3 skills you are well on your way to becoming a better web developer/web designer. Why not tell me what you consider to be the most important skills for a trainee web designer or developer in the comments below.