All you need is a library card. If you don’t have a library card you can sign up for an e-card which gives you immediate online access, but you must be a resident of Contra Costa County. If you live outside of Contra Costa County check your local library to see if they offer access to Safari books, if they don’t you can visit a library in Contra Costa County and sign up for a regular library card to access the tech books online.

So visit the Contra Costa Library Website now and sign up for an e-card if necessary. Once you have been granted access to Safari you can search for books by title, subject, or simply browse the massive library. This is a great way to supplement your learning library, review books before you purchase, or quickly look something up.

Starting July 5, 2010 SitePoint will offer CSS Live, a two week “live” online course that covers the fundamentals of CSS. This course will be led by Russ Weakly — a trusted name in the Australian web design industry. The course is $9.95. If you take this course you can participate during ROP class time.

Starting Monday June 14th, PHP Live ($29.95), a three-week online course covering the basics of building database-driven websites using PHP and MySQL. As with JavaScript Live, the course will feature four lessons a week, each taking about an hour to complete; they’ll combine videos, tutorials, coding challenges, and discussion in the private course forum, and be followed by a live video Q&A session online each Friday.

Check out the SitePoint Tech Times for more information on the classes. I would highly recommend that you sign-up for their newsletters; a sign-up form is on the newsletter page. You may also want to browse their newsletter archives to check out past editions and sign-up for their other excellent newsletters.

Before you complete each of these tutorials I would recommend that you download the source PSD (Photoshop) files that can be found on each of the tutorials. They are usually linked at the beginning of the tutorial or at the end. Open the source PSD files and examine the layers, guides, etc. Keeping the source files open while you are working on the tutorial is also helpful if you have questions about measurements, guide positions, and font colors and sizes.

Many of these tutorials call for screen captures of Websites you have created. Because you’re entering a new field you may not have a lot of sites to showcase, so feel free to use photographs instead.

After completing the Photoshop specific tutorials I have compiled several tutorials for creating the Photoshop mockup and converting it to a working XHTML/CSS site. Students in my class must complete all of these tutorials.

The first five tutorials are from DesignM.ag, a community for designers. They were extremely detailed and very easy to follow. DesignM.ag has additional layout tutorials that you may want to review after completing the tutorials outlined in this post.

How to Design a One-Page Portfolio in Photoshop

Design an Attractive One-Page Portfolio Using Photoshop

Design a Textured Portfolio Site Layout Using Photoshop

Design a Portfolio Site with a Textured Background

After completing the above portfolio layout tutorials you should complete Design a Clean Portfolio Site in Photoshop and How to Code a Clean Portfolio Design

More Advanced Tutorials

Once you have completed the above tutorials take your knowledge a step further by completing the following tutorials:

Design a Minimal and Modern Portfolio Layout with Photoshop – I would recommend that you download the PSD file for reference before you begin the tutorial. By examining the Photoshop file from Six Revisions I was able to see where guides should be set which made creating the overall layout much easier. Once you have completed the Photoshop layout you can code it by following the tutorial Minimal and Modern Layout: PSD to XHTML/CSS Conversion

How to Create a Grunge Web Design Using Photoshop – While this tutorial does not have “portfolio” in the title the layout is really perfect for a one page portfolio for those of you who are looking for a grunge style site. It’s a bit more challenging and I found it extremely helpful to download the grunge-web-design-from-scratch.zip that can be found on the second part of the tutorials, How to Code a Grunge Web Design from Scratch. You will find that this site does not display properly in Internet Explorer 6 because PNG 24 images are used. Here is an article on Transparent PNG 24 Images with Internet Explorer 6 for Beginners.

I have copies of each of these tutorials printed with my own notes. Let me know if you need help with measurements, etc. We are continuing to work on finding tutorials that are easy to understand. Meanwhile, explore some of the other tutorials for creating portfolio layouts and mockups in Photoshop.

If you are running Vista try IETester, which is a free WebBrowser that allows you to have the rendering and JavaScript engines of IE8, IE7, IE 6 and IE5.5 on Windows 7, Vista and XP. I’ve been using this on my Vista machine, it crashes now and then, but it’s a great tool.

Both of these tools are free!

A common question in class is “how do I overlap images and still see the background?” The answer, you use some type of transparent image. Traditionally we used a transparent GIF, but the quality isn’t so great. PNG has really become the preferred image format for transparency. PNG 8 gives you a transparent image, but you may see some white pixels around the edges of the image. PNG 24 transparent images are crisp and clean, but sometimes a bit bloated. Still PNG 24 now being widely used.

Unfortunately, it is well documented that transparent PNG 24 images will not display properly in Internet Explorer 6 without applying some type of fix. Instead of getting a truly transparent image you will see a blue background around the image like the image above. I’m not going to go into the technical reasoning for this problem, this is an article for beginners and there are numerous fixes and articles for this issue, Perishable Press has a great write up on the subject.

I’ve prepared a page that shows both of these problems; this page was created from the Six Revisions’ tutorials How to Create a Grunge Web Design Using Photoshop and How to Code a Grunge Web Design from Scratch – great tutorials, but I’ll write about that later. If you open my PNG transparency example page in Internet Explorer 6 you should see that the header image “Get Your Hands Dirty” has a blue background – not good. If you look at the heading “Featured Work”, a PNG 8 image, you should notice, albeit subtle, little white dots around the edges of the image – not good either. If you look at the heading “About this Website”, a transparent GIF, you will also see the little white dots around the edges of the image.

Now if you look at my example with PNG 24 images and a JavaScript fix applied in Internet Explorer 6 you will see that all of the images look great.

So how did I fix this? If you read the article PNG Fix for Internet Explorer from Perishable Press you will see that there is a general method for fixing PNG 24 images in IE 6. You’re going to need to create an IE specific CSS file, this file is linked in the head section of your HTML document after your regular CSS link within conditional comments.

<link href="styles.css" rel="stylesheet" type="text/css" />

<!--[if lt IE 7]> 

<link rel="stylesheet" type="text/css" href="ie-specific.css" /> 

< ![endif]-->

The conditional comment starts with

<!--[if lt IE 7]>

This tells the browser that if the visitor is using a browser version older than IE 7 then use this special CSS file in addition to the styles.css file. It doesn’t replace the styles.css file, it just allows you to send specific CSS rules to IE 6.

In the ie-specific.css file you will need one declaration for the transparency fix.

.png { behavior: url(png.htc); }

You created a class called png. Behavior is a CSS property that allows you to attach a script to an element, class, or id. The png.htc file contains a JavaScript that will fix the PNG 24 display issues in IE 6 and earlier versions. You can learn more about this property and htc files in the SitePoint Reference.

You also need a special JavaScript file, the htc file. You will find this file all over the Internet, but here is a zip of the png.htc file that I used. You will also need a transparent GIF file, this is a 1px x 1px transparent GIF that the HTC file uses.

To make this fix easier to use, the files ie-specific.css, png.htc, and transparent.gif should be placed in the same folder. If you place them in different folders you will need to edit the paths in the CSS file and the HTC file. This isn’t really a big deal, but sometimes it can cause problems for the beginner.

Ok, you have got your CSS file created and linked using conditional comments, your HTC file and transparent GIF files are in the same folder as your CSS and you preview your page in IE 6 and it still looks like crap, oh I mean bad. We’ve got a little more editing to do – remember that class we created in the ie-specific.css file? Ok, in case you forgot, this one

.png { behavior: url(png.htc); }

You now have to apply this class in your HTML file whenever you use a PNG 24 image. For example the “Get Your Hands Dirty” PNG 24 logo was applied as a background image in the main styles.css file with this code

h1 a {
display: block;
background: url(images/title.png) no-repeat left top;
float: left;
height: 92px;
width: 426px;
}

so the png class from the ie-specific.css file needed to be added to the HTML

<h1><a href="#" class="png">Get Your Hands Dirty</a></h1>

Here is another example of how it was added to the featured work image

<h2 class="featured-work png">Featured Work</h2>

In the above example two classes have been applied – featured-work is from the main styles.css file and png is from the ie-specific.css file.

The ie-specific.css file can also contain other declarations that are for Internet Explorer 6 only; you are not limited to using this file just for fixing transparent PNG files. Anytime you think about putting * html in your regular CSS file to fix an IE 6 issue you can put the declaration in the ie-specific.css file instead.

Again, there are numerous fixes for this issue and this may not be the perfect fix for you. Check out the great article at Perishable Press on the subject or remember that Google is your friend.

SitePoint is offering a deal on PDF versions of The Principles of Beautiful Web Design and Sexy Web Design. Both PDF design books can be yours for just $14.95for the next 12 hours. These books are both required reading for the Web Design and Development curriculum, so if you haven’t gotten them yet now is a great time!

From SitePoint

What do you have when you combine beautiful with sexy?

One stunning looking web site!

Our two best-selling design books are up for grabs today.
For just $14.95 you can pick up a PDF copy of both “Sexy
Web Design” by Elliot Jay Stocks and “The Principles Of
Beautiful Web Design” by Jason Beaird.

