When you think of a website, you think of WordPress nowadays. And why wouldn't you, WordPress runs 23% of all websites. With so many online ads claiming that you can learn to make a website in 3 weeks or your money back, it sounds like the easiest thing in the world to do. Campaigns like the "Hour Of Code" just make it a stronger point that anybody can make Facebook or Twitter or YouTube. But the obvious answer is, of course, that you won't be able to do those things. You'll be able to set up WordPress on a server, and that's probably about it.
The truth is anybody can make a website. And that's what makes it exciting. That's what makes "coding" something cool, because anybody can do it apparently. Here is an example.
<html>
<head>
<title>My awesome website</title>
</head>
<body>
this is a website
</body>
</html>
index.html
You bet that's a website. It doesn't do anything, but display some text, but it still counts. You can open it in a browser and amaze your non-technical friends. But this is kind of the same logic as saying that not all essays are novels. Anybody can write, sure. You take a piece of paper out and write the first thing that comes to mind, and you are a writer. But ask anybody that's written a novel, and you'll hear a different story.
Most websites, if not all, that you use daily are more along the line of the novel comparison. They're complex and have alot of moving parts. Most probably have multiple people working on it. Making a website isn't actually the fun part. Believe me, it just ain't. The fun part is coming up with the idea and designing the infrastructure. So today I'll be designing and implementing a website really quickly, so that someone out there interested in learning to "code" can see what actually goes into making their own website. There's surprisingly less code than what most people would believe.
Let's Make A Website
I'll pick a blog for this example, because it sounds easy enough, and I have some experience in that field. First thing is first, let's get a basic design going. We're going to have blog posts, each one will have a category that it belongs to, and an image associated with it, because let's make it look a little nice at least. Our home page will list all of our blog posts along with a category list to the right side. And just for fun we'll keep track of how many users have viewed our posts.
There. We have some of the basic components of a blog now. The look doesn't matter too much now, because you don't technically have an audience yet, so you have no idea what they like just yet. So this'll do.
Up next, we're going to need somewhere to store all of this data. A database makes the most sense, though technically, you could store it in a text file if you so wanted to.
This is the most basic of database schemas, just for this example, but it will handle what our design on top shows. It's pretty self-explanatory. The Post table will store all of the blog posts, while the category table will act as a lookup table and the postview table will be used to count the number of views we're getting per post.
So for me this is the fun part. Coming up with a design that expresses what I want it to express, and the infrastructure of how it works. Up next, we have to choose which technology we want to use. Obviously you'd go with the one that you're more comfortable with. It could be PHP, ASP.NET, Ruby on Rails or any of a large number of web languages.
Since I am a .NET developer I normally stick with that. WebMatrix is perfect for quick websites as it supports the .NET Framework, the Razor syntax and actually even PHP. A very cool and lightweight tool that you can grab from here.
Let's launch this puppy and create a basic starter template, which will handle all of the initial boilerplate code for us.
And we're almost done. Just kidding. I'll add a new stylesheet and a new cshtml webpage, which is where my posts will go. Rather than ramble on about it, here is the page in its entirety.
@{
var query = "select top 10 *, (SELECT COUNT(*) FROM PostView WHERE PostId = p.PostId) as Views from post p";
var db = Database.Open("blog");
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="styles/stylesheet.css">
</head>
<body>
<div class="header">this is the title</div>
<div class="posts">
@foreach(var row in db.Query(query))
{
<div class="post">
<div><img src="images/default.png" alt="sadfadsf"></div>
<div class="title">@row.Title</div>
<div class="views">@row.Views</div>
<div class="clear"></div>
</div>
}
</div>
<div class="right">
<div class="ad">
ad
</div>
<div class="categories">
categories
</div>
</div>
<div class="clear"></div>
</body>
</html>
This is as basic as code can get, and it gets the job done. The code block at the top of the page, opens up our database, whose schema I defined up above, and the rest of the page is pretty standard HTML. The heart of the code is highlighted for your viewing pleasure. Regardless of which programming language or framework you chose to build this in, the end result would be the same and the code would more than likely look the same too.
And the result is the following. It's almost a 1 to 1 with the design I had up above, so not too shabby.
And that's what it's really like to make a website. There's no "install this, then click next" unfortunately. I did it quickly, because I've done it several times already, and I'm familiar enough with Razor and WebMatrix to get it right on the first try usually. As I mentioned there is still days or weeks of work ahead in order to get this to be production ready.
The entire process involves prototyping, database normalization, knowledge of a language and a framework and many more things that you will learn throughout the years doing this job and unfortunately not through a 30 minute video for $9.99.
Walter Guevara is a software engineer, startup founder and currently teaches programming for a coding bootcamp. He is currently building things that don't yet exist.
Stay up to date
Sign up for my FREE newsletter. Get informed of the latest happenings in the programming world.