Analysis, Design, HTML/CSS Implementation, JavaScript Interactivity, Testing & Evaluation.

Analysis

End-User Requirements

What the users expect to do on the site.

e.g., "Read about cycle racing", "Watch videos of races", "Register for newsletter".
Functional Requirements

What the website must do/process to meet user needs.

  • Content: Display images, Play video.
  • Navigation: Links to sub-pages/external sites.
  • Processes: Search facility, Form submission, Database query.

Design

Website Structure

Hierarchical diagram showing main topics and sub-topics.

Home Page
↓
Topic A | Topic B | Topic C

↓
Sub P1
↓
Sub P2
↓
Sub P3
Wireframes

Visual layout of a page. Must include:

  • Nav Bar: Consistent position.
  • Content Areas: Text, Images, Video.
  • Form Layouts: Input boxes, buttons.
  • Consistency: Header/Footer on every page.
Low-Fidelity Prototyping

Paper-based sketches used for early User Testing before code is written.

HTML Structure

Semantic elements for layout.

<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <header> Banner/Logo </header>

    <nav>
      <ul>
        <li><a href="page.html">Link</a></li>
      </ul>
    </nav>

    <main>
      <section>...</section>
      <div>...</div>
    </main>

    <footer> Copyright Info </footer>
  </body>
</html>

CSS Styling

Selectors
  • h1 { } // Element
  • .classname { } // Class (Multiple elements)
  • #idname { } // ID (Unique element)
  • nav ul li { } // Descendant
Grouping (Efficiency)
Inefficient
h1 { color: red; }
p { color: red; }
Efficient
h1, p {
 color: red;
}
Colours & Sizes
color: #ff0000; /* Hex */
background-color: rgb(255,0,0);
width: 50%; /* or px */
height: 100px;
Positioning
  • float: left/right; Moves element to side. Text wraps around.
  • clear: both; Stops elements floating next to this one.
  • display: block; Takes full width (starts new line).
  • display: inline; Takes only necessary width.
  • display: none; Hides element (used in JS).
Spacing
Margin
Space OUTSIDE
Padding
Space INSIDE
padding: 20px; /* All sides */
margin-bottom: 15px; /* One side */
margin: 0 auto; /* Center Horizontally */
Navigation Bar Styling
/* 1. Remove Bullets */
nav ul { list-style-type: none; }
/* 2. Horizontal */
nav ul li { float: left; }
/* 3. Clickable Box */
nav ul li a { display: block; padding: 10px; }
/* 4. Hover */
nav ul li a:hover { background-color: #ddd; }

Forms

<form>
  <!-- Text -->
  <input type="text" required maxlength="20">

  <!-- Number -->
  <input type="number" min="0" max="100">

  <!-- Single Choice -->
  <input type="radio" name="grp" value="A">
  <input type="radio" name="grp" value="B">

  <!-- Dropdown -->
  <select>
    <option>Option 1</option>
  </select>

  <textarea rows="4"></textarea>
  <input type="submit" value="Send">
</form>
Validation:
  • required: Field cannot be empty.
  • maxlength: Limit characters.
  • min/max: Limit number range.

JavaScript Events

Interactivity is triggered by events.

onmouseover

Triggered when mouse enters element.

onmouseover="this.style.width='300px'"
onmouseout

Triggered when mouse leaves element.

onmouseout="this.style.width='200px'"
onclick

Triggered when element is clicked.

JS Functions

// In <head> script
function changeColor() {
  document.getElementById("box").style.backgroundColor = "red";
}

// HTML Body
<div id="box" onclick="changeColor()">
  Click Me
</div>
Common Manipulations
  • .style.display='none' (Hide)
  • .style.display='block' (Show)
  • .src='new.jpg' (Image Swap/Rollover)

Test & Eval

Testing
  • Navigation: Check all links (internal/external). Check for orphans.
  • Media: Images load? Video plays in all browsers?
  • Forms: Does validation stop blank/invalid data?
  • Usability Testing: Observe users doing specific tasks (Personas/Scenarios).
Evaluation
Fitness for Purpose:
Does it meet the Functional Requirements? (Does it do what it should?)
Usability:
Does it meet the End-User Requirements? (Is it easy to use/learn?)