These two books go perfectly together, combining
inspiration and practical design advice to help you turn
your next web site into something spectacular.

Own them now for just $14.95:

http://sale.sitepoint.com

A web design twin-set, 75% off the normal price. This
is one deal you don’t want to miss.

SitePoint is offering a special deal every day from now until December 24. Make sure to sign up for email notifications on these special offers!

You can use the Firebug Lite bookmarklet in class. Due to our security settings you won’t be able to drag the bookmarklet to the Favorites/Bookmarks bar as described on the Firebug Lite Web page. Instead use the following instructions to add Firebug lite to your Favorites.

1. Visit http://getfirebug.com/lite.html
2. Scroll down the page until you see the link that says Firebug Lite
3. Right click the Firebug Lite link and select Add to Favorites… from the menu
4. Click yes to the security alert
5. Select the Favorites folder and click OK

To start Firebug Lite in Internet Explorer

1. Open the Web page you want to analyze
2. Click Favorites > Firebug Lite

Firebug Tutorials

• Build Better Pages With Firebug
• Firebug Tutorial: Getting Started
• HTML/CSS/Javascript in Firefox
• How to Test CSS Rules with Firebug
• How to use Firebug for CSS
• Live CSS Editing and Debugging with Firebug

Well, it would in a perfect browser world

The truth is it probably won’t, especially when you’re first learning to code. Unfortunately, each browser interprets and displays HTML & CSS code differently. Sometimes these differences can be slight, an image may be a few pixels further to the right in Opera or a font may appear slightly smaller in Safari. Sometimes these inconsistencies can be MAJOR, you may find that entire div is positioned in the wrong place or an absolutely positioned image doesn’t even appear in Internet Explorer 6.

In addition to interpretation differences between browsers there are also numerous browser bugs that can be triggered by a simple property/value addition or even a minor change to a pixel value in the CSS. Browser bugs can cause entire layouts to break; floats can drop to the bottom of the page, containing elements with background images and/or colors can collapse around their contents, and elements may just disappear!

The browser bugs and workarounds are well documented; Great CSS Resources and Articles for Students has links to terrific resources around the Web for learning more about these issues and how to fix them. I know that all of the articles may seem overwhelming at first, but taking the time to start to learn about browser issues will save you time and headaches in the future. When you encounter a layout issue remember that Google is your friend. Searching for the browser name and version, display issue, and the word “bug” should give you a lot of resources.

Comments and CSS Code

In a perfect world, we would all have a photographic memory. I know that I don’t – I rely on bookmarks, printed articles, notes, overly highlighted books, and search engines.

When I develop or edit CSS and HTML documents I include notes or comments in my code. I use comments to set reminders or to “talk to myself” as I’m developing or as I’m troubleshooting student code. Developers frequently use comments to explain code snippets to other developers.

Comments begin with a forward slash and an asterisk /* and end with an asterisk and a forward slash */

So here is the format of a typical comment:

/* comment text goes here – comments can be single line or multiple lines */

CSS Design Notes

You may find it helpful to include design notes such as colors and fonts, and frameworks that may have been used at the top of the CSS file within a comment. It’s also helpful to include a table of contents that lists each section of code.

/* Design Notes
Author/Designer: Debb Designer

Table of contents
Wrapper – Container to set width, center page, and define background color
Header – logo and name of site
Sidebar – navigation menu
Content – content area
Footer – contact information and copyright
*/

By putting this information at the top of the CSS file you can quickly see the hex values (colors), fonts, etc. for the site instead of having to scroll through the entire CSS document.

Structural CSS Comments

As you are building the CSS file you should include simple comments about each section of code. This makes for better organization and easier editing.

/*—– Wrapper —–*/

CSS declarations

/*—— Header —– */

CSS declarations

/* —–Sidebar—– */

CSS declarations

/* —–Content—– */

CSS declarations

/* —–Footer—– */

Before you edit!

Before you make major changes to the CSS file be sure to save a backup. You can always revert to this copy if the layout breaks during editing. You can also use this copy to compare to the edited file.

Comment as you edit

Once you have the basic layout done you may need to tweak pixel values. Unfortunately, sometimes an increase of just a few pixels to a margin, padding, or width value can cause a layout to break. As you increase or decrease the original values comment the CSS.

#sidebar {
float: left;
width: 200px; /* increased sidebar width from 175px */
padding: 5px;
}

When you make a value change, preview the code in multiple browsers before you make additional changes. This makes it easy to see if the change caused a problem to the layout. If you make numerous changes to different selectors without previewing and a problem with the layout occurs it will be more difficult to trace the error. This may seem like overkill to experienced developers, but when you’re learning it’s very helpful to see how each change affects the layout of the page. Once the layout is complete you can remove these comments.

