When you work on a new web design project and have entered the stage for coding, how do you go about it?
Do you start with the HTML and write the whole HTML page first, then code your CSS then troubleshoot?
Do you write all of your CSS first, then the HTML markup, then troubleshoot?
Or, do you write chunks of HTML first, add in the styles, troubleshoot/test, repeat?
Personally, I have done it just about all three ways – but my most often used method is the 3rd. I start from the top and work down to the bottom from left to right. I will start and code the entire header of a site in HTML first – then write my styles. Check in firefox, and repeat. Then, after the whole page is completed I check in all browsers to trouble shoot compatability issues – which are usually minimal and related to IE6 only – go figure!
So recently I was working on a project that required image based navigation AND drop down menus. From the get-go I decided to use CSS Sprites for the tabbed menu for the normal, active and hover styles. I also decided the best way to implement the drop down was to use the “Son of Suckerfish” drop down menus heavily modified from the original code to fit in with the original programming I had done for the menu.
Rounded corners are a great design element to escape from the blocky/boxiness a lot of web designers fall victim to. I remember the first time I created my own rounded corner box using Photoshop and HTML/CSS. What a thrill :) A lot of people shy away from it because it SEEMS a lot more difficult than it really is.
I’m going to show two ways to create this effect using Photoshop (or the graphic editor of your choice) and HTML/CSS. There are other ways to create this effect using just CSS – but I really am not a big fan of it because it creates a lot more empty divs than this method. Yes if images are off you will lose this effect – but I’m willing to sacrifice that.
Like I said I’m going to demonstrate two ways to accomplish this. The first is using just a flat rounded corner image with no other effects. The second will have a box with a drop shadow, border and gradient. :) So let’s start easy!
I’ve noticed a lot of sites have a very complicated way of styling the code samples they provide, using multiple span classes and/or inline styles and many, many <br />s. Other times the site just wraps the code in a <code> attribute and doesn’t highlight the different syntaxes.
I’ve written some simple CSS styles to fix this problem. So if you are interested in having your code display as if it was in a text editor with syntax highlighting here is an easy way to do it.
The first example is a sample of CSS code and how it can look when you apply these styles (***This is not the actual styles, just an EXAMPLE):
What’s the difference you ask? A lazy coder MUST be a bad coder! If you’re lazy then you’re not coding to best practices therefore you MUST be a bad coder.
While the above in part is true, there is an integral difference between someone who is a flat out BAD coder and one who is just a bit on the lazy side. If you’re looking to hire a coder there is a few key ways to tell the difference.