## HTML Tags

- Headings — h1, h2, h3, h4 | `<h1>`  `<h2>`  `<h3>`  `<h4>`
- Paragraph — p.p |  `<p>`
- Line break — p.br |  `<br>`

\

- Metadata — p.head | `<head>`
- Document title — p.title("Website name") | `<title>`
- External link — p.link(rel="stylesheet", href="static/style.css") | `<link rel="stylesheet" href="static/style.css">`

\

- Body text — p.body | `<body>`
- Links — p.a(href="LINK_HERE", target="_blank")("Name of page") | `<a href="LINK_HERE" target="_blank">Name of page</a>`
- Image — p.img(src="PICTURE_LINK", alt="ALT_TEXT", width="20%") | `<img src="PICTURE_LINK" alt="ALT_TEXT" width="20%">`
- Useful container — p.div | `<div>`

\

- Bold — p.b | `<b>`
- Italic — `<i>`
- Underline — `<u>`

\
### Lists

- Unordered list — p.ul | `<ul>`
- Ordered list — p.ol | `<ol>`
- List item — p.li | `<li>`

\
### Tables

- Table setup — p.table | `<table>`
- Table row — p.tr | `<tr>`
- Table head — p.th | `<th>`
- Table data — p.td | `<td>`



===================================================


## CSS Stuff

### - class_=""

### - body
background-color: PICK_COLOUR;

### - p
font-family: "Georgia", serif;\
font-family: "Tahoma", sans-serif;\
font-family: Arial, Helvetica, sans-serif;

color: PICK_COLOUR;\
text-align: justify;

### - h1
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;\
font-family: "Rockwell Extra Bold", serif;\
font-family: 'Courier New', Courier, monospace;

color: PICK_COLOUR;\
font-size: 50px;

### - a (link)
color: PICK_COLOUR;

### - a:hover (link hover)
color: PICK_COLOUR;

### - a:visited (link visited)
color: PICK_COLOUR;

### - Button (.button)
background-color: COLOUR1;\
border: 1px solid COLOUR1\
border-radius: 15px;\
color: COLOUR2;\
padding: 15px 32px;\
text-align: center;\
text-decoration: none;\
display: inline-block;\
font-size: 16px;\
margin: 4px 2px;\
margin-top: 15px;\
cursor: pointer;

### - Button hover (.button:hover)
background-color: PICK_COLOUR;\
color: black;

### - Bold (.bold, lazy method - p.span(class_="bold")(CONTENT_HERE))
font-weight: bold;

### - Form/box
border: 1px solid BODY_BACKGROUND_COLOUR;\
border-collapse: collapse;\
background-color: PICK_COLOUR;\
border-radius: 15px;\
padding: 5% 20% 5% 20%;

### - Table

- table, th, td\
border: 2px solid PICK_COLOUR1;\
border-collapse: collapse;

- table\
width: 100%;

- th, td\
width: 33%;\
border-radius: 20px;\
text-align: center;

- th\
background-color: PICK_COLOUR2;

- td\
padding: 15px;\
background-color: PICK_COLOUR3;

### - Card
- W3schools "How TO - Cards"
- CSS to sort divs — max width amt, margin,
- div with an image (max width) + div (border for all)
- nested div with text and some padding

### - CSS Flexbox (w3schools)
- Flexbox Intro + Flexbox Container

