After publishing my last post
Update (April 13, 2015): Since publishing this post back in January, I've joined
The leaps and bounds we've made on the web in the past five years are incredible. The Internet of 2010 is hardly recognizable. Everything is dynamic. And sites like
So naturally, I've wanted to learn to build websites for years. And this is how the process went every time I tried to start:
1. Start from the very beginning of Codeacademy. Spend an hour or two learning how to type Hello World, and then how to centre it on a page, and then how to make it a different colour.
2. Begin losing my sanity when both a) the instructions aren't clear enough for someone with zero coding experience, and b) the tasks are so menial I don't even want to do them anyway.
3. Rationalize why my time is better spent doing "business stuff" and hiring someone else to build a site. Close Codeacademy and go for a walk.
I went through this exact process two or three times in the past couple of years and didn't learn a thing. But then this September, I finally tried something different. And it worked like a charm. This is my process.
I can't take credit for applying such intense pressure deliberately, because it was a complete accident. But looking at how I built Yore Oyster in retrospect, I see how important it was to have pressure applied throughout the entire process.
I agree with most of what Pieter says, but it's worth noting that I think
I recommend putting $10 into it to test out the service - you can pause and restart your subscription at any time, so if you're not using it, just click Pause so you're not paying every month. Easy. (I also use photos from
To host my site, I picked up a
Before I had even heard of Linode, though, I actually jumped between a few different hosting platforms. When I started out with simple Wordpress sites, I used GoDaddy because it was recommended for complete newbs. Realizing that I wanted to build my own sites from scratch, I moved to Amazon Web Services, but quickly discovered they have a horrible interface with costs that increase with site traffic. Of course, I want my site to be scalable relative to cost (costs can't increase with site traffic), so I moved to Linode. I've got six websites currently hosted on a single Linode for $10/month and they work like a charm. I don't think I'll ever change servers - Linode is THAT good.
Their customer support is also AMAZING. In the early days I crashed Yore Oyster multiple times, including once on launch day when there were several hundred people trying to access the broken site every minute.
I was stressing hard.
But the engineers in the Linode support room walked me through my mistakes and got my website back up and running (support is free, of course.) I'm loyal to them forever, and I can't recommend Linode highly enough.
Once you have your server and local editor (WinSCP) together, though, the question becomes:
How do you just start coding?
As it turns out, I would learn a critical (and probably controversial) lesson here as well.
It's true. The fastest way you'll be able to ship something is by taking what others have already made and shaping it into what you need. And luckily, Google has developed the perfect ensemble to do exactly that: the Chrome Developer Tools.
In case you haven't seen how it works before, scroll up to the top of this page, right-click on the title How I Learned To Code (this only works in Google Chrome on a non-mobile device), and select Inspect Element. A window will pop up displaying the code behind the website; press F2 to edit the title, and type in whatever you like. Just like that, the website is yours.
This is how you can do fun things like this on virtually any webpage.
Now, what's even cooler is that I can copy the code behind Google into my own text file. And on more simplistic websites where security and intellectual property aren't so much of an issue, I can copy their entire website exactly onto my own domain.
I like to start my designs on paper to get a very rough idea of the shapes I'm looking for. Will I build in circles or squares? Will the focus be on photography or written information? Will the content or the white space dominate? I try to decide on these sort of meta questions before doing anything else to avoid wasting time.
Once I have a general framework in my mind, I spend a few minutes brainstorming other websites I've come across that may have the components I'm looking for. For example, the Oyster Chat homepage came to me from something I had seen months prior in the Find section of the Evernote homepage. I built my own iPhone mockup in PhotoShop, created a nice, soft gradient, and added some text in HTML to finish it off. I designed the entire Oyster Chat homepage in just a couple of hours.
The examples don't stop there, either. I've followed the leads of Maptia and Medium very closely to develop various blog templates. I've studied Dropbox and Evernote to see how they create business case studies (coming soon to Yore Oyster). And I've looked at the code behind countless websites featured on
This is the stage I'm at right now. While I was building the first iteration of Yore Oyster, each page was relatively static. Some of my fonts were hard-coded in, which meant that if I ever wanted to change how a font looked on a page, I'd have to change it in a dozen or more places. Talk about inefficiency.
So an early lesson I learned was the importance of building external CSS files, since a single change in one CSS file impacts every page across your entire site. (CSS stands for cascading style sheets, which sounds complicated but really just means that anything to do with how the website looks visually is done with CSS. Fonts, colours, buttons, images, margins, etc. are all built using CSS.) The relationship between HTML and CSS can be illustrated through the metaphor of a restaurant.
HTML is the patrons in the restaurant: each page (patron) is different, but they all have the same fundamental properties (they are hungry, they eat using the same utensils, etc.) CSS is the waiter: it serves the requests that each patron makes. Restaurants make money because a single waiter attends to many different patrons, just like a single CSS file serves an entire website's worth of pages. It's inefficient to have a waiter for each patron, just as it's inefficient to have CSS properties hard-coded into your HTML.
Don't make the mistake I did and get lazy from the very start by hard-coding CSS into your HTML. Do it the right way from the start, or you'll lose your mind later on when you have to spend 10x the amount of time fixing the shortcuts you took at the beginning.
GoDaddy often runs promotions to get a domain for $1-2 for a year, but what they don't tell you is that after that first promotional year is over, the price jumps to something like $30/year, which is way more than the market dictates. I use Google Domains now, and I get all of my .coms for $12/year including private WHOIS information (important) and domain-specific email. Their support is great as well, so this is a no-brainer for me now - every domain I buy is through Google Domains. (They're in a private beta right now, so tweet at me for an invitation code.)
I've deliberately made all of my code public so you can play with it on your new
Here's how to get started on building a website RIGHT NOW:
1. Get a
4. Follow two Linode tutorials:
5. Go to