Videos tagged with CSS-Tricks

In part 3 of this series, we take the HTML and CSS that we have already created for this design, and convert it into a WordPress theme. We start with a completely “blank” WordPress theme, then take different parts of the HTML and put them where they need to be in the theme. We are careful to keep as much dynamic WordPress stuff in there as possible, for example, dynamically creating...

I’m busy, you’re busy, we’re all busy trying to meet deadlines and get things done in this crazy web world. I love learning new technologies when I can, but I’m the first to admit that I reach for tools that I already know well because I can be instantly productive that way. jQuery is one of those tools for me. In this screencast I walk through a website where I used jQu...

You’ll have to forgive me here folks, this isn’t a very constructive screencast. I was frustrated at the crappy checkout process for a software product I was trying, so I thought I’d screencast it as a lesson to us all on how not to design a checkout. It was confusing, frustrating, error-prone, and make me feel unsafe about even going through with the transaction. If you are d...

We build a pretty typical image gallery design pattern, a grid of images that pop up larger when clicked. But this image gallery page makes use of hot semantic HTML5 markup, loads of visual treats with CSS3 and jQuery, and made editable through the CMS PageLime. Quick reminder, the demo is awesome-est in a WebKit browser (Safari or Chrome).

In part 2 of this series, we begin the HTML/CSS conversion of the Photoshop mockup we created in part one. We start with a very skeletal project framework. Then we take a look at the Photoshop file layer organization. Then we start from the bottom up, creating the pieces we need from the Photoshop file and writing the HTML and CSS we need to get the job done. Much of the work isn’t actual...

This is the start of a three-part series on building a website. This will be a real website for a musician friend of mine, who’s website I happen to ruin during a routine WordPress upgrade. In part 1, we start from absolute scratch in Photoshop, with just a few provided resources from the client. We design the homepage and skin for the site, according to new needs that the client has, the...

I just randomly go through some little annoyances and gripes I have with everything from OS X to Photoshop to WordPress to CSS. I thought of about 5 more the second I was done, but I’ll spare you!

I got the invite from TypeKit, signed up, and had beautiful custom fonts rocking my page in just a few minutes. I’ll show you the entire process from start to finish, as well as touch on the advantages and disadvantages.

This video demonstrates the technique seen on the Think Geek 3.0 site. The bottom of the site has a design of a bunch of robots and as the screen is scrolled to the bottom, the color fades to black and the pattern turns into zombies. We recreate this from scratch with their graphics, and then flop them out for our own.

This video focuses on taking already existing idea and code and turning it into a jQuery plugin. In this case, it helps keep our code as semantic as it can be and with JavaScript off, degrades nicely. We cover the syntax of creating a plugin, show off the cool chain-ability of jQuery, and show how to make the plugin versatile and expandable.