diff --git a/programmer-humour/index.html b/programmer-humour/index.html
new file mode 100644
index 00000000..24ef71fa
--- /dev/null
+++ b/programmer-humour/index.html
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+
+
+
+
+ xkcd webcomic
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/programmer-humour/script.js b/programmer-humour/script.js
new file mode 100644
index 00000000..7ba4082b
--- /dev/null
+++ b/programmer-humour/script.js
@@ -0,0 +1,35 @@
+const api = "https://xkcd.now.sh/?comic=latest"
+
+document.addEventListener('DOMContentLoaded', function () {
+ fetchComic(api);
+});
+
+function fetchComic(api) {
+ fetch(api)
+ .then((response) => response.json())
+ .then((lastComic) => renderPage(lastComic))
+ .catch((error) => showError(error));
+}
+
+function renderPage(data) {
+ console.log(data);
+ const root = document.querySelector("#root")
+ const html = htmlGenerator(data.title, data.img, data.alt);
+
+ root.innerHTML = html;
+}
+
+function htmlGenerator(title, imageUrl, imageAlt) {
+ let html = `${title}
+ 
+ From xkcd.com
+ `
+
+ return html
+}
+
+function showError(error) {
+ console.log(error);
+ const root = document.querySelector("#root")
+ root.innerHTML = `${error}
`
+}
\ No newline at end of file
diff --git a/programmer-humour/styles.css b/programmer-humour/styles.css
new file mode 100644
index 00000000..83aa11bc
--- /dev/null
+++ b/programmer-humour/styles.css
@@ -0,0 +1,100 @@
+:root {
+ --page-width: 50vw;
+ --primary-colour: #3a7bd5;
+ --secondary-colour: #362db3;
+ --text-colour-dark: #333;
+ --text-colour-light: #ffffff;
+ --background-colour: #798b9b;
+ --foreground-colour: #fff;
+ --font-family: "Comic Neue", cursive;
+ --border-radius: 0.25rem;
+ --box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
+}
+
+body, main, header, footer, div {
+ box-sizing: border-box;
+}
+
+h1, h2, h3, p, a {
+ margin: 0;
+ padding: 0;
+}
+
+a, a:active, a:visited {
+ text-decoration: none;
+ color: var(--secondary-colour);
+}
+
+a:hover {
+ font-weight: 700;
+}
+
+body {
+ margin: 0;
+ background-color: var(--background-colour);
+ font-family: var(--font-family);
+
+ height: 100vh;
+
+ display: grid;
+ grid-template-rows: auto 1fr auto;
+}
+
+header, main, footer {
+ width: var(--page-width);
+ margin: 0 auto;
+}
+
+h1 {
+ font-size: 5rem;
+ line-height: 4rem;
+ margin: 0;
+ color: var(--primary-colour);
+}
+
+h2 {
+ font-size: 2.5rem;
+}
+
+header {
+ background-color: var(--foreground-colour);
+ padding: 1rem 2rem;
+}
+
+main {
+ background-color: var(--primary-colour);
+ text-align: center;
+ padding: 2rem;
+
+ color: var(--text-colour-light);
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+main a, main a:active, main a:visited {
+ color: var(--text-colour-light);
+ text-decoration: underline;
+}
+
+img {
+ padding: 1rem;
+ background-color: var(--foreground-colour);
+ border-radius: var(--border-radius);
+ margin: 1rem 0 0.5rem;
+}
+
+footer {
+ background-color: var(--foreground-colour);
+ padding: 0.5rem 1rem;
+ text-align: center;
+
+ color: var(--text-colour-dark);
+ font-weight: 300;
+}
+
+footer a{
+ color: var(--secondary-colour);
+}
\ No newline at end of file