How I Made This Site
8/5/2015
A friend of mine saw my site and was curious as to how I made it. Instead of just sending him the source and having him figure it out for himself, I decided that I'd explain my reasoning behind how I made the site, and perhaps even teach new web enthusiasts how to make their own site!
To begin, I suppose I need to answer a few questions, Firstly, why didn't I roll my own server for the site? Don't think I didn't consider setting up a Django environment and rolling a dynamic site, but then the thought popped in my mind is it really worth it? I mean, is it really worth going through all the setup just so I can have a slightly easier way of creating new blog post pages? I really didn't think so. For one, my landing page won't be updated very often, once every couple months perhaps? In addition, I'll be updating my blog about once every week or two. Since the site isn't going to be changing by the minute, why go to though the work of setting up a server and my site layout when I can just make the site layout? Let's just keep this simple, shall we?
Next, some folks asked about where it got my color scheme from. It is the Base 16 Eighties variant made by the talented Chris Kempson. I've modified a few colors, but it's the color scheme I use everywhere, from SublimeText to Terminal.
Anyway, let get to building this site!
The Landing Page
Building the landing page was pretty straight forward, the real difficulty came in finding a underlying theme for the site. I decided to go for a terminal/code based look, deciding to make headers look like comments and the data look like bits of code. Now that we have a look, lets begin making this thing!
First things first, let's get our basic HTML page layout going:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title id="titleTab">Tanishq Dubey</title>
<meta name="description" content="Tanishq Dubey's Per...">
<meta name="author" content="Tanishq Dubey">
<link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
...content here...
</body>
</html>
This snippet is the basis for almost all, if not all, of our pages. Let's quickly go through what this does:
<!doctype html> simply states that this is HTML5. In <html lang="en">, we explicitly state that our language is English, to avoid localization issues. Next, in our <head> tag, we do a few things, first we make sure our charset is utf-8. Next, we set the text to appear in our browser's tab in the <title> tag, and we set some descriptions about our site for search engines and parsers. Finally we set our CSS stylesheet in the <link rel="stylesheet" href="css/styles.css?v=1.0"> line, this sets our stylesheet's location to /css/styles.css. Now, we are ready to put our content in the <body> tag
The Body
To create the body, I simply divided the page, using the obvious <div> tag for each section, such as "General Information" or "Links". Within each <div>, there are two main sections, the header, and a <table>, which is what houses the information. Let's see how this looks:
<div id="infoSection">
<h2 id="sectionHeader"># General Information</h2>
<h2 id="sectionHeader">#------------------------------</h2>
<table>
<tr>
<td id="item">name</td>
<td id="colon">:</td>
<td id="value">Tanishq Dubey</td>
</tr>
<tr>
<td id="item">occupation</td>
<td id="colon">:</td>
<td id="value">Student at UIUC</td>
</tr>
<tr>
<td id="item">education</td>
<td id="colon">:</td>
<td id="value">BS in CE</td>
<td id="date">(in progress)</td>
</tr>
<tr>
<td id="item">location</td>
<td id="colon">:</td>
<td id="value">Chicago</td>
</tr>
</table>
</div>
Let's analyze what is being done here.
First the <div> defines this as a separate section of the page, notice that we also give this <div> an id="infoSection", this will come in handy when we want to style our page using CSS. Next, of course, is the actual heart of our data, the table in which it is stored!
Firstly, let's talk about how the <table> tag works. You have <tr> tags for every "Table Row" and then <td>, for every item in that table row. Hence, it becomes very simple to see how the data was aligned, I simply created a row for every field of information, and then populated each row with my information, easy! You might be asking, however, why give the "colon" its own table column? Simply put, I thought it looked better having all the colons aligned. Speaking of looks, notice how I gave similar item types the same ID, such as id="colon", or id="value". Again, we will use all of this when we do our CSS.
And that's it! That's all the thought that really went into the basic design of this page's block. Now it's just a matter of copy-pasting this <div> block for as many sections as I need. That's another thing I like about this kind of design; if you put thought into how it is made, you won't have to write much code or do much templating, by creating reusable sections, you really enable yourself to be more productive when it matters, and all it takes is a bit of forethought when initially planning.
The CSS
Now we can really delve into what makes, in my mind, website design really fun: the design of it.
Let's start by talking about what CSS, the language used to style a webpage is. CSS stands for Cascading Style Sheets and is a language used to essentially describe the formatting of any markup language, whether that be HTML or SVG.
How is this done? Simple, in our CSS file, we define tags which correspond to either the IDs we assigned in our HTML file or the portions of the HTML file, such as <div> or <td>. Now that we have the basics out of the way, let's get to it!
Remember that in our HTML file, we defined where we would be keeping our CSS Stylesheet for that HTML file with this line: <link rel="stylesheet" href="css/styles.css?v=1.0">. This line says that we will be keeping our CSS file in the css/styles.css file, so go ahead and make that folder and file.
Finally, we can start actually styling this page; let's begin by setting the background color of the whole page. Just as previously stated, we style by defining styling features for certain tags in our HTML. If we want to set the background color for the whole page, we need an ID that covers the whole page. The <html> tag does precisely this, since the whole page is contained within it. Now that we have figured out our tag, we just need a parameter to set our background. The nice thing about CSS is that most of the parameters or attributes are self-expanatory, so if we want to set our background we just use the background attribute with a color. Bringing all of this together, our CSS file now looks something like this:
html{
background: #2d2d2d;
}
Thats all it takes! Similarly we can set font size, font color, and even margins for our page, respectively, like this:
html{
background: #2d2d2d;
font-size: 16px
color: #f2f0ec;
margin: 20px;
}
Now that we have the basic design of the whole page, what if we want to style a specific part, such as changing the color of the "value" text in our tables. Just as we did with the <html>, we can do the same, but using our IDs this time. So if we wanted to change the text color of "value" text, we do this:
#value{
color: #123456
}
Just like our <html> style definition, we did the same for "value" except we put a # in front, which tells CSS that this is an ID, not a page element.
From here on out, it is a simple matter of defining elements and IDs in your CSS and styling them using various attributes.
Other Page Components and Styling
With all the information provided in the previous sections, you are armed with the knowledge to make your own static page, a great starting point for web-dev.
Now, I haven't covered every single portion of HTML or CSS because I feel that you learn so much more when you explore for yourself and learn through exploration. Nevertheless, I don't want to be completly unforgiving, so I'll do a couple things. Firstly, I will give the source to my page, which you can download, tear apart, and call your own. Secondly, I'll post a bunch of nice resources that you can use for your creating your own site, and who knows, I might post a little tutorial on creating a Django or Node.JS server in the future! Anyway, thanks for reading!