"You don't have to be an expert to be able to create something unique."There are many web templates around the net if you search for them. Yeah, you can download them; sometimes for free and sometimes you have to pay for them. But, what if you can't seem to find the right template that you wish to use and place in your site?
You'll have to wither hire someone to create something for you, which is expensive, or you can make your own.
"But I don't know how to code!"
So? Start learning along the way.
"What do I need?"
- Yourself. "Be prepared to have your patience tested." Frustration is normal but if this happens, take a break and treat yourself to a cup of coffee or chocolate.
- A site. In this tutorial we're going to use the CSS Zen Garden as a sample site.
- For those who don't know how to code html and/or css, there are easy to understand instructions in w3schools.
- Photoshop or any image editing tool.
- Komodo Edit or any html/css editor.
- IE tester and the following browsers: Chrome; Firefox; Safari.
Why do I need this?You will use these to see how your site looks from one browser to another. Template editors use these for checking purposes. More often than not, web sites look different from one browser window to another due to some codes behind them. The lower versions of IE seems to have the most bugs compared to the last three browsers mentioned above.
"What to do with these? Where do I start?"
- Go to CSS Zen Garden and download the html file of the site. You can also download the css file and change the codes from there. Or you can just download the html and css here.
As much as possible, please do not change the html document. Think of html as a body of a human person and the css is the clothes you want that person to wear. We only change the clothes and not the body in this activity.
- The next step, I call it, "getting to know you." Almost similar to asking a stranger his name and spending time with that person; you're going to "get to know" your site (the html). In CSS Zen Garden, the site is divided into different divisions. (e.g. Participation, Benefits, Requirements, Header, etc). Get to know their names and how they are placed around the file.
- Go to photoshop and design how you want your site to look like. Be creative and unleash your imagination. Nothing can go wrong here. Of course in designing your web template, consider the users who would go to your site. Save your file in psd form so that you can still use the images later.
- Now, open your Komodo Edit then your css file. Edit your codes in a way that the placement of the elements are in the same way on how you placed the elements in your psd file. Don't worry if your psd file and html site don't look the same, you can still edit it later. What we're concerned for now is if you can move the elements according to what you want. Call this your "practice stage in manipulating the css codes" before the real fun+pressure begins.
- Go back to your psd file. Now, think like a doctor because you'll be dissecting your design to certain parts and save them as image files to be placed in your site via the css file. You can also think of it as puzzle pieces. Remember the divisions you used in moving the elements around the site? You can use the divisions background to place your dissected image and like a puzzle piece you put them together.
- Take your time editing and remember not to stress yourself. Use the IE tester and the different browsers to check your work. If you find that you're stuck on a certain dilemma especially on how your site is different in the lower versions of IE, always remember to use the net to search for the answers. There are codes you can use to determine whether the browser used to read your site is an Internet Explorer or others.
