Having spent the last 8 months working with a trainee and taking it upon myself to give them a firm grounding in all aspects of web development, I decided to write this article which is primarily aimed at young school leavers or under graduates hoping to embark on a career in the web industry . Of course those of you reading who are yourselves involved in the industry and have a few years experience behind you may like to add your own ideas on what you feel are the 3 most important skills to acquire.
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
<img src="" />)
- 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 a good time to go and find yourself a checklist of all the things to check as you go. I could provide links but as you will see from the next points it is upto 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, probably just like most others, 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 overstated enough. ( I have lost hours as the result of missing “=” signs or quotation marks).
Establish a process you can go through, with any HTML , CSS problem 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 for example.
- 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 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.
- Some people swear by using borders for the same reason, to display the layout of each element, although I always found the extra pixels could throw pixel based layouts into disarray. (You mean you haven’t studies the Box model yet, why not!
- 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.