Development Log

UP886960's development throughout the WebF1 Unit

Week 1

Unit Introduction

Successfully logged into my VM. Password changed and logged out. Read through the coursework documents and noted the deadline dates. Began looking for flawed websites.

Week 2

Security lecture with Nick Savage

Social engineering to gain access to accounts without any need for code.

Social Engineering Techniques:

  • Phishing, impersonation
  • Physical Access
  • Shoulder surfing
  • Dumpster diving
  • Fake software ie. trojans

Week 3

Introduction to writing Literature Reviews

The breakdown of a Literature Review:

  1. Literature (Noun): The writings dealing with a particular subject.
  2. Review (Noun): A formal evaluation of something.
  3. Paper (Noun): A formal written report covering a piece of academic research.

The University provided a PDF explaining how to produce a well written paper: How to Read a Paper

The Do's and Don'ts of Reviewing Literature by Rich Boakes

Week 4

The Key Academic Writing

Academic writing is formal, so slang or 'casual' language should not be used. You should build on the work completed by others. Some level of caution should be taken - avoid using words such as 'should', 'ought' and 'must'. Your writing must be succinct (brief and clearly expressed). And finally, your writing should be impersonal, using the third person.

Academic Writing Acronym (FOCSI)

Week 5

Introduction to Markup

We were introduced to head, body, paragraph and title tags:

<!doctype html>

<title>Darth Vader</title>

<h1>Darth Vader</h1>

<p>Hello Tatooine</p>

Uploaded this to the VM using WinSCP

Week 6

Seperating form and content

  • The star wars live crawl
  • Getting started with CSS
  • CSS (Cascading Style Sheets) files are linked to HTML documents and provide custom styling on top of HTML content. Each HTML element can be customised and manipulated using CSS.

<link rel="stylesheet" title="My Style" href="style.css">

Week 7

Productivity and Efficiency

An introduction into each of the different available HTML text editors (Brackets, Atom, Eclipse etc..). It is very important to maximise efficiency during development.. Learning shortcuts, using templates for elements etc. Maximising the potential of your text editor is essential to being an efficient developer.

Installing packages such as Beautify will format HTML text into a neat and professional looking format. Installing live preview packages will give instant feedback to small css changes for example.

Atom HTML Live Preview Package

Week 8


“Design is the application of intent - the opposite of happenstance, and an antidote to accident.” - Robert L. Peters

The Model View Controller ‘design pattern’ provides us with a useful way of analysing a design (noun), or separating the design (verb) process.

Model View Controller Diagram

Week 9

Using images

HTML Image Code

Week 10

Addressing the Web

How are different parts of the web addressed..? With URLs.

  • Breakdown of a URL (Uniform Resource Locator)
  • Schemes, Hostnames, DNS, Ports, Query Strings, Anchors etc.
  • There is an excellent page on MDN Web Docs with a graphical URL breakdown.

The HTML Anchor Tag

  • <a> Anchor tags are used to provide a link to another web resource.
  • <a> tags are supported by all modern browsers.
  • The href attribute specifically targets the resource to be linked to.
  • Source: W3schools

Week 11

Website Navigation Bar with CSS

A navigation bar allows easy passage through the pages of a website.

Using an ordered list (<ol>) to create a series of hyperlinks to other pages. Using CSS to remove the bullet points and to pad each list item. A <nav> tag is used to define the navigation element. The ordered list and list items sit within the nav tags. CSS will add button colours, hover colours etc.

.nav { background-color: #595959; color: #ffffff; list-style: none; text-align: center; padding: 20px 0 20px 0; margin: 0;}

Week 12

Christmas Break

Merry Christmas!

Week 13

Addressing the Web


A scheme identifies the format in which a request is sent: ftp:// http:// https://


Hostnames can be local or global. Every computer on the internet has a unique IP address. Global hostnames are translated to IP addresses using DNS.

DNS - Domain Name Service

The global record of domains to IP addresses.

  • .com (US or International)
  • .uk (UK, previously restricted to third level:
  • .de (Germany)
  • .name
  • .plumber


Computer services run on ports. There are over 65,000 ports available.

Port numbers under 1024 are reserved for specific services:

  • HTTP = 80
  • HTTPS = 443
  • SSH = 22
  • FTP = 21
  • SMTP = 25

Week 14

Website Marking Scheme

Checking that our websites comply with web Standards.

HTML & CSS Validator

W3C provides online validation tools to check HTML and CSS files.

Week 15

Web Standards

  1. De-facto /Industry standard - standards that are adopted in industry or by consumers.
  2. Industry groups - companies that come together to create a shared set of standards.
  3. Governments - British Standards Institution
  4. International - International Organisation for Standardisation (ISO)
  5. Standards require consensus, an agreement between several parties to follow the same rules.
  6. Open standards vs. Closed standards
  7. Royalty free - the standards can be used for free
  8. Reasonable and Non-Discriminatory - standards are licensed for reasonable fees.

Week 16


Poor UI can have serious consequences:

  • Three Mile Island
  • Air Inter 148
  • Qantas Air 32
  • Healthcare systems

Using responsive layouts is a huge UI design requirement. A responsive design ensures that web content is correctly displayed on a wide range of devices.

Usability Engineering Process Diagram

Week 17


Accessibility = Inclusion (Visual, Auditory, Mobility & Dexterity, Cognitive)


  • Colour - Not everyone can see the full range of colour
  • Web Crawlers - The google web crawler searches mobile sites before desktop sites
  • Web Content Accessibility Guidelines

Users have their own browser configuration settings, do not force different settings upon the user.

Website Peer Review Changelog


  • + Video subtitles
  • + Validation Links
  • + Extra advanced CSS selectors for similar elements
  • + Added ID selectors in my CSS
  • + General tidyness with HTML and CSS files


  • - Inefficient CSS
  • - All HTML validation errors