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. raik
    Permalink to comment#

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

  2. Flipo
    Permalink to comment#

    Yeah, this is the video for part #010.

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

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

    • zakkain
      Permalink to comment#

      Oh cool, thanks!

  4. Bryan Zavestoski
    Permalink to comment#

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

  5. 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. 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?

    • 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. Gary Armstrong
    Permalink to comment#

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

  8. 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. 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?

    • 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. Roy
    Permalink to comment#

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

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

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

We have a pretty good* newsletter.