Sketching with CSS – Sean Fioritto

Your HTML/CSS editor: where creativity goes to die

These days it seems as if all the awesome people in the industry design in the browser. But you know what? It’s hard to get in the flow when you are coding. Designs turn out blocky and bland.

It feels like the only way to master HTML and CSS is to spend years bashing your head into your keyboard while wrestling with floats and clearing divs in obscure browsers.

It’s hard to be creative in the browser because there is a huge wall of technical nonsense between the design in your head and the browser.

So you run right back into the open and waiting arms of your old friend, Photoshop.

Have you ever wanted to strangle Photoshop with your bare hands?

• You do everything twice. Once you’re done creating your pixel perfect mockup in Photoshop, it’s time to do it all again in the browser.
• Typography is a @$#%$! joke. Trying new fonts in Photoshop is like making the leaves of a tree green by painting each one by hand. Photoshop wastes your time.
• Your clients can’t click on it. Ever had a client ask you why they can’t click on a Photoshop mockup? You can’t blame them. This is the web, they should be able to click on stuff.
• Photoshop comps don’t move. You can’t demonstrate hover effects, transitions and animations with a PSD.
• They don’t flow either. You can’t see what a design is going to look like on different screens without mocking up every, single resolution you want to see.

Or you could skip all of that and learn only what you need to know to get your job done as a designer

Here’s what’s in the book

• How to use the new flexbox module to get exactly the layout you want.
• How to use Sass to make cross-site changes with one line of code.
• How Git can free you to try wild, new design directions.
• How to use CSS combinators to style elements with surgical precision.
• How Chrome’s developer tools can save you hours of debugging time.
• And more.