Categories
Journal Makings

How to build a one page personal website

Website Showcase

This is a walkthrough tutorial, with code examples on how to build this one-page website that you will be able to customise with a text-editor. I’ll also talk you through buying a domain name (http://example.com), web-hosting (where your website is stored), how to point yout domain to your web-host and upload your website.

I’ll make this as easy as I can and will assume you have no previous coding experience. You might want to bookmark this page because it’s quite long.

Ready? Let’s go.

Before you start building your website, you should have a clear vision of what you want on your website and how you want it to look. You can sketch something on a napkin or make it pretty in Photoshop. Either way, it’s a lot harder without some direction.

For the purpose of this tutorial and to keep it as useful as possible I’m going to keep it simple, but with enough room so you can play and make this your own website. Below will be the content I’m going to use for the website.

  • Profile photo
  • Name
  • Occupation
  • One line description
  • Available for hire light that you can switch on and off
  • Social Links – Twitter | Facebook | Flickr | Any Other Links

Text Editor

A text editor is to a developer what a sword is to a knight. Download Sublime Text 2. There are other text-editors out there, but this is my favourite. Click on the name of your computer’s operating system to download the right version.

Now you’ve got your editor, you’re ready to start coding.

We’re going to build a very simple vanity website. If you don’t want to hand type everything, I’ll give you all the files at the end of this article to download, then you’ll just need to open them in Sublime Text 2 and edit the areas you want to change, making sure not to break any of the code.

We’ll be building the website with HyperText Markup Language and a Cascading Style Sheet – more commonly known as HTML and CSS. These are the foundations for every website.

Setting up your HTML document.

Open Sublime Text 2 (ST2) and create a new document. The first thing we’ll want to do is declare the doctype, this simply tells the browser that’s reading the page what language the document is.

<!DOCTYPE html>

Below that we want to open and close the ‘html’ tags. We open a tag by typing its name in angled brackets and close them by adding a forward-slash, like this <html> Content goes inside </html>.

Now inside the <html> tags we need our <head> and <body>tags. Anything inside the head is read by the browser and will not appear on the screen. This is where we’ll tell the browser what the title of the page is, where to find our stylesheet (CSS) and any other information such as keywords and a description for the website.

If you’ve done everything correctly, your page will look like this:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

Now make a new folder called ‘website’ or whatever you want and save this file as index.html into it. The name index.html is important because it’s the first file that the browser will look for.

Setting up your CSS file.

This is really easy. Create a new file in ST2 and save it in the same folder you’ve just made with the name ‘stylesheet.css’ – you can call this file whatever you want as long as it ends with ‘.css’.

Some browsers add space called margin and padding when showing a website. To combat this atrocious act, we can say ‘Oi, browser, we want NO margin and NO padding added to the html or body of our website. We do this by putting this in out stylesheet as a kind of ‘reset’, so we know not to expect and random spacing issues.

html, body {
  margin: 0;
  padding: 0;
}

Done, now some explanation about CSS.

The stylesheet is what gives websites nice colours, fonts, layout and magical responsive powers. CSS is the presentation of a website and HTML is the content structure.

We can use the CSS to target any tag within our HTML document with ninja-like precision, for example, if we wanted to make the background of our entire website red, using the word ‘red’ or the hexadecimal code ‘#FF0000’, we could add this code:

body {
  background-color: red;
}

We can select a tag by declaring it’s name, then using the curly braces {} we can put our desired styles inside. Of course, this will only work after we tell the browser where to look for our stylesheet.

Titling the page and linking our HTML & CSS

Now would be a good time to put on some Barry White because we’re about to link these two up.

In our index.html page we want to add some code between the <head> tags. The first line will give our page a title that is seen usually in a tab at the top and the second line tells the browser where to look for the stylesheet:

<title>YOUR SITE TITLE HERE</title>
<link rel="stylesheet" type="text/CSS" href="stylesheet.css">

Meta data

Some meta data is kind of an outdated technology in some respects. The keyword and description meta tags used to provide useful information for search engines, but people abused their power so now it’s only really worth using the description meta tag as search engines like Google make this visible underneath the link to your website – this is just for humans and doesn’t provide and weight for search indexing.

But I’m old fashioned so I still like to add both the keyword and description meta tags as well as a tag to let the browser know our character set, UTF-8.

Add this within the head again and below the stylesheet:

<meta charset="UTF-8">
<meta name="description" content="My First Website">
<meta name="keywords" content="Portfolio,Web Design,Relevant Keywords">

Now to add a favicon. This is the little icon that appears next to the site’s title, usually in the tab above the website. We’ll need to create and save these images as .png and .ico – they should be placed in our folder website with the index.htmlstylesheet.css files.

<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="icon" type="image/png" href="favicon.png">

And lastly, we’ll set the viewport that helps the site display properly on other devices, and we’ll also call our Google Fonts that we’ll assign later in the stylesheet to make our text look nice.

<meta name="viewport" content="width=device-width, initial-scale=0.8">

<link href='http://fonts.googleapis.com/css?family=Quicksand:400,700|Pacifico' rel='stylesheet' type='text/css'>

This is all we need in the head section. Our index.html page should now look like this:

<!DOCTYPE html>
<html>
  <head>

    <title>YOUR SITE TITLE HERE</title>
    <link rel="stylesheet" type="text/CSS" href="stylesheet.css">

    <meta charset="UTF-8">
    <meta name="description" content="My First Website">
    <meta name="keywords" content="Portfolio,Web Design,Relevant Keywords">

    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="icon" type="image/png" href="favicon.png">

    <meta name="viewport" content="width=device-width, initial-scale=0.8">

    <link href='http://fonts.googleapis.com/css?family=Quicksand:400,700|Pacifico' rel='stylesheet' type='text/css'>

  </head>
  <body>
  </body>
</html>

Commenting your code

<!--This is an HTML comment -->
/* This is a CSS comment */

Comments are visible to humans within the code but will not be shown on a rendered website. This is so developers can leave notes for other developers whilst keeping everything in tact.
Each language has their own syntax for comments which involve notes being wrapped in certain characters.

I’ll be commenting the code so you know what each line does.

Adding Content

Navigate to the website folder and add a new folder inside called img. This is where we’ll store all of our images (except the favicons). Put your-image.jpg inside there. (I’m also going to put texture.png inside there, but this won’t be useful until later on. All images and files will be available to download at the end of the article.)

Let’s code our image into the body:

<img src="img/your-image.jpg" alt="Write a brief image description here" />

Now wrap your name with the header tag <h1> to let the browser know this is an important header. H1 is of most importance and the higher the number next to the ‘H’, the less important the title is.

<h1>Marcus Michaels</h1>

Occupation isn’t as important as the name so this is wrapped in the <h2> tag.

<h2>Maker of stuff</h2>

The <p> tag associated with ‘paragraph’ text. We’ll wrap our short bio with this.

<p>Marcus is super cool and mega fresh</p>

You’re doing good, so let’s up the game a bit.

A <div> is an empty tag that we can wrap around whatever we want. These become powerful when we assign ‘classes’ to them. We can target a class in stylesheet.css like this .available{}, so let’s add the class available to our <div>:

<div class="available">Available for hire</div>

We can change available to unavailable which will give whatever our div wraps a completely different appearance that we can set in stylesheet.css.

<div class="unavailable">Unavailable for hire</div>

For our social links, we’re going to add them into an unordered list <ul> and then list <li> each item inside.

<ul>
  <li>Twitter</li>
  <li>Dribbble</li>
  <li>GitHub</li>
</ul>

We want to make each word in our list a hyperlink so when it’s clicked, it directs the user to the relevant website. To do this we need to wrap the word, Twitter, for example in an anchor tag <a> and give it a URL destination and a Title. We also want the pages to open in a new tab so we’ll add target="_blank"

<ul>
  <li><a href="http://twitter.com/marcusmichaels" title="Follow Marcus on Twitter" target="_blank">Twitter</a></li>
  <li><a href="http://dribbble.com/marcusmichaels" title="See Marcus' Shots on Dribbble" target="_blank">Dribbble</a></li>
  <li><a href="http://github.com/marcusmichaels" title="View and contribute to Marcus' projects on GitHub" target="_blank">GitHub</a></li>
</ul>

The last bit we’re going to do in the HTML is to wrap everything we’ve just written in another <div> and give it the class ‘container’.

Your entire HTML page should now look like this:

<!DOCTYPE html>
<html>
  <head>

    <title>YOUR SITE TITLE HERE</title>
    <link rel="stylesheet" type="text/CSS" href="stylesheet.css">

    <meta charset="UTF-8">
    <meta name="description" content="My First Website">
    <meta name="keywords" content="Portfolio,Web Design,Relevant Keywords">

    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="icon" type="image/png" href="favicon.png">

    <meta name="viewport" content="width=device-width, initial-scale=0.8">

    <link href='http://fonts.googleapis.com/css?family=Quicksand:400,700|Pacifico' rel='stylesheet' type='text/css'>

  </head>
  <body>
   
    <div class="container">

      <img src="img/your-image.jpg" alt="Write a brief image description here" />
      
      <h1>Marcus Michaels</h1>
      
      <h2>Maker of stuff</h2>

      <p>Marcus is super cool and mega fresh</p>

      <div class="available">Available for hire</div>

      <ul>
        <li><a href="http://twitter.com/marcusmichaels" title="Follow Marcus on Twitter" target="_blank">Twitter</a></li>
        <li><a href="http://dribbble.com/marcusmichaels" title="See Marcus' Shots on Dribbble" target="_blank">Dribbble</a></li>
        <li><a href="http://github.com/marcusmichaels" title="View and contribute to Marcus' projects on GitHub" target="_blank">GitHub</a></li>
      </ul>

    </div>

  </body>
</html>

Save and open your index.html in the browser of your choice. This should be a case of just double clicking the file. It should have all your content in the right structure, but will look ugly.

index.html unstyled but structured

Make it pretty

CSS is a deep abyss of fascinating ways to manipulate your content to look exactly how you want and with CSS3 you can even animate it and change layout depending on screen size.

We’re not going to animate anything, but we are going to make our website look nice. Buckle up.

Open stylesheet.css and add the resets, like we did earlier, but targeting a few more selector tags.

/* Resets */
html, body, ul, li, h1, h2, p {
 margin: 0;
 padding: 0;
}

Now open up the body and give it a font-family, text color and background-image. We’ll also add -webkit-font-smoothing: antialiased; which makes text render nicer in modern browsers.

body {
 font-family: 'Quicksand', sans-serif;
 color: #2c3e50;
 background-image: url('img/texture.png');
 -webkit-font-smoothing: antialiased;
}

Select the container class by typing .container{}. We’re going to centre it in the middle of the page by using absolute positioning and we’ll also centre align all text within the container.

.container {
 position: absolute;
 top:50%;
 left:50%;
 width:400px; 
 margin: -220px 0 0 -200px; 
 text-align: center;
}

Remember our ninja-like precision? We can tell the browser to render every img that is inside an element with the class container as a circle at 40% of the width of the enclosing div

.container img { 
 max-width: 40%;
 border-radius: 50%;
}

We don’t want bullet-points on our li items and we don’t want them stacked on top of each other. We can change this and give them their own font so they stand out a bit nicer on the page.

li {
 display: inline;
 list-style: none;
 padding: 0 4px;
 font-family: 'Pacifico', monospace;
}

Links, by default have their own styling. They’re underlined and blue, then if they’re clicked on turn red and purple. It’s not ideal so it’s time to change the color, remove the text-decorationand make the font-size bigger.

a, a:visited {
 color:tomato;
 font-size: 20px;
 text-decoration: none;
}

It’s nice for styles to change when a user interacts with something clickable. We can change the color of our link whenever someone :hovers over it with their mouse.

a:hover {
 color: darkred;
}

Header tags are heavily weighted by default, but as our font has its own font-weight number, we’ll use that instead.

h1, h2 {
 font-weight: 700;
}

We want our h1 to be bigger than the h2, fix some margin spacing and make our h2 a lighter colour.

h1 {
 font-size: 32px;
 margin: 10px 0 0
}

h2 {
 font-size: 22px;
 color: #67809F;
}

Our description in the paragraph tags, on the whole is fine, but it’d be nice to have more space above and below the text. We can add 20px of padding above and below it, knowing that because we reset it earlier, it’ll look how we want.

p {
 padding: 20px 0;
}

Are we available for hire? Before we decide that, we’re going to style them both exactly the same and then add colours to each afterwards. If a class shares the same code, they can be grouped together so we don’t have to rewrite code.

.available, .unavailable {
 width: 60%;
 margin:10px auto 20px;
 border-radius: 3px;
 padding: 14px 0;
 font-style: italic; 
}

To make them look differently but still keeping the same general style, we can change the font color and background-color of each one.

.available {
 color: #fff;
 background-color: #2ecc71;
}

.unavailable {
 color: #999;
 background-color: #eee;
}

All together your stylesheet.css file should look like this (comments omitted):

html, body, ul, li, h1, h2, p {
 margin: 0;
 padding: 0;
}

body {
 font-family: 'Quicksand', sans-serif;
 color: #2c3e50;
 background-image: url('img/texture.png');
 -webkit-font-smoothing: antialiased;
}

.container {
 position: absolute;
 top:50%;
 left:50%;
 width:400px; 
 margin: -220px 0 0 -200px; 
 text-align: center;
}

.container img { 
 max-width: 40%;
 border-radius: 50%;
}

li {
 display: inline;
 list-style: none;
 padding: 0 4px;
 font-family: 'Pacifico', monospace;
}

a, a:visited {
 color:tomato;
 font-size: 20px;
 text-decoration: none;
}

a:hover {
 color: darkred;
}

h1, h2 {
 font-weight: 700;
}

h1 {
 font-size: 32px;
 margin: 10px 0 0
}

h2 {
 font-size: 22px;
 color: #67809F;
}

p {
 padding: 20px 0;
}

.available, .unavailable {
 width: 60%;
 margin:10px auto 20px;
 border-radius: 3px;
 padding: 14px 0;
}

.available {
 color: #fff;
 background-color: #2ecc71;
}

.unavailable {
 color: #999;
 background-color: #eee;
}

Save your stylesheet.css and open your index.html in a browser and let’s see how that looks.

Well hey, that looks pretty great! We’ve got all the information we need, who we are, what we do, are we available and how to connect with us.

Finished, styled website

As promised, if you didn’t fancy following along, something broke along the way or you just want to use the images I did, you can download my website folder below.

Download Source Files

View Online Demo

Buying a Domain Name and Web-Hosting

You have a nice website, but what good is a nice website if only you can see it on your computer? Let’s get you a domain name and some web hosting so you look professional.

A domain name is what you type in the address bar to get to a website, like http://google.com or https://marcusmichaels.com

There are countless domain and hosting providers. I personally use LCN.com for my domains as they’re fast, helpful and have a good user experience. Go there, type in the domain you want and if it’s available, buy it.

Now we need web-hosting. This is where you upload your files so others can see your website. I’m going to recommend LCN again as they have a fantastic birthday offer on at the moment where you get an entire year of hosting for just £1. Plus, being the same service, it’s really easy to point your domain to your web-host. LCN have a simple walkthrough to accomplish this.

Upload Your Website

You’ll need to download an FTP Client. FTP stands for File Transfer Protocol and it’s software that allows you to upload your files to your web-host.

Download FileZilla. Once that’s installed, this LCN article will tell you exactly how to connect and upload files to your web-hosting via FTP. (I told you they were helpful!).

And that’s it!

Congratulations!

The the proud over of a sweet looking website that anyone can access. Now all you need to do is share it. Tell your friends on Facebook and Twitter, print it on your business cards, tell your family – enjoy it. It’s yours.

If you enjoyed this walkthrough or have any questions, let me know in the comments below. And if you really enjoyed it, share it with others you think would enjoy this article.

Want to learn more about web development from much better teachers?

I use Treehouse, an online learning resource for all things code to stay current with web development and programming. I really can’t recommend it enough and it’ll take your skills to the next level. Plus, with 50% off your first month subscription, there’s no better time to give it a try.

Learn to code with Treehouse

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.