Archived Posts from “Tutorials”

A Compiled Resource for CSS Starters

15

January

By reading this compiled resource, I assume that you’ve known how to generate/make web contents - be it a blog on Wordpress or Blogspot, or any websites at all, as long as it has content in HTML or XHTML-type documents. Some might think that learning CSS alone will give them power to create beautiful websites. In fact, Cascading Style Sheets (CSS) is only a simple mechanism for us to add styles to Web documents. It is merely something applied to beautify your web pages. Without learning how to create the web document (content) first, there’s nothing for you to beautify. Simple as that :)

To start off, any beginners who’re seriously interested in CSS should start with CSS lessons at w3Schools. After all, a good foundation will help you go a long way!

After you’ve mastered the basics, you could now start sketching your layout. Decide which type of layout you wanna develop your blog/website into. 2 columns, 3 columns (as 5xmom likes it best), with or without header and footer, fluid or static, etc. Try these repository of ready-made CSS layouts. (codes included!)

- CSS Layouts at Glish
- Bluerobot CSS Layouts
- CSS Pages Layouts at Max Design
- A step-by-step chronology of creating a CSS layout.
- CSS layout creator - It creates layout for you in a few clicks of options.

Reason why I suggest you guys of using these layout resources is that it saves you time and you can start on its content right-away. Unless you’re creating a website that is really out-of-the-ordinary unique, or you’ve some really fresh new layout idea of your own, most of the websites out there today would just stick to the standard 2 or 3 columns layout.

At this point, you could jump straight CSS tricks and magics. Pixel2Life CSS tutorials has tons of tips and tricks on CSS, with easy-to-follow tutorials for you to learn how to create those wonderful CSS-based designs. You could make use of Max Design’s tutorials to make yourself some CSS-based lists, floating images, and selectors.

That should be enough to help you with your CSS adventure.

I’ve also found a couple of nice resources compiled for you guys at websitetips.com and w3.org. They have everything from head to toe of what you need to know about CSS.

If you like this post, please consider buying me a beer.

Technorati Tags , ,


How to add a Favicon to your Website/Blog

12

December

Preparing the Favorite Icon

If you have Photoshop knowledge, you can make your own icon image. Start with a 64×64 image and after you’ve finished your creation, resize it down to 16×16 and save it as .ico file. If you do not have the icon file format in Photoshop, you can download it here.

Download Photoshop .ico file format. Right-click on the link and and click “Save Link As…” to download. Place it under your Photoshop > Plug-Ins > File Formats folder.

For those who doesn’t play with graphics, or too lazy to make one, you could generate one using any images you like from this service at Chami.com

Or, you could use some of these ready-made Christmas-themed icons I’ve collected from the Internet.

Just right click on any of them and Save Image As “.ico” file.

Upload it to a webserver

Upload your favicon file to your webserver, if you have one. Or, you could place them on image hosting services like ImageShack, or Photobucket. Or, if you’re using Blogger to blog, you can just upload your icon file in their “Create Post” editor.

Execute the Icon from the Code

Put the following code within the <head> and </head> tags zone in your HTML or webpage.

<link rel="Shortcut Icon" href="http://www.alexallied.com/favicon.ico">

Just replace the URL of the icon with your own and you’re done! Enjoy your website/blog with new personalized favicon!

If you like this post, please consider buying me a beer.


Zhng your Firefox: Learn how to stuff more Bookmarks onto your Fox

11

December

While Mr Brown’s Zhng My Car show deals with car modifications, “Zhng your Firefox” teaches you how to utilize and accessorize your Firefox browser so you can Vrroooom your Internet browsing experience.

Today I’m gonna show you how to save space on your browser so you can place more bookmarks to your favorite websites.
More than 30 bookmarks in my Bookmark toolbar.
I could stuff more than 30 bookmarks in my Bookmark toolbar, just like this! Got the idea yet? I’m effectively utilizing website’s icons as an idenfication to shortcuts in my bookmark. Well, if you know how to do it already, you could skip the following steps. Else, read on.

Step 1
First, drag that icon and drop it onto your “Bookmarks Toolbar”. Of course, you’ll have to enable your bookmarks toolbar in the first place if you haven’t already done that. Just go to “View” > “Toolbars” > Tick on that “Bookmarks Toolbar”.

Step 2
Step 2. Right click on the new bookmark that you’ve just dropped in and choose “Property”. Empty the “Name” section of the form, then click OK. You’re done!

*For those websites that doesn’t come with an icon (a paper document icon will show up instead), you’ll need to leave a short name so you could recognize them.

If you like this post, please consider buying me a beer.


Learn how to apply shadow automatically to an image using CSS

13

October

Kinoshita Shadowed
Learn how to drop a shadow to a pretty girl’s photo without using Photoshop! *cough* Actually, you can do it to any image you want. Click ‘Continue Reading’ to start.

Continue Reading


Next Page »

  • DSCN3878
  • part2218fs1
  • DSCN9926
  • IMGP8732
  • Picture 269
  • Ming Wei 6" 2-way Speaker
  • IMGP1428
  • DSC00093
  • Picture 228

Recent Comments