Tag Archives: technology

Resources and thoughts on creating your first website

Some people are surprised to hear that I didn’t have any formal training in web design. I always get asked about how I first started learning to create websites, so I thought sharing my personal journey might be helpful.

I honestly think a beginner should start with a pure HTML site to start out, with PHP being the end goal. My own experience with Adobe products like Photoshop and Illustrator allowed me to use Dreamweaver as both a building and a learning tool. Adobe programs are very similar in the way they function, so that was the most comfortable for me. I worked through a Lynda.com tutorial that was specifically designed with a first website in mind.

Of course, not everyone is going to invest in a professional program like Dreamweaver if they don’t know anything about web design. In that case, I would recommend following the tutorials on Mozilla’s web technology documentation. It’s really easy to follow and understand, and you can do it all in a text editor like notebook or textedit. My advice would be to start with the HTML and CSS tutorials. After you’re comfortable with that, you should read up on FTP servers and hosting, because that’s what you’ll be using to actually put your site on the web.

The next step for me after I had a finished, pure-HTML website on the web was to convert it to a WordPress site. WordPress uses PHP, which is more flexible and (in my opinion) more professional than just using HTML. I also came across a more functional text editor called Submlime Text 2 and I highly recommend it over notepad or textedit.

For someone who’s interested in getting into web design, the best advice I can give it to just jump right in and learn as you go.

Choosing and Installing a CSS Preprocessor on Windows

I’ve finally decided to use a CSS Preprocessor to improve my web design workflow. I think the best way to learn what Preprocessors can even help you with is just by reading the comparison articles I’m linking in this post. I’d also not recommend using a CSS Preprocessor until you’ve coded CSS by hand (a lot) first. One thing that stops a lot of designers from using Preprocessors is the dreaded command line. It’s my personal opinion that, even as a visual designer, we need to understand and use the command line, in the same way that I think anyone who uses a computer should computer hardware. It’s just good to know these kinds of things. If you’ve never even opened the terminal on OS X before, The Designer’s Guide to the Command Line (OS X only) will be of great use to get up and running quickly.

If you’re like me, and you have both a Windows and OS X machine, then I’d strongly recommend learning how to use the OS X terminal and then installing Cygwin for Windows. It’s basically a terminal for Windows. Another neat thing is that since OS X and Linux are both Unix-like operating systems, once you’re comfortable using the terminal in one you can use it in the other!

Installing Cygwin on Windows is pretty straight forward. You run an .exe file and it does the rest. Just make sure when you get to the screen where you can choose extra packages that you choose ruby and git (that’s a whole ‘nother post. If you’re interested in CSS Preprocessors you’ll probably be interested in version control too, so you might as well). After Cygwin is installed you should install RubyGems, a package manager for the ruby programming language. Here’s how:

  1. Download the latest RubyGem package .tgz (or tarball, as they call it)
  2. Unzip it into a folder in your downloads folder.
  3. In the Cygwin terminal, navigate to the RubyGems folder in downloads directory. You will probably need to type something like this:

$ cd C:/Users/username/Downloads/RubyGem-versionnumber
Note: Type everything after the $

Now that you’re in the RubyGems folder, type this just to make sure you’re in the right place:

$ ls -la

If you see a file called setup.rb, you’re good! If you don’t see anything except another folder, keep cd’ing into it until you’re all the way in. Once you’re there, type:

$ ruby setup.rb install

If everything worked out you should now have RubyGems installed. As an aside, I’d also like to point out that instead of navigating to the directory that setup.rb was located in, you could have typed the entire path to setup.rb and it would have done the same thing. As a beginner, I find it easier sometimes to just locate the directory first.

The next step is to install your Preprocessor. But which one to choose? I chose SASS because searching for SASS vs. LESS (the two CSS Preprocessors I knew off the top of my head) revealed a nice comparison article from CSS-Tricks. That was enough to convince me, but I’ll probably end up trying LESS at some point too just so I’m able to pick up on a project that already uses it. If you’re still not sure, you can take a look at this Nettuts+ article comparing SASS, LESS, and Stylus.

Installing SASS once you have ruby and RubyGems is easy, simply type:

gem install sass

And there it is! In the next part of this series I will go through how to use SASS for the first time and introduce SASS’ popular helper: Compass.

Transcoding Zen

I possess the true Dharma eye, the marvelous mind of Nirvana, the true form of the formless, the subtle dharma gate that does not rest on words or letters but is a special transmission outside of the scriptures.

Just kidding. I don’t possess a Dharma eye. What I do possess, however, is a new-found understanding and appreciation of digital video. A Quick Guide to Digital Video Resolution and Aspect Ratio Conversions is a really good example of the bizarre things that have happened in this semi-transition from analog to digital. The Compressionist is a blog that serves as a nice starting point for anyone interested in DV basics, with an obvious focus on compression.