フロントエンド

目指すレベル

• サーバーがない状態でTODOアプリが作れる
  • HTML、CSS、JavaScriptな状態でTODOアプリを作る
    • HTMLでタグ構造を組める
    • CSSでデザインを作れる
    • JavaScriptで処理を組める
    • TODOアプリのサンプル
  • 仮想DOM(React.js)を使ってTODOアプリを作る
    • React.js の基礎を理解できる
    • UIライブラリを使える
    • TODOアプリのサンプル

などなど、アプリを一つ作りきれる。

HTMLを構成するウェブの基礎

• ウェブ入門

HTML

HTMLについて理解する

• MDN Web Docs:HTML の基本
• HTML の学習: ガイドとチュートリアル
• とほほのWWW入門

CSS

CSSについて理解する

• MDN Web Docs:CSS の基本
• CSS の学習: ガイドとチュートリアル

JavaScript

JavaScriptについて理解する

• MDN Web Docs:JavaScript の基本
• JavaScript の学習: ガイドとチュートリアル

TODOアプリのサンプル

TODOアプリの参考サイト

• えむ家のメモ帳:プラグインを使わずにTODOリストを作成しました

仮想DOM(React.js)の作成

React.jsについて理解する

• React公式
• チュートリアル：React の導入 React.jsの重要ポイント
  • 関数コンポーネント¹
    • ステートフックの利用法:useState
    • 副作用フックの利用法:useEffect

UIライブラリを使う

• MUI

TODOアプリのサンプル

TODOアプリの参考サイト

• MDN Web Docs:React ToDoリストをはじめる

…