The First Website I Built

· 6 mins read Edit Post
The first ever website I created and how I tried to improve it.

Amazing Tees

January 2013 I made my first website. It was simple. It only had one job. That job, was to design and print t-shirts.

The website

The website was submitted as part of my Computer Science University first year module Web Programming and Scripting in 2012-2013.

I received 86.5% for the coursework (a first) - the marker must’ve enjoyed my use of the default css color: pink.

Improving it

I decided to improve it and see what I have learnt after 4 years and 1.1 million lines of code later.

Step 1. Move to HTML5

Out with HTML4

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <script type="text/javascript"></script>

  <link href="css/shop.css" rel="stylesheet" type="text/css">
</head>
</html>

In with HTML5

<!doctype html>
<html>
<head>
  <script></script>

  <link href="css/shop.css" rel="stylesheet">
</head>
</html>

Step 2. Indentation

Reformatting indentation so it all looks the same surprisingly makes a difference with code readability.

For example:

<form action="index.html" >
<p><input type="submit" value="Place order" onClick="makeorder"></p>

Looks much better like:

<form action="index.html">
<p>
  <input type="submit" value="Place order" onClick="makeorder">
</p>

Step 3. Separate JS from HTML

The site had all of its JavaScript files in <script> tags in the HTML. I moved these to their own separate file.

<script src="js/main.js"></script>

Step 4. Move from CSS to SASS

CSS preprocessors give so many more additions to CSS, such as variables, nesting and functions. I renamed shop.css to main.scss and set it up to process to main.css. This was processed using CodeKit.

<link href="css/main.css" rel="stylesheet">

Step 5. Minify CSS and JS

Compressing your javascript and css decreases load time of your site. I used an application called CodeKit to minify this process.

<link href="css/main.css" rel="stylesheet">
<script src="js/main.min.js"></script>

Minified CSS

/* main.css */
body{background-color:#E0E0F0;font-family:Arial;font-size:15px}#container{margin:auto;width:80%;min-width:1000px;color:#000;background-color:#FFF;border:2px double #000}#header{border-bottom:2px double #000;text-align:center;color:#000}#leftcolumn{padding:10px;float:left;position:relative}#righ.....

Minified JavaScript

// main.min.js
function printShirt(){var e=document.getElementById("colourList");document.getElementById("tShirt").style.backgroundColor=e.options[e.selectedIndex].value,"null"!=document.getElementById("pictureList").value?(document.getElementById("pic").src=document.getElementById("pictureList").value,document.getElementById("pic").style.visibility="visible"):document.getElementById("pic").style.visibility="hidden";var t=document.getElementById("shirtText");t.innerHTML=document.getElementById("shirtTextBox")...

Step 6. Move to CSS classes (from ids)

Before the code was littered with ids for styling.

  <div id="container">
    <div id="header">
      <h3>Amazing Tees</h3>
    </div>
    ...

Ids were changed into classes and tags to make the code look more semantic.

  <div class="wrapper">
    <header>
        <h3>Amazing a Tees</h3>
    </header>

Step 7. Used SCSS variables rather than hard coded colors

Before:

body {
  background-color: #E0E0F0;
}

After:

$colour-background: #e0e0f0;

body {
  background-color: $colour-background;

Notice also the change from an uppercase color hexcode to lowercase.

Step 8. Use PHP Templating

The website used PHP, so to make the most out of it, I used templating to separate the header and footer into 2 files that can be referenced on every page.

<!-- index.php -->
<body>
   <?php @include 'templates/header.php' ?>

   ...

   <?php @include 'templates/footer.php' ?>
</body>

Step 9. Remove <table>

Table elements were used too much on this site, possibly because I didn’t know how to center elements using CSS.

  <table summary="Shirt text">
      <tr>
          <td>
              <p class="shirtText" id="shirtText">Harrys Shirt</p>
          </td>
      </tr>
  </table>

After:

  <p class="shirttext" id="js-shirt-text">Harrys Shirt</p>

Notice how the id changed from shirtText to js-shirt-text. This highlights what elements are used in javascript for manipulation.

Step 10. Colors and alignment

Updated alignment of text boxes and updated colors.

The changed website

Step 11. Optimised images

None of the images used had been optimised. This Apple logo was reduced a lot, reducing load times.

The changed website

Step 12. Removed inline CSS

Before:

<img height="250px;" width="300px;" class="tShirt" id="js-tShirt" name="tShirt" style="background:url(img/tShirt.png)">

After:

<img class="tShirt" id="js-tShirt" src="img/tee-outline.png" height="250" width="300">

Demo

There were so many things I spotted to easily change about this site. It is interesting to come back to my first website I created and improve it.

There are so many more steps to improve this site, such as making it responsive, improving the padding for some labels, styling the final order box and much more.

The final changed website

I normally host my side projects on GitHub pages, but because it doesn’t support PHP, I decided to host it on Heroku for people to see.

Demo: https://harrymt-wps.herokuapp.com/

Source code: https://github.com/harrymt/WPS

Suggested

return home