Sketching
with CSS

What you will get out of this ebook:

  • Blow away your clients with your fast turnaround time.
  • Bend CSS layouts to your will.
  • Show your clients comps they can actually click on.
  • Get started quickly without reading five more programming books.
Get the ebooklearn more

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

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 that you didn't think of before.
How to use CSS combinators to style elements with surgical precision.
How Chrome's developer tools can save you hours of debugging time.
And many, many more.

Pricing

"You explain a lot of things that are for some reason, overlooked and assumed. That is what I love about the book. The topics are not over-explained, they are not complicated." - Laurel Natale

Book + code

$ 39
  • 232 pages PDF
  • includes ePub version
  • Commented HTML and CSS
Add to cart

Book + code + videos

$ 99
  • Screencasts covering
    core concepts in the book.
  • Cheat sheets for Git,
    Flexbox, Advanced CSS
    selectors and CSS3 effects
  • Half of the video interviews
    with expert web designers
Add to cart

Complete package

$ 249
  • 2h+ of screencasts as
    companion material
    for each chapter
  • The Illustrated Guide
    to Front-End Development
    by Brian Franco.
  • All of the video interviews
    with expert
    web designers
  • Unlimited Users
Add to cart


Get the table of contents here (PDF)

Video interviews for the
book + code + videos package

The screencasts in this package cover core concepts like Git, Flexbox, Chrome's developer tools and how to build your own grid system. The four expert interviews were selected to cover a wide variety of topics and areas of expertise.

The complete package also includes video interviews from Nathan Barry, Aaron Gustafson, Jen Myers, and Nick Disabato.
Chris runs CSS-Tricks.com and founded Codepen.io. Learn how he got started with web development and what tools he uses.
Chris CoyierCSS-Tricks & Codepen
As Sacha started developing his own products he taught himself web development. Knowing code is more efficient and gives him more control over the final outcome.
Sacha GreifSidebar.io
Learn why and how you should tightly integrate Photoshop into your coding workflow.
Jarrod DrysdaleStudio Fellow
Start coding as soon as possible. Keep your toolchain simple. And yes, responsive designs should make you cry a little.
Trent WaltonParavel & DayTrip

Testimonials

Who can shape the trust and career of a karma if he has the true fear of the explosion of the shame. Antonio Moton
This book is a must read for designers. Jarrod Drysdale
I can’t thank you enough, your book finally got me using git through the command line! How did I work without this before? no clue. Ivan Bruyako

Frequently asked questions

What's with all the Photoshop bashing?

Photoshop is powerful tool, but it's just not built for web design. On the other hand CSS3 is awesome, but you still need a tool for creating images. So even if you're designing in the browser, Photoshop will still be part of your workflow.

Who is this book for?

This book is for web designers, not front-end developers. So you don't need to be an expert or even close. But I will assume you have a working knowledge of CSS and HTML. If you have no experience with CSS and HTML then this book is not for you.

But this stuff doesn't work in IE7

Is a PSD cross-browser compatible? Of course not, but it doesn't matter because it's not the final product. In this book you'll be working on a design deliverable, not the final product. You'll create code that will work in a modern browser, and that's good enough. But yes, it's true, this won't work if your client can't download Chrome.

Who wrote this book

Sean Fioritto is a front-end developer based in Chicago. He has written for Smashing Magazine and created a few, cool open source projects.
Sean was our go-to guy for any JavaScript or CSS questions
Erik Hope, Engineer at Dropbox, Cofounder of Riot9
Sean has a knack for finding what business people actually want and then creating great solutions. Bill Maclean, Vice President of Architecture at Simplement