使えそうだと思ったら、マネして構いません。
例として「JavaScriptで作るTODOアプリ」を考えて載せました。

完成イメージ

完成した画面の動画や画像を添付する。フローチャートなどでも良い。少し複雑なものなら仕様もここに記載する。

HTMLとJavaScriptを使ってシンプルなTODOアプリを作成する。
TODOの追加ができ、TODOをメモすることができるアプリ。

概要

基本的な情報はここに記載する。

動作環境 macOS(M1)

使用技術 JavaScript、HTML

作業時間 5分

技術解説

メインで使う技術の解説はここに記載する。記載しなくても構わない。

JavaScriptとは

主にWeb開発で使用されるプログラミング言語

「JavaScript」と書いて「ジャバスクリプト」と読む

テキストエディタとブラウザがあればすぐに開発可能

事前準備

どんなツールが必要で、どんなバージョンのものが必要かはここに記載する。

テキストエディタを用意

Visual Studio Codeでインストーラーをダウンロードし、インストーラーを起動しアプリをインストールする

ブラウザを用意

Google Chromeでインストーラーをダウンロードし、インストーラーを起動しアプリをインストールする

手順

行った操作は全て記載する。必ず動作が確認できたコードを載せる。必要であれば画像も載せる。

プロジェクト作成
$ mkdir todo-app
プロジェクトを開く

VSCodeでプロジェクトを開く。
以降の作業は、todo-appをカレントディレクトリとする。

index.htmlの記述

index.htmlを作成し、以下のように記述する
index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TODO List</title>
  </head>
  <body>
    <div>
      <input type="text" id="title" />
      <button type="button" onClick="addTodo()">追加</button>
    </div>
    <ul id="todos"></ul>
    <script src="index.js"></script>
  </body>
</html>
index.jsの記述

index.jsを作成し、以下のように記述する
index.js
function addTodo() {
  const title = document.getElementById('title');
  const todos = document.getElementById('todos');

  if (title.value === '') return;

  todos.innerHTML += `<li>${title.value}</li>`;

  title.value = '';
}
動作確認

Chromeでindex.htmlを開く。
完成イメージのように追加ができるはず。

まとめ

最終的な全体コード及びディレクトリ構成を記載する。行ったこと、学べたことを総括しても良い。

最終ディレクトリ構成は以下のようになる。

todo-app/
├── index.html
└── index.js

全体コード

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TODO List</title>
  </head>
  <body>
    <div>
      <input type="text" id="title" />
      <button type="button" onClick="addTodo()">追加</button>
    </div>
    <ul id="todos"></ul>
    <script src="index.js"></script>
  </body>
</html>

index.js

function addTodo() {
  const title = document.getElementById('title');
  const todos = document.getElementById('todos');

  if (title.value === '') return;

  todos.innerHTML += `<li>${title.value}</li>`;

  title.value = '';
}