diff --git a/package.json b/package.json
index cf6e1bc772..fc2b66a549 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
         "build": "react-scripts build",
         "test": "react-scripts test",
         "test:cov": "react-scripts test --coverage --watchAll",
+        "test:json": "react-scripts test --json --watchAll=false --outputFile jest-output.json --coverage",
         "eject": "react-scripts eject",
         "lint": "eslint ./src --ext .tsx --ext .ts --max-warnings 0",
         "eslint-output": "eslint-output ./src --ext .tsx --ext .ts --max-warnings 0",
diff --git a/public/tasks/task-first-branch.md b/public/tasks/task-first-branch.md
new file mode 100644
index 0000000000..94333338a0
--- /dev/null
+++ b/public/tasks/task-first-branch.md
@@ -0,0 +1,5 @@
+# Task - First Branch
+
+Version: 0.0.1
+
+Pass a short test to have certain text on the page.
diff --git a/public/tasks/task-functions.md b/public/tasks/task-functions.md
new file mode 100644
index 0000000000..36e7926bb7
--- /dev/null
+++ b/public/tasks/task-functions.md
@@ -0,0 +1,5 @@
+# Task - Functions
+
+Version: 0.0.1
+
+Implement a bunch of functions that work on primitives.
diff --git a/public/tasks/task-html-css.md b/public/tasks/task-html-css.md
new file mode 100644
index 0000000000..ebc0efcba5
--- /dev/null
+++ b/public/tasks/task-html-css.md
@@ -0,0 +1,5 @@
+# Task - HTML/CSS
+
+Version: 0.0.1
+
+Add in some HTML and CSS, including a fancy looking button.
diff --git a/src/App.css b/src/App.css
index ad32fac073..5dd9b895b5 100644
--- a/src/App.css
+++ b/src/App.css
@@ -15,7 +15,7 @@
 
 .App-header {
     width: 100%;
-    background-color: #282c34;
+    background-color: #7f00ff;
     min-height: 40vh;
     display: flex;
     flex-direction: column;
diff --git a/src/App.tsx b/src/App.tsx
index a8b41197f2..1192e1dd24 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,16 +1,49 @@
 import React from "react";
 import "./App.css";
+import { Button, Col, Container, Row } from "react-bootstrap";
 
 function App(): React.JSX.Element {
+    const rectangleStyle = {
+        width: "50%",
+        height: "100px",
+        backgroundColor: "red",
+    };
+
     return (
         <div className="App">
             <header className="App-header">
-                UM COS420 with React Hooks and TypeScript
+                <h1>Noah Moring is Doing This Thing.</h1>UM COS420 with React
+                Hooks and TypeScript
             </header>
-            <p>
-                Edit <code>src/App.tsx</code> and save. This page will
-                automatically reload.
-            </p>
+            <Container>
+                <Row>
+                    <Col>
+                        <div style={rectangleStyle}></div>
+                        <p>
+                            Edit <code>src/App.tsx</code> and save. This page
+                            will automatically reload. Noah Moring Hello World
+                        </p>
+                        <ol>
+                            <li>This is element one</li>
+                            <li>This is element two</li>
+                            <li>This is element three</li>
+                        </ol>
+                    </Col>
+                    <div style={rectangleStyle} />
+                    <Button
+                        onClick={() => {
+                            console.log("Hello World!");
+                        }}
+                    >
+                        Log Hello World
+                    </Button>
+                    <img
+                        src="https://drive.google.com/file/d/1cIcGmurZW9AXt3LBMiHXHK_XRfDUAXFW/view?usp=drive_link"
+                        alt="A picture of my cat Onyx"
+                    />
+                    <Col></Col>
+                </Row>
+            </Container>
         </div>
     );
 }
diff --git a/src/HtmlCss.test.tsx b/src/HtmlCss.test.tsx
new file mode 100644
index 0000000000..320cb97524
--- /dev/null
+++ b/src/HtmlCss.test.tsx
@@ -0,0 +1,83 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import App from "./App";
+import userEvent from "@testing-library/user-event";
+
+describe("Some HTML Elements are added.", () => {
+    test("(2 pts) There is a header", () => {
+        render(<App />);
+        const header = screen.getByRole("heading");
+        expect(header).toBeInTheDocument();
+    });
+
+    test("(2 pts) There is an image with alt text", () => {
+        render(<App />);
+        const image = screen.getByRole("img");
+        expect(image).toBeInTheDocument();
+        expect(image).toHaveAttribute("alt");
+    });
+
+    test("(2 pts) There is a list with at least three elements", () => {
+        render(<App />);
+        const list = screen.getByRole("list");
+        expect(list).toBeInTheDocument();
+        expect(list.children.length).toBeGreaterThanOrEqual(3);
+    });
+});
+
+describe("(2 pts) Some basic CSS is added.", () => {
+    test("The background color of the header area is different", () => {
+        render(<App />);
+        const banner = screen.getByRole("banner");
+        expect(banner).not.toHaveStyle({
+            "background-color": "rgb(40, 44, 52)",
+        });
+    });
+});
+
+describe("(2 pts) Some Bootstrap Elements are added", () => {
+    test("There is one bootstrap button with the text 'Log Hello World'", () => {
+        render(<App />);
+        const button = screen.getByRole("button", { name: /Log Hello World/i });
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveClass("btn");
+        expect(button).toHaveClass("btn-primary");
+    });
+
+    test("(2 pts) Not clicking the bootstrap button does not logs 'Hello World!'", () => {
+        const consoleSpy = jest.spyOn(console, "log");
+        render(<App />);
+        expect(consoleSpy).not.toHaveBeenCalledWith("Hello World!");
+    });
+
+    test("(2 pts) Clicking the bootstrap button logs 'Hello World!'", () => {
+        const consoleSpy = jest.spyOn(console, "log");
+        render(<App />);
+        const button = screen.getByRole("button", { name: /Log Hello World/i });
+        userEvent.click(button);
+        expect(consoleSpy).toHaveBeenCalledWith("Hello World!");
+    });
+});
+
+describe("Some additional CSS was added", () => {
+    test("(2 pts) checks if any element has a background color of red", () => {
+        const { container } = render(<App />);
+        // Get all elements in the rendered container
+        const elements = container.querySelectorAll("*");
+
+        // Check if any element has a background color of red
+        let foundRedBackground = false;
+
+        elements.forEach((element) => {
+            const style = getComputedStyle(element);
+            if (
+                style.backgroundColor === "red" ||
+                style.backgroundColor === "rgb(255, 0, 0)"
+            ) {
+                foundRedBackground = true;
+            }
+        });
+
+        expect(foundRedBackground).toBe(true);
+    });
+});
diff --git a/src/functions.test.ts b/src/functions.test.ts
new file mode 100644
index 0000000000..3d921f5d64
--- /dev/null
+++ b/src/functions.test.ts
@@ -0,0 +1,59 @@
+import {
+    add3,
+    fahrenheitToCelius,
+    shout,
+    isQuestion,
+    convertYesNo,
+} from "./functions";
+
+describe("Testing the basic functions", () => {
+    test("(3 pts) Testing the fahrenheitToCelius function", () => {
+        expect(fahrenheitToCelius(32)).toBe(0);
+        expect(fahrenheitToCelius(-40)).toBe(-40);
+        expect(fahrenheitToCelius(-22)).toBe(-30);
+        expect(fahrenheitToCelius(14)).toBe(-10);
+        expect(fahrenheitToCelius(68)).toBe(20);
+        expect(fahrenheitToCelius(86)).toBe(30);
+        expect(fahrenheitToCelius(212)).toBe(100);
+    });
+
+    test("(3 pts) Testing the add3 function", () => {
+        expect(add3(1, 2, 3)).toBe(6);
+        expect(add3(9, 7, 4)).toBe(20);
+        expect(add3(6, -3, 9)).toBe(15);
+        expect(add3(10, 1, -9)).toBe(11);
+        expect(add3(-9, -100, -4)).toBe(0);
+        expect(add3(-1, -1, 1)).toBe(1);
+    });
+
+    test("(3 pts) Testing the shout function", () => {
+        expect(shout("Hello")).toBe("HELLO!");
+        expect(shout("What?")).toBe("WHAT?!");
+        expect(shout("oHo")).toBe("OHO!");
+        expect(shout("AHHHH!!!")).toBe("AHHHH!!!!");
+        expect(shout("")).toBe("!");
+        expect(shout("Please go outside")).toBe("PLEASE GO OUTSIDE!");
+    });
+
+    test("(3 pts) Testing the isQuestion function", () => {
+        expect(isQuestion("Is this a question?")).toBe(true);
+        expect(isQuestion("Who are you?")).toBe(true);
+        expect(isQuestion("WHAT ARE YOU !?")).toBe(true);
+        expect(isQuestion("WHAT IS THIS?!")).toBe(false);
+        expect(isQuestion("OH GOD!")).toBe(false);
+        expect(isQuestion("Oh nevermind, it's fine.")).toBe(false);
+        expect(isQuestion("")).toBe(false);
+    });
+
+    test("(3 pts) Testing the convertYesNo function", () => {
+        expect(convertYesNo("yes")).toBe(true);
+        expect(convertYesNo("YES")).toBe(true);
+        expect(convertYesNo("NO")).toBe(false);
+        expect(convertYesNo("no")).toBe(false);
+        expect(convertYesNo("Apple")).toBe(null);
+        expect(convertYesNo("Bananas")).toBe(null);
+        expect(convertYesNo("Nope")).toBe(null);
+        expect(convertYesNo("Yesterday")).toBe(null);
+        expect(convertYesNo("Maybe")).toBe(null);
+    });
+});
diff --git a/src/functions.ts b/src/functions.ts
new file mode 100644
index 0000000000..492b31855f
--- /dev/null
+++ b/src/functions.ts
@@ -0,0 +1,72 @@
+/**
+ * Consumes a single temperature in Fahrenheit (a number) and converts to Celsius
+ * using this formula:
+ *      C = (F - 32) * 5/9
+ */
+export function fahrenheitToCelius(temperature: number): number {
+    return ((temperature - 32) * 5) / 9;
+}
+
+/**
+ * Consumes three numbers and produces their sum. BUT you should only add a number
+ * if the number is greater than zero.
+ */
+export function add3(first: number, second: number, third: number): number {
+     let total = 0;
+    if (first < 0) {
+        first = 0;
+        total += first;
+    } else {
+        total += first;
+    }
+    if (second < 0) {
+        second = 0;
+        total += second;
+    } else {
+        total += second;
+    }
+    if (third < 0) {
+        third = 0;
+        total += third;
+    } else {
+        total += third;
+    }
+
+    return total;
+
+}
+
+/**
+ * Consumes a string and produces the same string in UPPERCASE and with an exclamation
+ * mark added to the end.
+ */
+export function shout(message: string): string {
+    return message.toUpperCase() + "!";
+}
+
+/**
+ * Consumes a string (a message) and returns a boolean if the string ends in a question
+ * mark. Do not use an `if` statement in solving this question.
+ */
+export function isQuestion(message: string): boolean {
+    return /\?$/.test(message) ? true : false;
+}
+
+/**
+ * Consumes a word (a string) and returns either `true`, `false`, or `null`. If the string
+ * is "yes" (upper or lower case), then return `true`. If the string is "no" (again, either
+ * upper or lower case), then return `false`. Otherwise, return `null`.
+ */
+export function convertYesNo(word: string): boolean | null {
+    const yLetter = ["YES", "yes"];
+    const nLetter = ["NO", "no"];
+
+    if (yLetter[0] === word || yLetter[1] === word) {
+        return true;
+    } else if (nLetter[0] === word || nLetter[1] === word) {
+        return false;
+    } else {
+        return null;
+    }
+
+}
diff --git a/src/text.test.tsx b/src/text.test.tsx
new file mode 100644
index 0000000000..f99a063e76
--- /dev/null
+++ b/src/text.test.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import App from "./App";
+
+test("renders the text 'Hello World' somewhere", () => {
+    render(<App />);
+    const texts = screen.getAllByText(/Hello World/);
+    expect(texts.length).toBeGreaterThanOrEqual(1);
+});