Posted by: Corey on: October 24, 2006
If you’ve ever wondered how you could get a link to be one color and the underline to be another color, you’ve come to the right place. While this isn’t supported in CSS (yet, maybe one day), we can do something that will appear to do the same thing.
Here’s the CSS:
a {
color: #F00;
border-bottom: 1px Solid #00F;
text-decoration: none;
}
It’s extremely simple. Since all elements have a margin and padding, and they are all defined by boxes, we can add a border to one side of the element: the bottom. You can change the element to support your action selectors (hover, visited, link, active) and setup more complex things…like having only the underline color change on hover.
To change the underline color on hover only…
a:link {
color: red;
text-decoration: none;
border-bottom: 1px solid blue;
}a:hover {
border-bottom-color: green;
}
You could also set the initial border to transparent instead of a color, then give it a color on hover and have the same underline-on-hover behavior as using text-decoration underlines, but with the additional flexibility of using the bottom border without the text shifting on hover.
Posted by: Corey on: October 22, 2006
If you’re a freelancer and you’ve ever had problems obtaining or retaining clients, or if you’re new to web design and you’re considering freelancing, this article is for you. I’m going to give you some great tips on how to get new clients and keep them coming back for more.
Obtaining new clients can be a challenge. Some freelancers do fine advertising their services on relevant websites and rely on potential clients contacting them. Others are more aggressive and like to go out and find clients instead of waiting for them to come to you. Either way, you still have to convince the client that you are the person they want working for them.
How can you do this? Be available. Its always easier to see someone who is doing it wrong and make sure you don’t do what they are doing, and that’s how I learned. Most Indian programmers have a language barrier, considerable time zone difference, and high-international rates discouraging you from calling them, so we should make sure we speak with impeccable grammar, punctuality, and spelling. We should ensure that we respond to emails within 3-6 hours at the most, and that we’re available via telephone at any hour of the day or night (weekend or weekday, the internet still runs). This alone will make people feel better about choosing you as their developer.
In addition to the tips above, you should make sure you are always open and honest with your clients. Don’t tell them you can complete a project that you aren’t sure of every single step. Explain to them exactly your understanding of their needs and have them verify to ensure everything goes smoothly. Give the client details on how everything will work, including the use of diagrams if relevant. Your potential clients will have no doubts about your ability to complete the job, and they will be confident that you are the developer they should go with.
Now that you have the job, you should continue to show your client the same level of communication that you have been. Give them an update daily (or every few days if it is a very large project) on where the project is. Don’t be afraid to call them up and speak with them personally to reassure them everything is going just as planned. Trust me here, they will appreciate it.
So you’re finished with your project and your client is satisfied? Great! You’re still not done! Give them a few weeks to use their new application/website/etc before giving them a follow up call to ensure everything is going well. Ask if there’s anything that they would like changed or any other projects they might like your assistance with. Chances are, they will request additional work on the same job or tell you about another project they are working on. If you don’t catch my drift, you can encourage repeat business this way!
Why is repeat business important though? Well, most of your work is already done for you. You already have the client in your pocket and you don’t need to convince them you are right for the job, and if you work on the same project, you should already know most of the code! Repeat business is much more profitable!
If you follow these tips, you can charge 3-5 times the rates of other developers or more! I’ve never had a problem gaining a client at a rate of $100/hr, and I’ve gained several at $300/hr! Good luck!!!
First you have to find someone that has a problem and is seeking a solution that you can provide. Then you have to get in contact with them and sell them on your ability to complete the solution, and convince them that your price is worth it. Even after you’ve obtained the job, it’s not all coding from there on. You’ll still need to keep your client updated on the status of the project, and after the project is finished, you should give them a call a few weeks later to make sure everything is running as intended.
Posted by: Corey on: October 22, 2006
I know a lot of people have trouble choosing colors for their website. Unless you’re an art student (or graduate) you probably don’t know all about color theory, complementary colors, and the like. Don’t fret though, I’ve got a fail-safe method for colors on the web!
First, too many colors can make your website chaotic. Pick a color that you want to use as the main color of your website. You’ll use this for the bulk of your website’s color. Now, pick a couple of different shades of that color to complement it. You will use these to accent your website and make certain elements stand out.
For your last 2 colors, use black and white. You can trade these for shades of dark and light gray and it works, depending on your color. Black and white have the most contrast though, so it really makes the content pop-out and helps show off the color.
Having trouble picking your complementary colors still? I can’t blame you. It takes some practice to start getting the right colors. In the meantime, I strongly recommend checking out the following link. It’s a color scheme generator that allows you to pick a base color and have all of the rest of your colors given to you!
Posted by: Corey on: October 21, 2006
HTML stands for Hyper-Text Markup Language. It’s really just a fancy term for a language that is meant to format text for use on the internet. If you’ve ever used “tags” to style your text on Myspace, Xanga, LJ, etc, you’ve used HTML. The same goes for displaying images or slideshows…while they aren’t made with HTML (usually), HTML is used to display them.
The page you are looking at right now uses a form of HTML, in addition to CSS and images. The text you are reading is written in the HTML. Go ahead and right click on this page and go to View Source. It may look foreign at first, but it’s really not that complex. If you search for “donkey” you will find this paragraph. It looks just like normal text with some funny characters added in.
Those funny characters that look like <br> and <p> are actually called tags or elements. They are notes for your browser so it knows what to do with them and how to display them. If it runs across a <b> tag, it will display any text before the closing tag , </b>, in bold. That’s the core of every webpage…just a series of notes telling the browser how something should be displayed.
Next I’ll give you the basics on creating your own HTML pages!
Posted by: Corey on: October 21, 2006
PHP is a great language for beginners and advanced programmers all alike (especially with v. 5). Like other scripting languages, it is compiled at run time, so there is no extra work on the developers part before running the code.
First off, where do you write PHP? Well, you can write PHP in any text editor. If you like to use a specific program to write HTML, you can use that same application to write PHP. You start a block of code with “<?php” and end it with “?>”. Pretty easy huh? Here’s a sample that will output “Hello World!”:
<?php
echo “Hello World!”;
?>
You can put this code in any HTML page and save it with a .php extension. Upload it to your web host (assuming they offer PHP) and access it just like you would any HTML file. You should see “Hello World!” in the place of the code.
All that’s happening here is a single statement. We are using the echo function to output data to the browser. Echo will output whatever you put after it, in this case, we used text. If you’re new to programming you should start getting used to calling text a string (because it’s a string of characters). That’s what we call text in programming, so getting that down to start is helpful.
PHP can be used for a variety of things. It can build images on the fly and output them, handle forms, insert and retrieve information from a database, talk to other applications, access other websites, send email, and much more!
Next we’ll go more into actually using the language!
Posted by: Corey on: October 21, 2006
One of the most common things people do with CSS is change the style of the links in a page. I’d highly recommend it since the default links usually won’t work with your color palette, considering they are bright blue, bright purple, and bright red.
To simply make all links the same color with the default styling, simply add the following line to your CSS file or style tag:
a { color: #FFAACC; }
You’ll want to replace the hex color code with one of your own, though. Lets go a bit farther and setup some different styles for the links and hover actions.
a:link, a:visited {
color: #FFAACC;
text-decoration: none;
}
a:hover, a:active {
color: #EE99BB;
text-decoration: underline;
}
Here we have links that will change color when hovered over. They will appear by default without an underline, but when hovered over, the underline will appear. This makes the links a bit more interactive, and usually it helps visitors distinguish links from non-links.
Posted by: Corey on: October 21, 2006
Yup, we’re back in college, only your professor is hardly politically correct and he’s learned by actually doing it. We’re going to hit some basic points of design that I see a lot of amateurs missing that you should definitely know about.
Rules are meant to guide, and there are always good reasons to break them. The same goes with laws, but we’re talking about design. You should learn to follow the rule, until you really know what you are doing and you can justify breaking the rule.
Your first rule: simplicity. I don’t mean fail to use CSS to style your page and just write one paragraph in plain text with no colors or layout. I do mean don’t clutter your website up with images that don’t complement each other, use 13 different colors, or fill every inch of the page with something. Doing this just makes your page chaos.
Rule two: uniformity. Your website should match the rest of your website, both in the design and the way things are done. If you put together all the pages of your website in a similar fashion, users will learn the website quicker and be able to navigate better. The same goes for each page. If you always use the same style font and color for a header, users will be able to pick that out easier.
Third rule of design: function. Apple actually says function is a part of design, and I agree. If you design a website that isn’t functional, it’s a poor design. You should always think of the end user when you develop and design to ensure that things work like they should and everything is easy to use.
Those are the core of design. Learn them and use them and you will have more success.
Posted by: Corey on: October 21, 2006
Search engines have come to a point where their creators are too busy with their heads in the clouds that they aren’t focusing on what made they successful. It seems that the big three (Google, MSN, and Yahoo) are obsessed with finding new avenues for revenue–perfectly understandable from a business perspective. The problem is that they are letting this affect their continued efforts on improving search technology.
Sure, Google has changed it’s algorithm plenty of times. Yahoo has done it’s fair share of updating search technology. Heck, Microsoft rebuilt MSN search from the ground up twice in the last year. Despite these changes, the overall system remains the virtually unchanged for the last 5 years.
Before Sergey and Larry had the brilliance to switch to lower-cost machines, introduce page-rank, and distribute the database across multiple machines, there wasn’t anything fantastic about search. Frankly, it sucked.
For a while, the new systems really kicked butt. People new the the web could find what they were looking for, so traffic on the web increased…a lot. In fact, traffic increased so much that businesses started taking considerable interest. Everybody wanted to be on the first page of results, and it led to the birth of what we casually refer to as search engine optimization (SEO).
Though people fail to realize it, SEO is the evil enemy of search. It’s aim is to improve the ranking of a website in a search by exploiting the methods the search engines use to rank results. It’s become so bad that you can search for practically anything and have at least 3-4 of the results on any page come out totally irrelevant.
It’s time for the engines to step up and start introducing some new technology instead of making calendars, buying photo and video websites, and making sure everybody and their mom has 3 email accounts. If we don’t, the convenience that the web once offered will diminish, and as hard as it is to believe, people will switch to the tried-and-true methods for many things. This will, for sure, decrease traffic on the web.
Posted by: Corey on: October 21, 2006
PHP doesn’t have a built in proper case string function, though it does have upper and lower case functions. This isn’t too big of a problem though, since we can build one that acts just like we want anyways!
If you just have a short phrase or word that needs to have the very first letter capitalized, we’ve got a nice and easy job. Here’s the code:
$string = strtolower($string);
$string = substr_replace($string, strtoupper(substr($string, 0, 1)), 0, 1);
That might look a bit messy if you don’t like putting things together all at once, so here’s the jist: On the first line we make the whole string lowercase since we don’t know if there were capital letters where they shouldn’t be. The most inner part of the second line (substr) pulls the first character from our string. Moving outwards, the next function makes it uppercase, then finally, we replace the first letter of our string with the new uppercase letter.
Now what if we wanted every word in the phrase capitalized? Simple.
$words = explode(” “, $string);
for ($i=0; $i<count($words); $i++) {
$s = strtolower($words[$i]);
$s = substr_replace($s, strtoupper(substr($s, 0, 1)), 0, 1);
$result .= “$s “;
}
$string = trim($result);
Here we split the phrase up based on each space character and then did the same as we did above, only for each word. Then we built it back together word by word.
UPDATE: I didn’t realize it, but the ucwords function in PHP will do just this.
ucwords(strtolower($string));
Posted by: Corey on: October 21, 2006
There are a variety of methods involving CSS and HTML to get rounded corners. Mozilla-based browsers actually have a bit of CSS that makes it really nice and easy, but what about the other browsers like IE, Opera, Safari, Camino, Konquerer, and all the IE mashups (AOL, MSN, etc)?
Well, some people prefer to go with a CSS method that doesn’t use images, but personally, I don’t think it’s that much of a hassle to just make the images. However, sticking them to the corners without using a table can be a bit tricky. There are a few ways to do this as well, but I find the following to be the easiest:
<div style=”width:100%; margin: -20px -20px 0 -20px; padding: 0px; text-align: right;”><img style=”float:left;” src=”top_left.gif”><img src=”top_right.gif”></div>
Let me explain a bit here. I usually put everything into a container (DIV) that has padding for visual purposes. If you want the corners on, well, the corners, you will have to cancel out the padding and force the images onto the corners. Rather than go with absolute positioning, I just used a negative margin. The zero is for the bottom of the div, since the rest of the objects on the page will still behave by the padding defined and we don’t want to push elements down any farther. To get the corners to hit opposite ends of the div without using 2 divs (which I find to be irritating and sloppy) I told the CSS to align to the right, but I floated one image to the left. They all line up smoothly. Do the same for the bottom corners and you’re set!
Oh by the way, make sure you close all of your elements, otherwise the bottom corners might jump up since the margin won’t be rendered due to incorrectly nested tags.
