{"id":3157,"date":"2009-07-29T05:41:08","date_gmt":"2009-07-29T12:41:08","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=3157"},"modified":"2024-06-28T07:23:48","modified_gmt":"2024-06-28T14:23:48","slug":"video-screencasts-2","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/video-screencasts-2\/","title":{"rendered":"Videos"},"content":{"rendered":"
\n
\"screencast<\/a><\/dd>\n
#20<\/span>: Introduction to jQuery<\/dt>\n
Running time: 18:12<\/dd>\n
The popular javascript library jQuery is an amazing way to extend the design possibilities of your site beyond what CSS can do. But luckily, if you are already comfortable with CSS, you have a huge head start in jQuery! This is a very basic introduction to including jQuery on your web page and getting started writing a few functions.<\/p>\n
<\/div>\n<\/dd>\n<\/dl>\n
\n
\"screencast<\/a><\/dd>\n
#19<\/span>: Designing a Unique Page for Twitter Updates<\/dt>\n
Running time: 19:46<\/dd>\n
This week I take you through the creation of simple webpage to display your recent ‘Tweets’ from Twitter from start to finish. This covers the design in Photoshop, to including the javascript stuff provided by Twitter to the markup, to the CSS to style the page.<\/p>\n
<\/div>\n<\/dd>\n<\/dl>\n
        &lt;dl&gt;\n            &lt;dd class=\"thumbnail\"&gt;&lt;a href=\"\/video-screencasts\/18-introduction-to-the-band-website-template\/\"&gt;&lt;img src=\"\/wp-content\/uploads\/2008\/11\/screencast-18-thumb.jpg\" alt=\"screencast 18\" \/&gt;&lt;\/a&gt;&lt;\/dd&gt;\n            &lt;dt&gt;&lt;span&gt;#18&lt;\/span&gt;: Introduction to the Band Website Template&lt;\/dt&gt;\n            &lt;dd&gt;Running time: 12:06&lt;\/dd&gt;\n            &lt;dd&gt;I have recently released a side project called the &lt;a href=\"http:\/\/bandwebsitetemplate.com\/\"&gt;Band Website Template&lt;\/a&gt;. This is just a quick tour of it, explaining why it was built and why I think it can be useful for bands and their web designers.&lt;div class=\"clear\"&gt;&lt;\/div&gt;&lt;\/dd&gt;\n        &lt;\/dl&gt;\n\n        &lt;dl&gt;\n            &lt;dd class=\"thumbnail\"&gt;&lt;a href=\"\/video-screencasts\/17-sliding-doors-button\/\"&gt;&lt;img src=\"\/wp-content\/uploads\/2008\/11\/screencast-17-thumb.jpg\" alt=\"screencast 17\" \/&gt;&lt;\/a&gt;&lt;\/dd&gt;\n            &lt;dt&gt;&lt;span&gt;#17&lt;\/span&gt;: Sliding Doors Button&lt;\/dt&gt;\n            &lt;dd&gt;Running time: 14:28&lt;\/dd&gt;\n            &lt;dd&gt;While sliding doors is far from a new concept and will be obsoleted once we see wider support for multiple backgrounds (CSS3), it is still a good one for your bag-of-tricks. The theory is that if we have an extra hook in our markup, we can apply two overlapping background \/videos\/images to a single spot of text. When that text grows or shrinks, these overlapping \/videos\/images and reveal more of themselves creating the illusion it is a single expandable graphic. In this screencast we do a quickly example of how this can work for a button.&lt;div class=\"clear\"&gt;&lt;\/div&gt;&lt;\/dd&gt;\n        &lt;\/dl&gt;\n\n        &lt;dl&gt;\n            &lt;dd class=\"thumbnail\"&gt;&lt;a href=\"\/video-screencasts\/16-creating-the-photoshop-mockup\/\"&gt;&lt;img src=\"\/wp-content\/uploads\/2008\/11\/screencast-16-thumb.jpg\" alt=\"screencast 16\" \/&gt;&lt;\/a&gt;&lt;\/dd&gt;\n            &lt;dt&gt;&lt;span&gt;#16&lt;\/span&gt;: Creating the Photoshop Mockup&lt;\/dt&gt;\n            &lt;dd&gt;Running time: 22:04&lt;\/dd&gt;\n            &lt;dd&gt;This episode is a prequal to episodes 12, 13, and 14. We go back to a blank Photoshop document and re-create it. There is no HTML\/CSS in this episode, just pure Photoshop work.&lt;div class=\"clear\"&gt;&lt;\/div&gt;&lt;\/dd&gt;\n        &lt;\/dl&gt;\n\n        &lt;dl&gt;\n            &lt;dd class=\"thumbnail\"&gt;&lt;a href=\"\/video-screencasts\/15-introduction-to-firebug\/\"&gt;&lt;img src=\"\/wp-content\/uploads\/2008\/11\/screencast-15-thumb.jpg\" alt=\"screencast 15\" \/&gt;&lt;\/a&gt;&lt;\/dd&gt;\n            &lt;dt&gt;&lt;span&gt;#15&lt;\/span&gt;: Introduction to Firebug&lt;\/dt&gt;\n            &lt;dd&gt;Running time: 13:38&lt;\/dd&gt;\n            &lt;dd&gt;Firebug is an essential Firefox extension for web designers and developers. You are able to quickly target any element on a page to see the markup, the CSS, the layout, and the DOM in an instant. Not only can you see all of this juicy information, you can edit and see the results directly in the browser window. This makes Firebug the go-to tool for debugging CSS trouble. Also indispensable for Javascript programmers.&lt;div class=\"clear\"&gt;&lt;\/div&gt;&lt;\/dd&gt;\n        &lt;\/dl&gt;\n\n        &lt;dl&gt;\n            &lt;dd class=\"thumbnail\"&gt;&lt;a href=\"\/video-screencasts\/14-converting-a-photoshop-mockup-part-two-episode-three\/\"&gt;&lt;img src=\"\/wp-content\/uploads\/2008\/11\/screencast-14-thumb.jpg\" alt=\"screencast 14\" \/&gt;&lt;\/a&gt;&lt;\/dd&gt;\n            &lt;dt&gt;&lt;span&gt;#14&lt;\/span&gt;: Converting a Photoshop Mockup: Part Two, Episode Three&lt;\/dt&gt;\n            &lt;dd&gt;Running time: 23:58&lt;\/dd&gt;\n            &lt;dd&gt;We wrap up the mockup conversion here in Episode Three. We create the \"article area\" and the \"sidebar\" (semantic class naming!), and then we clear the float. We use Firebug to steal the typography from the live CSS-Tricks. Then we fix up the header a little bit in Photoshop and use CSS Image Replacement for the logo.&lt;div class=\"clear\"&gt;&lt;\/div&gt;&lt;\/dd&gt;\n        &lt;\/dl&gt;\n\n        &lt;dl&gt;\n            &lt;dd class=\"thumbnail\"&gt;&lt;a href=\"\/video-screencasts\/13-converting-a-photoshop-mockup-part-two-episode-two\/\"&gt;&lt;img src=\"\/wp-content\/uploads\/2008\/11\/screencast-13-thumb.jpg\" alt=\"screencast 13\" \/&gt;&lt;\/a&gt;&lt;\/dd&gt;\n            &lt;dt&gt;&lt;span&gt;#13&lt;\/span&gt;: Converting a Photoshop Mockup: Part Two, Episode Two&lt;\/dt&gt;\n            &lt;dd&gt;Running time: 25:45&lt;\/dd&gt;\n            &lt;dd&gt;In Episode Two of this series, we continue on with the structure of the site. In Photoshop, we create the three different states of the menu, then slice them up and use the CSS sprites technique to create the rollover and \"on\" states for the tabs. We then create the main content area and footer.&lt;div class=\"clear\"&gt;&lt;\/div&gt;&lt;\/dd&gt;\n        &lt;\/dl&gt;\n\n        &lt;dl&gt;\n            &lt;dd class=\"thumbnail\"&gt;&lt;a href=\"\/video-screencasts\/12-converting-a-photoshop-mockup-part-two-episode-one\/\"&gt;&lt;img src=\"\/wp-content\/uploads\/2008\/11\/screencast-12-thumb.jpg\" alt=\"screencast 12\" \/&gt;&lt;\/a&gt;&lt;\/dd&gt;\n            &lt;dt&gt;&lt;span&gt;#12&lt;\/span&gt;: Converting a Photoshop Mockup: Part Two, Episode One&lt;\/dt&gt;\n            &lt;dd&gt;Running time: 22:03&lt;\/dd&gt;\n            &lt;dd&gt;There has been LOTS of great feedback on the first series of Converting a Photoshop Mockup into HTML\/CSS. So let's do it again! Every website is different will require different conversion techniques so there will be plenty to learn this time around that will be different from last time. The mockup we will be using here is a mini-version of the current version of CSS-Tricks itself!&lt;div class=\"clear\"&gt;&lt;\/div&gt;&lt;\/dd&gt;\n        &lt;\/dl&gt;\n\n        &lt;dl&gt;\n            &lt;dd class=\"thumbnail\"&gt;&lt;a href=\"\/video-screencasts\/11-working-modularly-with-php\/\"&gt;&lt;img src=\"\/wp-content\/uploads\/2008\/11\/screencast-11-thumb.jpg\" alt=\"screencast 11\" \/&gt;&lt;\/a&gt;&lt;\/dd&gt;\n            &lt;dt&gt;&lt;span&gt;#11&lt;\/span&gt;: Working Modularly with PHP&lt;\/dt&gt;\n            &lt;dd&gt;Running time: 14:44&lt;\/dd&gt;\n            &lt;dd&gt;Many sites do not use any fancy Content Managment System (CMS) to generate their pages, they are just just good ol' static HTML content. A site for your grandmothers pie baking business probably only has a few pages, perhaps a homepage, about page, and contact page. Each of these pages has different main content, but much of it stays exactly the same, like the header, navigation, and footer. Think of these sections as \"modules\" that you can easily use PHP to insert into the page. This way, making changes to those sections changes all the pages at the same time, saving you time and potentially mistakes. At the end, I show you how you can still achieve unique effects in your navigation despite the code being identical.&lt;div class=\"clear\"&gt;&lt;\/div&gt;&lt;\/dd&gt;\n        &lt;\/dl&gt;\n\n        &lt;dl&gt;\n            &lt;dd class=\"thumbnail\"&gt;&lt;a href=\"\/video-screencasts\/10-fixed-width-fluid-width-elastic-width\/\"&gt;&lt;img src=\"\/wp-content\/uploads\/2008\/11\/screencast-10-thumb.jpg\" alt=\"screencast 10\" \/&gt;&lt;\/a&gt;&lt;\/dd&gt;\n            &lt;dt&gt;&lt;span&gt;#10&lt;\/span&gt;: Fixed Width, Fluid Width &amp;amp; Elastic Width&lt;\/dt&gt;\n            &lt;dd&gt;Running time: 16:40&lt;\/dd&gt;\n            &lt;dd&gt;There are three different types of layouts for websites: Fixed Width, Fluid Width, and Elastic Width. In this screencast we look at all these three varieties of sites out on the web as well as some hybrid sites and other techniques for making use of wider browser windows. True \"fixed width\" sites will be a thing of the past when the modern browsers of today take hold in greater numbers. Opera 9, Firefox 3, and IE 8 all have \"zoom\" abilities, which make fixed width sites behave like elastic width sites. At the end of the screencast I show a very simple example of you you can get started with all three types.&lt;\/dd&gt;\n        &lt;\/dl&gt;\n\n        &lt;dl&gt;\n            &lt;dd class=\"thumbnail\"&gt;&lt;a href=\"\/video-screencasts\/9-starry-night-3d-background-with-the-parallax-effect\/\"&gt;&lt;img src=\"\/wp-content\/uploads\/2008\/11\/screencast-9-thumb.jpg\" alt=\"screencast 9\" \/&gt;&lt;\/a&gt;&lt;\/dd&gt;\n            &lt;dt&gt;&lt;span&gt;#9&lt;\/span&gt;: Starry Night: 3D Background with the Parallax Effect&lt;\/dt&gt;\n            &lt;dd&gt;Running time: 14:27&lt;\/dd&gt;\n            &lt;dd&gt;Using three layers of alpha transparent PNG files, we can can create a pseudo 3-dimensional looking background for a web page. This screencast covers how to do that from start to finish. Since Internet Explorer 6 and under do not support alpha transparency in PNG's, this screencase also covers how to create a warning message that will display only in those browsers.&lt;div class=\"clear\"&gt;&lt;\/div&gt;&lt;\/dd&gt;\n        &lt;\/dl&gt;\n\n        &lt;dl&gt;\n            &lt;dd class=\"thumbnail\"&gt;&lt;a href=\"\/video-screencasts\/8-css-formatting\/\"&gt;&lt;img src=\"\/wp-content\/uploads\/2008\/11\/screencast-8-thumb.jpg\" alt=\"screencast 8\" \/&gt;&lt;\/a&gt;&lt;\/dd&gt;\n            &lt;dt&gt;&lt;span&gt;#8&lt;\/span&gt;: CSS Formatting&lt;\/dt&gt;\n            &lt;dd&gt;Running time: 14:39&lt;\/dd&gt;\n            &lt;dd&gt;Being organized and using good formatting in your CSS files can save you lots of time and frustration during your development process and especially during troubleshooting. The multi-line format makes it easy to browse attributes but makes your file vertically very long. The single-line format keeps your file vertically short which is nice for browsing selectors, but it's harder to browse attributes. You can also choose how you want to group your CSS statements. Do you do it by section, like header, content, footer? Or do you do it by types of attributes like typography and layout? Being organized, hierarchical, and using CSS shorthand will go a long way in making you a better CSS coder.&lt;div class=\"clear\"&gt;&lt;\/div&gt;&lt;\/dd&gt;\n        &lt;\/dl&gt;\n\n        &lt;dl&gt;\n            &lt;dd class=\"thumbnail\"&gt;&lt;a href=\"\/video-screencasts\/7-three-state-menu\/\"&gt;&lt;img src=\"\/wp-content\/uploads\/2008\/11\/screencast-7-thumb.jpg\" alt=\"screencast 7\" \/&gt;&lt;\/a&gt;&lt;\/dd&gt;\n            &lt;dt&gt;&lt;span&gt;#7&lt;\/span&gt;: Creating a Three State Menu&lt;\/dt&gt;\n            &lt;dd&gt;Running time: 27:17&lt;\/dd&gt;\n            &lt;dd&gt;Using a variation of the CSS Sprites technique, we can create a \"three state\" menu using only one image per menu item. This reduces the number of requests on your server as well as eliminates any \"pauses\" while moving to a different state like some other techniques can have. This tutorial takes you all the way through the process of creating the \/videos\/images to the HTML to the CSS.&lt;div class=\"clear\"&gt;&lt;\/div&gt;&lt;\/dd&gt;\n        &lt;\/dl&gt;\n\n        &lt;dl&gt;\n            &lt;dd class=\"thumbnail\"&gt;&lt;a href=\"\/video-screencasts\/6-tools-of-the-trade\/\"&gt;&lt;img src=\"\/wp-content\/uploads\/2008\/11\/screencast-6-thumb.jpg\" alt=\"screencast 6\" \/&gt;&lt;\/a&gt;&lt;\/dd&gt;\n            &lt;dt&gt;&lt;span&gt;#6&lt;\/span&gt;: Tools of the Trade: The Mac Software I Use for Web Design&lt;\/dt&gt;\n            &lt;dd&gt;Running time: 15:33&lt;\/dd&gt;\n            &lt;dd&gt;Before I get too far along in these screencasts, I thought I would introduce you a little to my working enviornment and explain the tools that I use. First off, I work on a Mac, so these tools are Mac software. This isn't an endorsement of any particular working enviorment, I just want everyone to know, see, and understand what these programs are that I will be switching back and forth between in upcoming podcasts.&lt;\/dd&gt;\n        &lt;\/dl&gt;\n\n        &lt;dl&gt;\n            &lt;dd class=\"thumbnail\"&gt;&lt;a href=\"\/video-screencasts\/5-columns-of-equal-height-super-simple-two-column-layout\/\"&gt;&lt;img src=\"\/wp-content\/uploads\/2008\/11\/screencast-5-thumb.jpg\" alt=\"screencast 5\" \/&gt;&lt;\/a&gt;&lt;\/dd&gt;\n            &lt;dt&gt;&lt;span&gt;#5&lt;\/span&gt;: Columns of Equal Height: Super Simple Two Column Layout&lt;\/dt&gt;\n            &lt;dd&gt;Running time: 12:39&lt;\/dd&gt;\n            &lt;dd&gt;Forcing multiple columns to be of equal height is one of those tricky things in web design. In this screencast I'll show you a little trick around it. Instead of making the actual elements themselves equal height, we'll use a background image to \"fake\" the look of equal height columns.&lt;div class=\"clear\"&gt;&lt;\/div&gt;&lt;\/dd&gt;\n        &lt;\/dl&gt;\n\n        &lt;dl&gt;\n            &lt;dd class=\"thumbnail\"&gt;&lt;a href=\"\/video-screencasts\/4-forcing-scrollbars-eliminating-horizonatal-jumps\/\"&gt;&lt;img src=\"\/wp-content\/uploads\/2008\/11\/screencast-4-thumb.jpg\" alt=\"screencast 4\" \/&gt;&lt;\/a&gt;&lt;\/dd&gt;\n            &lt;dt&gt;&lt;span&gt;#4&lt;\/span&gt;: Forcing Scrollbars: Eliminating \"Horizontal Jumps\"&lt;\/dt&gt;\n\n            &lt;dd&gt;Running time: 7:08&lt;\/dd&gt;\n            &lt;dd&gt;In this screencast I talk about how to force vertical scrollbars onto websites. Without doing this, pages with centered content can appear to \"jump\" to the left or right when going from a page that needs to vertically scroll to one that does not (and visa versa). I cover two different major techniques for doing this, since they both have their advantages and disadvantages between different browsers.&lt;div class=\"clear\"&gt;&lt;\/div&gt;&lt;\/dd&gt;\n        &lt;\/dl&gt;\n\n        &lt;dl&gt;\n            &lt;dd class=\"thumbnail\"&gt;&lt;a href=\"\/video-screencasts\/3-converting-a-photoshop-mockup-part-3-of-3\/\"&gt;&lt;img src=\"\/wp-content\/uploads\/2008\/11\/screencast-3-thumb.jpg\" \/&gt;&lt;\/a&gt;&lt;\/dd&gt;\n            &lt;dt&gt;&lt;span&gt;#3&lt;\/span&gt;: Converting a Photoshop Mockup (part 3 of 3)&lt;\/dt&gt;\n            &lt;dd&gt;Running time: 31:53&lt;\/dd&gt;\n            &lt;dd&gt;I finish up the design in part three of this series on coverting an Adobe Photoshop website mockup into an actual HTML\/CSS website. This one focuses on the main content area. I create the the columns including the \"quick links\" section. I also talk a little bit about typography.&lt;div class=\"clear\"&gt;&lt;\/div&gt;&lt;\/dd&gt;\n        &lt;\/dl&gt;\n\n        &lt;dl&gt;\n            &lt;dd class=\"thumbnail\"&gt;&lt;a href=\"\/video-screencasts\/2-converting-a-photoshop-mockup-part-2-of-3\/\"&gt;&lt;img src=\"\/wp-content\/uploads\/2008\/11\/screencast-2-thumb.jpg\" alt=\"screencast 2\" \/&gt;&lt;\/a&gt;&lt;\/dd&gt;\n            &lt;dt&gt;&lt;span&gt;#2&lt;\/span&gt;: Converting a Photoshop Mockup (part 2 of 3)&lt;\/dt&gt;\n            &lt;dd&gt;Running time: 17:10&lt;\/dd&gt;\n            &lt;dd&gt;In part two of this series on converting a Photoshop mockup to an HTML\/CSS Website I continue on with the header\/menu section of the site. I change the way in which the site is centered when I decide to wrap the entire site in a page-wrap div instead of centering each major page element. Then I plug in some \"filler\" content for the main area before I end with building the footer.&lt;div class=\"clear\"&gt;&lt;\/div&gt;&lt;\/dd&gt;<\/code><\/pre>\n<\/dl>\n
\n
\"screencast<\/a><\/dd>\n
#1<\/span>: Converting a Photoshop Mockup (part 1 of 3)<\/dt>\n
Running time: 10:10<\/dd>\n
In this first-ever video podcast, I start the conversion process of an Adobe Photoshop mockup of a website, into a real live CSS based website. This is pretty rough here folks, I’m sure these will get more focused with time. Please let me have it with criticisms at my contact page<\/a>.<\/p>\n
<\/div>\n<\/dd>\n<\/dl>\n","protected":false},"excerpt":{"rendered":"
#20: Introduction to jQuery Running time: 18:12 The popular javascript library jQuery is an amazing way to extend the design […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"video-archive.php","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"tags":[],"acf":[],"share_on_mastodon":{"url":"","error":""},"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3157"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=3157"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3157\/revisions"}],"predecessor-version":[{"id":379009,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3157\/revisions\/379009"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=3157"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=3157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}