My biggest side project over the last few months has been building this web site. Here’s a quick overview of what I did, and some thoughts on the process.

##Background

If you had asked me a few months ago if I knew how to use HTML and CSS, I would have said “Defininately.” But, it turns out that what I actually meant was “Umm. Well, about a decade ago I learned how to create a really basic text document using HTML to create paragraphs and make some parts of the text bigger than others.”

Totally fine if you’re making tweaks inside some kind of web editor type thing, but far from being able to actually write code. Since I spend most of my time working around various types of technology, it seemed liked getting some fluency in the basics of the world wide web was an important project.

So, towards the end of last year, I decided to bite the bullet and learn how to build a simple website. I decided building a personal site was the right combination of being both useful and relatively straight forward.

##What I did

• Designed the site first: Before I waded into the land of code, I created a visual first draft of what I was building. My objectives were simple: I wanted a place to house my writing and give some basic professional background for folks who were interested (hi mom!). I didn’t need it to be fancy, but it needed to look decent.

  So, I made a simple mockup in Keynote. For me, that was the easiest way to play around with the design. But, a simple hand drawn sketch would have been fine too. The key thing was getting clear on how I wanted to the page to look, what the key elements were, etc.

• Learned some basic HTML and CSS: If you want to build a website, all the code you need is some basic HTML and CSS. I tried some of the online classes (General Assembly’s Dash program to be specific), but that format didn’t really work for me. It felt too much like paint by numbers kit.

  What did work for me was reading a text based tutorial (Shaw Howe’s is excellent). But, don’t just read it. Start building your site while you’re reading it. I found that after the first few chapters, I had a lot of what I wanted and switched from reading chapters to searching for specific content I wanted.

  His tutorial and some googling should give you everything you need to create a basic website. Tip: It turns out that all modern web browsers have really useful tools built into them. I highly recommend using them when you get stuck. I never found a great guide, but just start by right clicking on the part of your page that’s giving you a headache and selecting “inspect element” option. You’ll see what CSS is making it do what it’s doing, and you can even make changes to it in the browser. So helpful!

• Found a host: The next question is: how will I put these awesome files I just created on the internet? I recommend using Github’s personal pages. Github can be kinda confusing at first. I found that the easiest way to approach it was to download Github for Mac. Once you’ve created an account and downloaded the app, you’ll find it fairly easy to follow. Best of all–it’s totally free.

• Got a domain: Now that you’ve got a cool site, you’re probably going to want something that looks more polished than name.github.io, you’ll need to register a domain. I strongly recommend iwantmydomain.com. They make finding and buying a domain easy, but even better for my purposes: they let you set github pages up on your domain with just one click. No messing with DNS, etc. So, easy!

• Set up a blog: If you like to write and want to put those words on the internet, a personal blog is a great idea. There are a few ways to do this. For a long time, I mostly just used Tumblr for personal stuff and Medium for pieces that might have more general interest. That works great. They’re both free and easy to use. You could pretty easily link to either/both of those from your site and keep things simple.

  If you want to get more complicated, I’d recommend thinking about Jekyll. It’s a stripped down CMS/blog platform build by one of the founders of Github. It’s open source, easy to tweak, and plays very nicely with Github Pages.

  I was pretty attached to building this whole site myself, so once I discovered Jekyll, I actually started over from scratch and rebuilt the whole thing within a Jekyll framework. That mostly meant wrapping my head around their file structure and few other basics, but it’s probably a topic for another post.

Those are the basic steps I took to pull this thing together. Playing around with things like javascript for a menu tray and metadata for optimized sharing ended up taking a ton of time, and I’m not totally sure I’d recommend them. But, I did learn a bunch in the process.

##Other resources & suggestions

• A good text editor makes writing code much easier. I used Sublime and liked it a lot, but it may be worth playing around with Github’s Atom as well. The key piece is that you find an editor that’s smart enough to figure out what language you’re writing code in, and color codes that for you. Sounds trivial, but it’s incredibly helpful when you’re getting started.

• At the beginning of a project like this, it’s worth spending a little bit of time reading about what makes for good web design. I found this article by Erik Kennedy to be particularly helpful.