Most designers be it, fashion, architecture, graphic or web designers are born with a natural eye for design. It’s something that is with you from the day you were born, an instinct to make the world a prettier place, but how many fashion designers take to the catwalk and how many architects put on a hard hat and start building a wall? Not many, yet in the competitive world of the web, designers these days are expected to know all things, html, css, javascript, php, asp the list goes on…
As daunting as it may sound for even the most seasoned of web designers, web development is just another beast to tame and it can honestly be quite fun at the same time!
I decided to take this step several years ago. I was faced with a predicament. I could put together all these lovely looking designs but who was I going to get to turn it into a fully fledged website for the whole world to see? I certainly couldn’t afford to pay anyone. I was faced with a challenge, how was I going to learn about heads, body’s, positions, heights, widths, tables, no tables… yes I’m talking about front end web development!
This article will give you my recommended first steps to becoming an designer/developer all rounder. Something that is very attractive to prospective employers or if you freelance, hey, you get to keep the full hourly rate! You can say goodbye to outsourcing!
Slicing PSD’s.
This is your starting motor to building a website. You’ve got your design but at the moment its a raw format you need to cut up your design into several different images. This process is made very easy with the Photoshop slicing tool. There are many resources out there to help you but I recommend you follow this tutorial: From Photoshop to HTML
HTML
HTML is the foundation of every website. Although this markup may look daunting to the untrained eye. Its a simple and user friendly language (if you can call it that). Not only is it easy to get to grips with but there are more resources than you can shake a stick at on the internet to help you along the way.
When I was first learning HTML I found experimenting, as with many things is the best way to learn. HTML can be quite flexible in many browsers meaning that it wont keel over and die if you don’t close a tag here or there.
Here is a selection of recommended resources to get you going:
Also here are some interesting articles on the up-and-coming HTML 5. For those of you who don’t know, HTML 5 is going to be the latest release of standard markup by WHATWG:
Semantic Markup
You may hear many people ask you, dude, is your markup table-less? Well if you’re going to try and master HTML in this day and age then its probably worth readying up on this!
This is really part and parcel of today’s web, but if you don’t already know then why not take a moment to read up about it: SPAN and DIV Wiki
CSS
Way back in the dot com boom all websites where sliced with html using tables. This made websites very large in size and even more difficult to view and update the source code and single styles such as links were very difficult to update. CSS bought all the different styles into one place which allowed one style to be shared by many pages. Beware though, each different browser can render CSS in a slightly different ways resulting in many hours swearing at a screen and pulling your hair out. Earlier versions of Internet Explorer are the biggest offenders with a campaign to get the last 14% of the browsers market share making the rounds on social networks recently: IE 6 no more
Here are some recommended resources on CSS:
Once you’ve got these core skills under you’re belt, you will be on your way to becoming an all rounder! If your still hungry or maybe already know all these languages, I recommend you try learning something like jQuery and/or PHP.
Here are some great resources:
jQuery:
PHP:
