Some helpful tutorial videos CSS & XHTML from beginning to advance

After lost of email from visitors to me about questions: "How can you do that? ...", "Where can i find it...", "It doesn't work, please help...." I totally know that someone need to understand how the css works and the css rules can work without. These videos bellow i checked all and right now, i think it helpful for everyone who want to learn css and just begin to designning XHTML & CSS. From beginning to advance, you should not miss them.

1. Understanding Divs, Css, and How They Work Together by Ethan and Adam

 If you are new to XHTML, you should not miss this video. This video will help you understand how DIVs and CSS work together. The tutorial work on Dreamweaver and with this, it's more easier to follow what the author was doing. In this website, you can find other videos, maybe useful for anyone who is beginner with CSS, Web layout in PTS...

See video

2. Create a Fully CSS Website Layout by Nathaniel

The most famous people in Youtube about posting Design Tutorial Videos. In this video, you will see how to design a complete basic website layout with css, learn all about using divs, creating CSS rules, targeting divs, creating a background, and so much more! And there are other videos in his website helpful for designer. Check it all!

See video

3. CSS Tips & Tricks series by Stephen Korecky

Not a big collection but this series is helpful for you, who want to learn CSS  Tips and Tricks that users on over the internet are doing. This series contains 8 episodes and maybe continue to update. Check it now, and you will find something really cool in css.

See video series

4. How to Convert a PSD to XHTML by Jeffrey Way

This video is a complete tutorial from PSD slicing and CSS styling... You can see how he did this video with PST, Visual Studio ... He said this movie will shows you exactly how to convert a PSD into perfect XHTML/CSS. Yes, i think so.

See video

5. Converting a Photoshop Mockup by Chris Coyier

The video below is a part two of series made by Chris Coyier after lots of great feedbacks he received with part one right here. Because of part one is just 10 minutes lenght, he did the part two and in the great video he did, he show you everything, exactly how he created the CSS-Trick layout, but it's just a mini-version of the current version of CSS-Tricks.

See video 

BRounded - Professional Blogger Layout for free download

This is my second layout i designed for Blogger user. I love Blogger so much so i cant stop working on it. If you downloaded my first layout in previous post, you should not miss this layout. I this working, i dont design for new to CSS and Web Design, you can download it, but if you want to use it, you must be familiar with CSS and XHTML. So, take a look at new layout, when you have been download and replace with your old layout, your blogger will be as follow...

 

So, now, check a demo or download it now, it's free.

• Download
• Demo

After download and replace your layout, you must customize your new layout.
Search somewhere in layout, replace all my links, such as: twitter, feedburner, facebook, flickr ... by your links
In my rar file for downloaded, i attached all images that this layout needs to work, you can re-uploaded all those images in your one picassaweb or any image hosting you know, or images from my picassaweb, no need to do anymore.

Create your one new widget in sidebar:
If you want to create your one new widget, you need to know that in my layout, a widget must be following format:

<h4><span class='feed-small-right'><a href='your link'>This title will be display at the top-right at each widget</a></span>Widget Title</h4>
<div class='featured_inner'>
<div class='section-w'>
                Your widget content will be here.
</div>
</div>
<br/>
<br/> 

So, because of that XHTML file layout was copied exactly from my layout at http://cafemen.blogspot.com, dont say it's not well-formated.
If you want to help to install this layout, tell me, i can help you. If anything goes wrong, tell me, i'll fix it. And if you like this layout, just buy me one Caribou Coffee =.=

HTML vs. XHTML - How to Convert HTML to XHTML

XHTML 1.0 is a reformulation of HTML 4.0. What this really means is that learning XHTML is basically the same as learning HTML. The main difference is a few simple rules - as XHTML is more strict than standard HTML.
The reality is that HTML is not going away. While there are many advantages to having a very flexible system where tags can be easily added and changed in the DTD, but most Web Developers won't need or want their own tags. Why rewrite the way the <p> tag works, when it's already in the document definition?

Converting an HTML Document

There are a few basic rules you need to apply to convert an HTML 4 document to XHTML.

1. Stricter adherence to the HTML specification.
   
   Many browsers are very lax in how they interpret HTML. This leads to incongruities in how the pages are displayed, and XHTML doesn't allow that. The best way to correct this is to use an XHTML validator.
   
   
   
   
2. Write well formed documents.
   
   What this generally means is avoiding overlapping elements. The following nested code is acceptable:
   
   

   <p>Paragraph <em>emphasized</em></p>

   because the <em> tag is opened and closed within the <p> tag. However, this is not allowed:
   
   

   <p>Paragraph <em>emphasized</p></em>

   because the <em> tag overlaps the <p> tag.
   
   
   
   
3. Write tags and attributes in lowercase.
   
   XHTML is a case-sensitive markup language, so
   
   

   <LI> and <li>

   are potentially two different tags.
   
   
   
   
4. End tags are required.
   
   In HTML, some tags which actually contain elements do not require the end tag. The most common of these is the
   
   

   <p>

   tag. XHTML requires that the
   
   

   </p>

   tag be used. For singleton tags, such as
   
   

   <br>

   you should include a trailing slash in the tag itself, e.g.
   
   

   <br />

   to get a line break.
   
   
   
   
5. Attributes must be quoted and include values.
   
   What this means is that non-quoted attributes such as
   
   

   <table border=3>

   are invalid. And attributes which used to stand alone, must now be written as name="value" pairs. For example
   
   

   <hr noshade="noshade" />

   adds the noshade attribute to the <hr/> tag.
   
   
   
   
6. Do a second validation.
   
   The last step is to validate your XHTML again. This will tell you of any additional problems or issues with your code.

Copy from About.com. Published by Jennifer Kyrnin