Free Web Development Training and Tutorials Blog




    



The Web Designers Killer Handbook

The goal of The Web Designer's Killer Handbook, by Stefan Mischook, is to present and demonstrate some of the more useful techniques and code, in relation to HTML, JavaScript, and Cascading Style Sheets (CSS), that the author has found when creating websites and web applications. As such it provides useful tips and code snippets. The easiest way to get started with this web designer handbook is to create a practice HTML page, cut and paste the code provided, and then make small changes to see how your changes look in the browser and affect functionality. You will learn more if you try some things on your own and change the code to try to do other things, or break the code, and then see what happens. This article explains why its important to understand and know HTML, JavaScript, and CSS, even when you are using a wysiwyg type of web editor.


Contents of Web Designer's Killer Handbook:

Styling Your Web Pages

  • Styling Tips
  • Change the color of the browser's scroll bars:
  • Create link roll-over effects without images:
  • CSS floating background image
  • CSS relative positioning
  • CSS absolute positioning
  • Fieldset element with CSS styling affecting margin (outside) and padding (inside)
  • CSS Border style (inline) applied to a table

Miscellaneous Web Design Tips

  • Subscripts
  • Supercripts
  • Prevent the page from jumping
  • Cause the page to jump
  • Obfuscated email address to protect yourself from spam
  • Jump to a spot on another page
  • ASCII Character Code
  • Easy navigational drop-down menus
  • Removing the %20 in URL's
  • Add to favorites: How to create an 'add to favorites' link
  • Link made with an image instead of text
  • A more extensive version of the "Add to Favorites" code

Make Your Own Firefox Extensions

Mozilla Firefox is gaining in web browser popularity partly because of its extensibility, giving users the option of adding any of the thousands of Firefox extensions that are freely available. Extension make Firefox configurable the way you, the user, would like it to be. For example, you can change Firefox's appearance, add a mulitude of features, and even modify how web pages are displayed. 

This Firefox Exension tutorial, Make Your Own Firefox Extensions, teaches you in six illustrated steps how to create your own. Developing your own extension is not difficult to do, as a typical Firefox extension is nothing more than an XUL (XML User-interface Language) file that you edit with a text editor. (In contrast, Internet Explorer extensions must be compiled into DLLs and then installed into the operating system.)

Contents of Firefox Extensions Tutorial:

   1. Customize the Interface
   2. Add Some Action
   3. Take Stock
   4. Update the Install Script
   5. Put It Back Together
   6. Check Your Work


Ten CSS Tricks You May Not Know

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of document(s) written in a markup language, such as HTML and XHTML, for web sites. Web site authors use CSS to define the page layout, along with specifying colors, fonts, other aspects of the web page presentation. Using CSS enables web developers to separate document content (written in HTML or XHTML) from document presentation (written in CSS).

This CSS tutorial, titled Ten CSS Tricks You May Not Know, by Trenton Moss of Webcredible, describes ten of his best CSS tips. These will assist you with obtaining the most from your CSS coding

10 CSS Tricks:

   1. CSS font shorthand rule
   2. Two classes together
   3. CSS border default value
   4. CSS document for printing
   5. Image replacement technique
   6. CSS box model hack alternative
   7. Center aligning a block element
   8. Vertically aligning with CSS
   9. CSS positioning within a container
   10. Background colour running to the screen bottom


6 Free Web Design Guides

Sessions School of Design offers six well written Website Design Guides in their POP! Library of Visual Design Guides. By using these web design guides you will obtain real world training on improving your design skills in these areas: web site design, layouts, digital photography, branding, and animation. These downloadable full-color training documents were written by 15 professional designers. Free registration is required.

Contents of the The POP! Library of Visual Design Guides:

     Make Your Portfolio POP
     Find out how do good designers make their work compelling and attractive.

     Make Your Photographs POP
     Get the details on lighting, perspective, framing, settings, editing, and your "eye".

     Make Your Web Sites POP
     Learn how emotion, consistency, balance and color can come together for
     a great web design.

     Make Your Branding POP
     Discover the secrets of how to visually communicate a brand on the web.

     Make Your Animations POP
     This explains how to make greate animations for the web.

     Make Your Layouts POP
     This describes how to make print layouts look appealling on your website.


Page :  1