### - CSS Grid/Container (container and columns)
- (better check w3schools, skip if it's too much work)
- Grid Intro

===================================================


## HTML (Hyper Text Markup Language)
- Used to create the front end of web pages
- A series of elements that label pieces of content
- Tells the browser how to display content.

## CSS (Cascading Style Sheets)
- Is used in conjunction with a markup language such as HTML to enhance the look of web pages
- Describes how HTML elements are to be displayed
- Stylesheets are stored externally in CSS files, which make them easy to edit and change independent of the HTML

## APIs (application programming interface)
- A set of rules and definitions that let software systems communicate with each other

#### Pros
- Easy and quick to use
- Get access to a lot of data

#### Cons
- Not open source (details secret)
- Program will not work if the API goes down

## Python Packages (PyPI, Python Package Index)
- Official third party software repository for Python

#### Pros
- Don't have to rely on a provider like API
- Don't have to write the code yourself

#### Cons
- May contain malware or malicious code
- Code may be hard to understand

## Useability

### 1. Errors
- How users encounter problems
- Severity of issues encountered
- Ease of recovery (user control)

#### 1.1. Error prevention
- Limiting input options to valid data types
- 3 options or less for radio butto
- 3+ option for dropdown
- Two-step processes for deletion (are you sure popup)
- Eliminate error-prone conditions

#### 1.2. Help Users Recognize, Diagnose, and Recover from Errors
- Clear error messages in plain language
- Traditional error visuals such as bold red text
- Offer a solution to users

### 2. Satisfaction
- How engaging the site is for users
- Positive experience vs frustration

#### 2.1. User Control and Freedom
- Support undo/redo
- Clear cancel and back buttons for processes and actions
- "Emergency exit" for users to avoid feeling stuck/frustrated

#### 2.2. Visibility of System Status
- Immediate feedback to user such as progress bars, number of pages in a survey, breadcrumbs (current location in the site’s hierarchical structure, like home > products > product_name)
- Eg. If something saved, was added to cart, is uploading
- Makes user feel in control of the experience as site is responding

#### 2.3 Aesthetic and Minimalist Design
- Avoiding visual clutter, focus on the essentials
- Whitespace to divide chunks of information
- Matching colour scheme, font, etc.

### 3. Learnability
- Speed of which new users can understand the site
- How quickly they can perform basic tasks for the first time

#### 3.1. Match Between the System and the Real World
- Using familiar terms, phrases and icons (eg. bin icon for delete)
- Natural mapping (buttons mirroring placement of things they control)
- Making the site predictable for the user

#### 3.2. Consistency and Standards
- Be consistent with real world/other sites so that users aren't confused
- Eg. Submit button on the bottom of page and not at the top, back buttons usually on the left
- Colour meanings — red text = no/cancel/warning, green text = yes/proceed

#### 3.3. Recognition Rather than Recall
- Adding cues and hints to allow user to recognise what to do + help in context
- Info about using the site should be visible at all times
- Eg. having options visible rather than needing user to search through lots of menus

### 4. Efficiency
- How fast tasks can be accomplished after learning how to use the site
- 3-click rule
- Accessibility (colourblindness, linking labels to input boxes)

### 5. Memorability
- How easily a user can recall how to navigate site after taking a break

### 6. Other heuristics (most likely won't need to reference)

#### 6.1. Flexibility and Efficiency of Use
- Customisation and shortcuts to speed up process
- Speed up for advanced users while not making it difficult to learn for novice users

#### 6.2. Help and Documentation
- Eg. README files, help page
- Showing information at appropriate times where needed (eg. sizing info on product page of online shop)


## JSON Files

### Json load (file already exists)
import json\
with open('file_name.json', 'r') as file:\
&nbsp;&nbsp;&nbsp;&nbsp;data = json.load(file)

### Json dump (write to file)
import json

\# Python dictionary\
user_data = {"data_here":"placeholder"}

with open('user.json', 'w') as file:\
&nbsp;&nbsp;&nbsp;&nbsp;json.dump(user_data, file)

### Json loads (json to python)
import json\
json_string = '{"name": "Alice", "age": 30, "active": true}'\

data = json.loads(json_string)\
print(data['name'])  # Output: Alice\
print(data['active'])  # Output: True (converted to Python bool)

### Json dumps (python to json)
import json

data = {'status': 'success', 'count': 42}\

json_string = json.dumps(data)\
print(json_string)


## JSON Helpers (from lecture code)

\# Within COMP1010 you are allowed to import and use this file as you like.\
\# Written by Sim Mautner\
\# Current copy: 2026

import json
import os

\# empty_data should be what data we want to put in there if the file doesn't exist\
\# either {} or [] as we are working with json files\
def create_if_not_exist(filename, empty_data):\
&nbsp;&nbsp;&nbsp;&nbsp;if not os.path.exists(filename):\
&nbsp;&nbsp;&nbsp;&nbsp;write_json_file(filename, empty_data)

def write_json_file(filename, info_to_save):\
&nbsp;&nbsp;&nbsp;&nbsp;my_file = open(filename, "w")\
&nbsp;&nbsp;&nbsp;&nbsp;json.dump(info_to_save, my_file)\
&nbsp;&nbsp;&nbsp;&nbsp;my_file.close()

def read_json_file(filename):\
&nbsp;&nbsp;&nbsp;&nbsp;my_file = open(filename, "r")\
&nbsp;&nbsp;&nbsp;&nbsp;information = json.load(my_file)\
&nbsp;&nbsp;&nbsp;&nbsp;my_file.close()\
&nbsp;&nbsp;&nbsp;&nbsp;return information


## CSS LINK
p.html(\
&nbsp;&nbsp;&nbsp;&nbsp;p.head(p.title("Title of site"),\
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p.link(rel="stylesheet", href="static/style.css")),

## Import

#### Splitting python files
- from file_name import function_name

#### Import time
- time.sleep(1) == time delay 1 second
- Use while loops to countdown

#### Import datetime
- current_time = datetime.datetime.now()
- print(x.strftime("%A")) == can get specific formats\
&emsp;&emsp;- Day of week = %A  (Monday, %a for Mon)\
&emsp;&emsp;- Day of month = %d (28)\
&emsp;&emsp;- Month = %B (January, %b for Jan)\
&emsp;&emsp;- Year = %Y\
&emsp;&emsp;- 12 hour time = %I\
&emsp;&emsp;- 24 hour time = %H\
&emsp;&emsp;- AM/PM = %p\
&emsp;&emsp;- Minute = %M\
&emsp;&emsp;- Second = %S
- Creating a date: x = datetime.datetime(2020, 5, 17)

#### Import random
- Variable = random.randint(x, y)
- Generates number between x and y inclusive

## Built-in functions

- len() — x = len(list_of_items) == returns number of items in that list
- sum() — sums a list of numbers
- min() — lowest numeric value in a list, or alphabetically the lowest (ascii)
- max() — highest numeric value in a list, or alphabetically the highest (ascii)
- round() — x = round(1.234567, 2) == 1.23, rounded to 2 decimal places
- range() — x = range(2, 10, 3) == 2, 5, 8 (start, stop, step) (0 start and 1 step by default) - need to print as "for items in x: \ print(items)"
- bool() — x = bool(y), returns True if "y" is not empty, False, 0 or None
- pow() — x = pow(4, 3) == 64 (aka 4^3); pow(x, y, z) where z is modulus
- Modulo: (finds remainder when x divided by y), eg. 10 % 3 = 1
\
\
- .capitalize() = first letter of string into caps
- .count() — x = list_name.count(item_name) == returns number of times item_name appears in list_name
- .replace() — x = text_string.replace("word1", "with_word2")
- .split() — splits string by the thing inside bracket (eg. text.split(", "), default is whitespace), puts split phrases into list
- .startswith("item_name") — checks if string starts with item_name (multiple items work)
- .index() — x = list_name.index("item_in_list") == returns index number of that item
- .isalpha(), .isdigit() and .isalnum() = check if all charas are in alphabet, numerals or alphanumeric
- .upper() and .lower() = turns string into uppercase or lowercase

## Other

#### ASCII
- 0 = 48
- A = 65
- a = 97

#### Markdown space
- `&nbsp;`
