In this article, we are going to learn how to build a sticky note app using html/css and javascript. We’re going to store the notes in Api and getting the notes from api for display in the screen.
Here are four steps we will follow to build sticky note app:
1. Set up html structure and css
2. Create form to capture note
3. Post note to Api
4. Get notes from Api
To follow along with this tutorial, you’ll need to be familiar with the following:
- html and css
- javascript and dom manupilation
- fetch api
**NOTE:** In this tutorial we’ll use [mock api](https://github.com/mockapi-io/docs/wiki/Quick-start-guide) to store notes.
## 1. Set up html structure and css
Create `index.html` file and link it to `style.css` file. Add the following html code to `index.html`.
**NOTE:** The follow html code, also link `index.js` file
```html:
<head>
<! — link style.css file →
<link rel=”stylesheet” href=”./style.css” />
<title>my notes</title>
</head>
<body>
<main>
<header>
<h1>My Notes</h1>
<a id=”display-form-input”
class=”Add-new-note-btn”>+ Add a new note</a>
</header>
<section id=”note-section” class=”main-article-section”>
<div id=”article-div” class=”flex-section-div”></div>
</section>
</main>
<script src=”./index.js”></script>
</body>
```
Now create a `style.css` file. Add the code below to `style.css` file.