Tutorials on Web Design
Video Screencasts
- #107: LiveReload, a Menu Bar App for Preprocessors and Speedy Developement
- Running time: 10:59
- LiveReload is a menu bar app for the Mac that watches folders for you and preprocesses the files for you, then reloads the browser window for you, speeding up development.
- #106: Use BrowserStack for Live Web-Based Cross Browser Testing
- Running time: 7:35
- BrowserStack is the holy grail of cross-browser testing. Test in real live interactive browsers. Your own virtual machine pumped right through the web for you to see and use.
- #105: Using SpriteCow
- Running time: 21:46
- An example of creating your own sprite image and using SpriteCow to help with the CSS.
- #104: Quick Tip: Use Dropbox to Make a Public URL for Anything
- Running time: 1:57
- Even if you are developing locally, or working on a site that is otherwise not public, you can get a quick public URL for it by saving it out from the browser and chucking those files into your public Dropbox folder.
- #103: Integrating FitVids.js into WordPress
- Running time: 20:58
- Generally, fluid width designs don't handle embedded video very well, especially videos from popular sharing sites like YouTube where the copy and paste code specifies exact pixel sizes. In this video we use the jQuery plugin FitVids.js to fix that.
- #102: Braindump on Responsive Web Design
- Running time: 25:50
- In which I show and explain the very basics of what "responsive web design" has come to mean. Then I go all over the place and show examples, related resources, relevant people, tips and tricks, and more.
- #101: Let’s Suck at GitHub Together
- Running time: 18:25
- Even a couple of dopes like us can manage to get a project onto GitHub. And that's most of the battle. Once it's there, there are all sorts of advantages.
- #100: Let’s Write Semantic Markup
- Running time: 01:02:07
- We look at a Photoshop design and write HTML5 markup that describes it as semantically as we can.
- #99: Overview of HTML5 Forms Types, Attributes, and Elements
- Running time: 38:33
- We'll talk about the new features of HTML5 that relate to making online forms better, specifically the new attributes, types, and elements.
- #98: Playing with Body Borders
- Running time: 23:13
- We create a border that runs all around the browser window. It stays in place when the page scrolls and doesn't interfere with the content (on any browser or device).
- #97: Intro to CSS Animations
- Running time: 30:50
- We work our way through building a little animated scene wherein we learn how to work with CSS animations, the syntax and values used, and how they differ from transitions.
- #96: localStorage for Forms
- Running time: 26:31
- localStorage is super easy and useful for progressive enhancement style features. Learn how to test for it, then use it to save form data.
- #95: A Tale of Border Gradients
- Running time: 20:36
- Going through a bunch of ways to put a fade-out gradient border around an element. Possibly a not-so-obvious task.
- #94: Intro to Pseudo Elements
- Running time: 18:37
- Add elements to the page without changing the markup. A semantic designers dream.
- #93: CSS3 Slideup Boxes
- Running time: 18:27
- CSS3 transitions are used to make these cool boxes where, on hover, more information slides up into place.
- #92: Code Walkthrough of Drawing Table
- Running time: 34:19
- Look at each feature of a mini one-page jQuery-based app and see the markup and JavaScript that makes that feature work.
- #91: The WordPress Loop
- Running time: 31:15
- Learn about how the loop works. Write your own queries. Run multiple loops. Implement your own pagination, and more.
- #90: Simple TextMate Tips
- Running time: 20:52
- Doing things in TextMate like mass indenting, mass coding, vertical text selection, and using time-saving bundles like zen coding and the minimal bundles.
- #89: Organizing a Photoshop Document
- Running time: 19:09
- Take a Photoshop document with a mess of layers and apply better layer names, nest things in folders, and more.
- #88: Intro to Compass/Sass
- Running time: 29:28
- Watch me do the very basics of setting up a new project in Compass/Sass and see how it works/what it does.
- #87: Moving Up with MAMP
- Running time: 23:30
- We take a WordPress installation that is running locally with MAMP and move it to a live website.
- #86: First Moments with MAMP
- Running time: 11:38
- With MAMP, you can run all the server side technologies you need to (PHP, MySQL, Apache) locally, so you can develop locally before pushing out to a real web server.
- #85: Best Practices with Dynamic Content
- Running time: 31:00
- With a page utilizing AJAX to replace the main content there are some important considerations. I go through some of what I consider to be best practices in this video.
- #84: Site Walkthrough of chris-mcgarry.com
- Running time: 36:50
- A walkthrough of the code for a site I built for a musician friend of mine. The music keeps playing as your click around the site, because the page never reloads, just animates parts around via jQuery.
- #83: Thoughts on SEO
- Running time: 39:46
- Sometimes SEO makes sense. Make great content, mark it up well, follow other general best practices, do well. Other times it seems you can do everything right and still do poorly. Who knows.
- #82: CSS Image Switcher
- Running time: 12:20
- Using z-index and absolute positioning we can create an "image switcher" with no JavaScript at all.
- #81: AJAXing a WordPress Theme
- Running time: 42:23
- All "internal" links are targeted and when clicked, replace the main content area with the link destinations content without page refresh.