Are you one of those people that is just awesome at putting a pencil or pen to paper? or when browsing around online you find yourself looking at the good and bad of the web site you are on thinking to yourself I could make this better? In today’s economy everyone out there is looking for some way to put a little extra cash in their pockets. I have been playing with web design and graphic design as long as I can remember, taking images that I sat one evening drawing on my trusty sketch pad and figuring out how to make them into a digital masterpiece.
We all are born with some sort of artistic talent, yes some more than others. But with the ever growing expanse of the Internet more and more opportunities are popping up all over. With so many WYSIWYG editors out there anyone can be a web designer. So by now you are asking yourself, how can someone who runs a web design business be turning people away to these free editors? I believe that learning no matter what is the most essential thing in this world, I got my start by spending countless hours staring at source code of existing web sites, and downloading free templates and changing code a line at a time to see what the effect was. Now if you are looking for a professional looking web site to start your home business, or a way to make a little extra side money for the weekend grab your mouse and a cup of Joe and let’s get started.
The fastest growing search engine that everyone knows and loves is going to be your friend, Google is great for gathering information and free how to’s on just about everything out there if you are willing to put in the time looking. Every website just like this one is made up of HTML code and every browser out there no matter if it is the standard windows installed Internet Explorer or the rebel Firefox or Google chrome have the ability to look at the source code. This can be done by simply right clicking and looking for the <View Source> in the pop up menu. Now I realize that when the page pops up it may be a little confusing, but try this.
In your browser let’s go take a look at the apple web site http://www.apple.com/
When the page opens you will see the images that are laid out along with the menu
This is the a snippet of apple’s home page introducing the new
iphone 4 s
So now we are going to look at the source code to get an idea of how they put the site together.
/************* DO NOT ALTER ANYTHING BELOW THIS LINE ! **************/ var s_code=s.t();if(s_code)document.write(s_code)</script> <!-- End SiteCatalyst code version: H.8. --> </div> <div id="main"> <div id="content"> <article id="billboard"> <a href="/iphone/"><img src="http://images.apple.com/home/images/hero.jpg" alt="iPhone 4S" width="579" height="595" /></a> <div> <h1> <a href="/iphone/"> <img src="http://images.apple.com/home/images/title.png" alt="iPhone 4S. Dual-core A5 chip. All-new 8MP camera and optics. iOS 5 and iCloud. And introducing Siri. It’s the most amazing iPhone yet." width="313" height="219" /> </a> </h1> <ul> <li> <a href="/iphone/#video-4s"> <span> <span></span> <img src="http://images.apple.com/home/images/video_iphone4s.jpg" alt="" width="90" height="57" /> </span> <span> <span>Watch the</span> <span>iPhone 4S video</span> </span> </a> </li> <li> <a href="/iphone/videos/#tv-ads-siri"> <span> <span></span> <img src="http://images.apple.com/home/images/video_iphone4s_ad.jpg" alt="" width="90" height="57" /> </span> <span> <span>Watch the</span> <span>iPhone 4S TV ad</span> </span> </a> </li> </ul> </div> </article><!--/billboard--> <aside><ul><li> <a href="/ios/"><img src="http://images.apple.com/home/images/promo_ios5.png" alt="iOS 5 Software Update. Get over 200 new features - free for iPhone, iPad, and iPod touch." width="231" height="149" /></a></li><li> <a href="icloud"><img src="http://images.apple.com/home/images/promo_icloud.png" alt="iCloud is here. iCloud stores your content and wirelessly pushes it to your devices." width="231" height="149" /></a></li><li> <a href="/ipodtouch/"><img src="http://images.apple.com/home/images/promo_ipodtouch.png" alt="iPod touch. It has fun written all over it. Now starting at $199." width="231" height="149" /></a></li><li> <a href="/ipad/"><img src="http://images.apple.com/home/images/promo_ipad2.png" alt="iPad 2. Now with iOS 5 and iCloud, it just got even harder to put down." width="231" height="149" /></a> </li></ul></aside>
This looks like a ton but if you look at the picture of the main site and the site code at the same time, you will begin to see that you can identify the images that are on the page itself. Each image is classed with the <img> tag, so if you can locate the image on the main page showing the new apple iCloud now scroll through the code and look at the tags until you find
<a href=”icloud“><img src=”http://images.apple.com/home/images/promo_icloud.png” alt=”iCloud is here. iCloud stores your content and wirelessly pushes it to your devices.” width=”231″ height=”149″ /></a> the <a href=”icloud”> is the link tag this will take you to the page on their site that has the information about the iCloud in the new iOS 5 next is the image itself <img src=”http://images.apple.com/home/images/promo_icloud.png“> and so on. So for now this is the basics and I will expand on this more in my next blog post but get out there and take a look at the source code for some of your favorite sites and see if you can start to pick up how they are put together.