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.
Is it me or the video and the description do not match?
Oops sorry, fixed!
Yeah, this is the video for part #010.
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
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.
Oh cool, thanks!
Great videos so far! What tool are you using to have tabs on your finder window?
Total Finder
Awesome, thank you!
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!!!
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?
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.
What’s the shortcut to autocomplete the element in SublimeText2?
Command-shift-period
@Ryan
NO WAY! so Scout App won’t do this! i’ve been racking my brains on this for HOURS! damn!
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?
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.
If your looking for a windows CodeKit type program have a look at Prepros
for handling your SASS…
@Roy makes a great suggestion.
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