Sketching with CSS - Product Stars
Best products of September 2018

Sketching with CSS

Write css as fast as you can Sketch

Upvotes 12 PH Page >
Jonno Riekwel
Hunter
This is a product, right? :)
Nathan Bashaw
Definitely! Books are products

What you will get out of this book

  • 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.

This book is a must read for designers.Jarrod Drysdale

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.

Get a free chapter and a short video course all about flexbox

I learned more from just the sample chapter than everything else I’ve read.”Fredrik Søgaard

    • The Illustrated Guide to Front-End Development by Brian Franco.
    • Over 2 hours of hands-on screencasts created as companion material for each chapter
    • Commented HTML and CSS for the examples featured in the book, plus a few more.
    • Cheat sheets for Git, Flexbox, Advanced CSS selectors and CSS3 effects
    • All of the video interviews with expert web designers

    Video Interviews

    • Chris Coyier

      Chris Coyier— Chris runs CSS-Tricks.com and founded Codepen.io. Learn how he got started with web development and what tools he uses.

    • Sacha Greif

      Sacha Greif— 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.

    • Nathan Barry

      Nathan Barry— Knowing the limitations of the browser is crucial at the beginning of any web design project. The best tool for web design is a pen and paper.

    • Aaron Gustafson

      Aaron Gustafson— A close look at the workflow of a his well-known web design consultancy. How do developers and designers work together?

    • Jen Myers

      Jen Myers— It's important to start with the basics. Frameworks are amazing productivity boosters but only to the extent you understand how they work.

    • Jarrod Drysdale

      Jarrod Drysdale— Learn why and how you should tightly integrate Photoshop into your coding workflow.

    • Nick Disabato

      Nick Disabato— Find out why knowing how to code gives you a huge advantage when working with a frontend developer.

    • Trent Walton

      Trent Walton— Start coding as soon as possible. Keep your toolchain simple. And yes, responsive designs should make you cry a little.

    The Complete Package is packed with everything you need to go from the very beginning to designing in the browser like a pro. You get every interview with the experts and every topic in the book is covered with a screencast. You even get a second book, Brian Franco's beautiful, Illustrated Guide to Front-End Development.

    “Thank you for writing this book. You have no clue how much time you've saved me trying to figure this stuff out.” — Antonio Moton

  • The book and videos

    • 232 page PDF (also includes less pretty HTML and ePub formats). Download the table of contents here (PDF).
    • Carefuly selected screencasts covering core concepts in the book.
    • Commented HTML and CSS for the examples featured in the book, plus a few more.
    • Cheat sheets for Git, Flexbox, Advanced CSS selectors and CSS3 effects
    • Half of the video interviews with expert web designers
    • Video Interviews

      • Chris Coyier

        Chris Coyier— Chris runs CSS-Tricks.com and founded Codepen.io. Learn how he got started with web development and what tools he uses.

      • Sacha Greif

        Sacha Greif— 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.

      • Jarrod Drysdale

        Jarrod Drysdale— Learn why and how you should tightly integrate Photoshop into your coding workflow.

      • Trent Walton

        Trent Walton— Start coding as soon as possible. Keep your toolchain simple. And yes, responsive designs should make you cry a little.

      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.

      “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

    • The book plus code

      • 232 page PDF (also includes less pretty HTML and ePub formats). Download the table of contents here (PDF).
      • Commented HTML and CSS for the examples featured in the book, plus a few more.

      “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

    • The Complete Package for your entire team

      Includes everything in the complete package and a license for up to 10 people. Drop it on a shared drive/dropbox/whatever and let your team at it.

      More than 10 people? Email me: [email protected]

    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 is writing this book?

    Howdy, I'm Sean Fioritto. I'm a front-end developer based in Chicago.

    You can find me, @sfioritto, on Twitter and my blog is Planning for Aliens.

    Sean has a knack for finding what business people actually want and then creating great solutions.”

    Bill Maclean, Vice President of Architecture at Simplement