Comment instead of delete

If you think you don’t need certain CSS code snippets or you think a piece of code may be causing problems, comment the code out rather than deleting it. Once you’re done developing you can delete these comments and code snippets.

/* this code is no longer needed
.alignright {
float: right;
margin-left: 5px;
border: 1px solid #000;
}
*/

Comment CSS Workarounds

You will probably encounter some browser specific bugs and layout issues, especially in Internet Explorer 6. If a workaround is added for a specific browser issue, add a comment.

For example if you use a layout that has many floats you may encounter a “collapsed” parent element. This is common when you have a wrapper that has a background color and/or image that you want to appear behind all of the nested floats. Instead of the background wrapper expanding to surround all of the floated elements it collapses as demonstrated in the image below.

So you do some searching around the Internet and find some solutions. You decide to apply the overflow fix to #wrapper like this:

#wrapper {
width: 720px;
background-color: #4F81BD;
overflow: auto; /* fixes the collapsed wrapper */
}

Today you may remember why you added overflow: visible to the declaration, but in a few months or even days you may not. It’s a good idea to comment and workaround, fixes, and any other unusual code that may be needed.

What are you waiting for, I’m sure you have a few CSS files that need some comments.

As you start to build your own Web sites you will more than likely come across a few CSS browser bugs. You ma y encounter the “float drop bug”, the “3 pixel jog”, or the “IE double margin float bug” to name a few. Before you pull your hair out with frustration, read the articles below which contain many of the common CSS issues and solutions.

If you print any of these articles in the classroom do not print the comments. You can view the article in Print Preview mode by selecting File > Print Preview, scroll down the page until you see the last page of the article and the first page of comments and note the page number. Click the Print button and set the Print Range to Pages and enter the specific ending page. Select the HP LaserJect 2420 PCL 6 as the Printer and click the Properties button. Click the Finishing tab and select Print on both sides. Click OK twice.

Mastering CSS Coding: Getting Started – Great beginners article that covers the following: Padding vs. margin, Floats, Center alignment, Ordered vs. unordered lists, Styling headings, Overflow, Position, Background images, Image enhancement, PSD to XHTML. This article also includes tips on how to fix bugs and how to avoid them all together.

Using CSS to Fix Anything: 20+ Common Bugs and Fixes – Includes IE 6 bugs and fixes, column issues, centering horizontally and vertically, CSS positioning, floats, CSS forms, and CSS tricks.

The Mystery Of The CSS Float Property – An overview of CSS floats, bugs and solutions, sample layouts, and working with lists and form elements.

CSS Float Theory: Things You Should Know – A detailed introduction to using floats. This articles also covers issues, bugs you may encounter when you are working with floats and “fixes”.

All About Floats – Detailed information about floats, common issues, and fixes. There is also a screencast about float concepts at the end of this article.

Liquid three column layout tutorial – If you need a starting point for a three column design this is a good tutorial.

The CSS Overflow Property – Discusses the overflow property and its uses.

Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs

9 Most Common IE Bugs and How to Fix Them

CSS Differences in Internet Explorer 6, 7 and 8 – – This article describes the differences in CSS support IE6, IE7, and IE8. This article also covers any known bugs. This article may also introduce students to some properties they haven’t used before.

Backgrounds In CSS: Everything You Need To Know -Detailed information on how to use backgrounds in CSS.

Create Sidebars of Equal Height with Faux Columns

Center Absolute Positioned DIV

CSS Box Model: The Foundation For Improving Your CSS

Additional CSS Resource Sites

The Difference Between ID and Class – IDs vs. classes confuse many people who are new to CSS. This is a great article that explains the difference.

SitePoint CSS Reference – A great, searchable CSS reference site.

Max Design – Tutorials for CSS floats, lists, and selectors.

Position is Everything – CSS bugs found in Web browsers and advanced CSS techniques.

CSS-Tricks – CSS Articles, freebies, code snippets, and forums.

quirksmode.org – CSS browser compatibility, information on conditional comments and information on quirks mode and strict mode.

Layout Gala – 40 HTML and CSS Layouts

In his post, Become A WordPress Theme Developer Who Rocks In Four Steps (and 50+ readings), Pievincenzo outlines his four step process for developing WordPress themes and includes links to tutorials for developing themes in Photoshop, converting Photoshop (PSD) files to a HTML/CSS layouts, coding specifically for WordPress, and finally hacks (suggestions) to improve your themes.

This is a great roundup of resources, so be sure to check it out along with the other great tutorials and resources at PV.M Garage.