We certainly aren't "done" in Photoshop forever for this design, but we have enough to work from to get started creating this design in the browser. After all, this is a website we're building not a picture of a website (as they say).

We create a folder that will be home for this project and then manually create all the basic elements of a project: an index.html file, resource folders, and the like. We could have used the HTML5 Boilerplate, but decided that it would be best to write from scratch then go back and reference that to make sure we didn't miss anything in the future.

We set up CodeKit to watch our project folder. That way we can work in whatever preprocessor languages we want, among other cool things that CodeKit will do for us. CodeKit auto-injects newly compiled CSS for us directly into the browser, which is a huge speed helper during development.

We introduce the very basic concepts of Sass, which we'll be using throughout the project.

Comments

  1. User Avatar
    raik
    Permalink to comment#

    Is it me or the video and the description do not match?

  2. User Avatar
    Flipo
    Permalink to comment#

    Yeah, this is the video for part #010.

  3. User Avatar
    zakkain
    Permalink to comment#

    At any point in the screencasts do you go over what your Chrome extensions are, if they’re useful to this process? I’m dying to know what the cookie icon is! xD

    • User Avatar
      Chris Coyier
      Permalink to comment#

      That particular one is called Edit This Cookie and I mostly just use it for super easy access to clear cookies. I find myself having to do that at PayPal.com a lot if I’m getting a bunch of Bad Request errors.

    • User Avatar
      zakkain
      Permalink to comment#

      Oh cool, thanks!

  4. User Avatar
    Bryan Zavestoski
    Permalink to comment#

    Great videos so far! What tool are you using to have tabs on your finder window?

  5. User Avatar
    Seth Hall
    Permalink to comment#

    Yes, I use Total Finder as well. It was the cheapest version of third party finder apps. Although, it lags a bit here and there.

    Codekit rules too, big fan.

    Lots of ways to skin a cat, as they say.

    This screencast rules!!!

  6. User Avatar
    complexis
    Permalink to comment#

    What did you install to make it such that when you modify the CSS file, the website auto refreshes when you change the color of the background?

    • User Avatar
      Ryan
      Permalink to comment#

      He’s using CodeKit which is handling the SASS and also has that nice touch of instantly loading any changes it catches into the open Chrome window.

      This was my first view of CodeKit and I may toss my PC out the window just so I can move to Mac for that one app alone.

  7. User Avatar
    Gary Armstrong
    Permalink to comment#

    What’s the shortcut to autocomplete the element in SublimeText2?

  8. User Avatar
    Attila Hajzer
    Permalink to comment#

    @Ryan

    NO WAY! so Scout App won’t do this! i’ve been racking my brains on this for HOURS! damn!

  9. User Avatar
    Shakti Dash
    Permalink to comment#

    Hi Chris,

    Just signed up on Lodge and its been very helpful course for someone like me who’s started out fairly recent with front-end. I have been reading about Mixture (http://mixture.io/) these days and wanted to hear your thoughts about it? Any particular advantages that makes codekit a better tool?

    • User Avatar
      Chris Coyier
      Permalink to comment#

      I’ve heard nothing but good things. You can just go down the feature list and see what Mixture has that CodeKit doesnt. For instance, project scaffolding, built-in server, deployment… There are a few little things that CodeKit has that Mixture doesn’t, like Bourbon support and project settings via a .json file.

  10. User Avatar
    Roy
    Permalink to comment#

    If your looking for a windows CodeKit type program have a look at Prepros
    for handling your SASS…

  11. User Avatar
    Sino
    Permalink to comment#

    @Roy makes a great suggestion.

    If your looking for a windows CodeKit type program have a look at Prepros
    for handling your SASS…

    I just got Prepros for windows and it has most if not all features that Codekit has. There is even a setting to “Open Live Preview” (just be sure you have “Live Browser Refresh” checked off in General Options). Then watch your code alter the page in your browser automatically! Extremely pleased with Prepros right now =P

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag