---
tags: mstu5003, project, webapp, html, css, creativity, awesomeness
---

# Title:
**Authors:** names...

**See project: https://codepen.io/.....**

## Problem
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam quis enim lobortis scelerisque fermentum dui. Augue ut lectus arcu bibendum at varius vel pharetra. Integer vitae justo eget magna. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Orci ac auctor augue mauris augue neque gravida in. A lacus vestibulum sed arcu non. Massa tempor nec feugiat nisl.

## Research/Precedents
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam quis enim lobortis scelerisque fermentum dui. Augue ut lectus arcu bibendum at varius vel pharetra. Integer vitae justo eget magna. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Orci ac auctor augue mauris augue neque gravida in. A lacus vestibulum sed arcu non. Massa tempor nec feugiat nisl.

## Aim
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam quis enim lobortis scelerisque fermentum dui. Augue ut lectus arcu bibendum at varius vel pharetra. Integer vitae justo eget magna. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Orci ac auctor augue mauris augue neque gravida in. A lacus vestibulum sed arcu non. Massa tempor nec feugiat nisl.

## Sketch/Wireframe
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam quis enim lobortis scelerisque fermentum dui. Augue ut lectus arcu bibendum at varius vel pharetra. Integer vitae justo eget magna. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Orci ac auctor augue mauris augue neque gravida in. A lacus vestibulum sed arcu non. Massa tempor nec feugiat nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

## Solution
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam quis enim lobortis scelerisque fermentum dui. Augue ut lectus arcu bibendum at varius vel pharetra. Integer vitae justo eget magna. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Orci ac auctor augue mauris augue neque gravida in. A lacus vestibulum sed arcu non. Massa tempor nec feugiat nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

## Specifications

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci ac auctor augue mauris augue neque gravida in. A lacus vestibulum sed arcu non. Massa tempor nec feugiat nisl.

**HTML**
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci ac auctor augue mauris augue neque gravida in. A lacus vestibulum sed arcu non. Massa tempor nec feugiat nisl.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci ac auctor augue mauris augue neque gravida in. A lacus vestibulum sed arcu non. Massa tempor nec feugiat nisl.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci ac auctor augue mauris augue neque gravida in. A lacus vestibulum sed arcu non. Massa tempor nec feugiat nisl.

If you want to share a part of your code:

<div class="container">
<div class="row">
<div class="col-__">
<!-- CONTENT -->
</div>
</div>
</div>

**CSS**

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci ac auctor augue mauris augue neque gravida in. A lacus vestibulum sed arcu non. Massa tempor nec feugiat nisl.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci ac auctor augue mauris augue neque gravida in. A lacus vestibulum sed arcu non. Massa tempor nec feugiat nisl.

If you want to share a part of your code:

.container {
	width: 80%;
	margin: auto;
	min-width: 300px;
    ...
}

**JS**

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci ac auctor augue mauris augue neque gravida in. A lacus vestibulum sed arcu non. Massa tempor nec feugiat nisl.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci ac auctor augue mauris augue neque gravida in. A lacus vestibulum sed arcu non. Massa tempor nec feugiat nisl.
If you want to share a part of your code:

document.querySelector("#x"); 
let el = document.querySelector("#y"); // returns the div#y object
console.log(el.className);             // prints "" to the console

## Discussion/Reflection

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam quis enim lobortis scelerisque fermentum dui. Augue ut lectus arcu bibendum at varius vel pharetra. Integer vitae justo eget magna. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Orci ac auctor augue mauris augue neque gravida in. A lacus vestibulum sed arcu non. Massa tempor nec feugiat nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

## References (If you have used any external sources)

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam quis enim lobortis scelerisque fermentum dui.
1. Augue ut lectus arcu bibendum at varius vel pharetra. Integer vitae justo eget magna. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet.
1. Orci ac auctor augue mauris augue neque gravida in. A lacus vestibulum sed arcu non. Massa tempor nec feugiat nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.