Slice and Dice PSD to HTML/CSS Conversion - Part 2

Overview

Learn to convert a Web 2.0 style PSD design into HTML and CSS in this comprehensive 52-minute screencast. Follow along as the instructor demonstrates the step-by-step process of slicing and dicing a Photoshop file, covering essential topics such as main styling, HTML structure, header and navigation implementation, text decoration techniques, and proper use of CSS positioning. Explore advanced concepts like featured sections, web standards compliance, footer design, and cross-browser compatibility. Master the art of creating rounded corners, styling form inputs, and implementing transparent elements. Conclude with troubleshooting tips for Internet Explorer and validation techniques to ensure a polished, professional result.

Syllabus

Intro
Eric Myers
Cleanup
Main Styling
HTML
Header
Navigation
Text Decoration
Display Inline
Display Relative
Position Parent Element
Featured Section
Featured Background
Featured Margin
Featured
Border
Margin
Tags
Featured P
Main
Web Standards
Position
Width
Footer
Margins
Margin Bottom
Style Date
Footer Background
Footer Height
Margin Left Height
Line Height
Footer Tags
Unordered List
Margin Left
Margin Right
Paragraph Tags
Style
Strong
Columns
Spacing
Unordered Lists
Double Margins
Inputs
Buttons
Rounded Corners
WebKit
Chrome
Transparent Ping
Download JavaScript File
Fixing the Featured Section
Fixing IE Errors
Validate