📚 update: daily report 240611

* 0:36

* 0:38

* 1:29

* 11:32

* 18:14

* 18:18

* 23:04

* 0:18

documents/00_TopicsToLearn/README.md

@@ -1,4 +1,4 @@
-# Topics To Learn Master Page
+# Topics To Learn
 
 ## basic HTML skills with Figma
 
@@ -78,7 +78,7 @@
 
 ---
 
-# Table Of Content
+## Table Of Content
 
 - [FigmaからWebページのコーディング練習ができるサイト](./FimgaToWebSiteResources.md)
 - [採用で求められている事柄の調査](./recruit-responsibilities.md)

documents/2024/README.md

@@ -3,7 +3,7 @@
 > [!IMPORTANT]
 > 2024/06/09思うこと: 1000時間超えたら時間測るのやめる！
 
-# Table Of Content
+## Table Of Content
 
 - [2024年1月](./01_January.md)
 - [2024年2月](./02_February.md)

documents/2024/allTodos.md

@@ -0,0 +1,41 @@
+# All Todos
+
+## 2024/06
+
+基礎をばーっとやりなおしたい。焦らない...。
+
+以下をベースにこまごやって試すこと、ひととおり終わればOK。
+
+- [ ] Bootstrap 5 を体系的に学ぶ
+  - [Bootstrap 5 Tutorial](https://www.w3schools.com/bootstrap5/)
+  - わからなくてもいいのでざーーーーっと進んで何がどうなっているのか学ぶ
+  - reason: ドキュメント見ても全くわからないため
+  - result: 
+- [ ] TypeScript を体系的に学ぶ
+  - [Execute Program](https://www.executeprogram.com/)
+  - reason: ドキュメント見ても全くわからないため
+  - result:
+- [ ] React を体系的に学ぶ
+  - [React Tutorial](https://www.w3schools.com/react/default.asp)
+  - reason: やっぱりわからないから
+  - result: 
+
+## 2024/07
+
+わからなくていいので、小さなプロジェクトを大量生産する。
+データベースとの接続を。
+MERNでCRUD
+
+## 2024/08
+
+- MERN CURD
+  - [How To Use MERN Stack: A Complete Guide | MongoDB](https://www.mongodb.com/resources/languages/mern-stack-tutorial)
+  - [Building a Todo List App with MERN Stack | Todo Application using MongoDB + Express + React + Node - YouTube](https://www.youtube.com/watch?v=BqRWK57dwqo)
+    - 35min
+  - [React、Express、Node、Mongo を使用してフルスタック アプリを構築する MERN STACK - YouTube](https://www.youtube.com/watch?v=R81g-2r6ynM)
+    - 1h
+  - [Full Stack MERN Todo App with MongoDB, React, Express, Node | Responsive + Deployment + Full Notes - YouTube](https://www.youtube.com/watch?v=giXuiotopO0)
+- [CRUD Operation with Redux using MERN Stack | CRUD Application using MERN Stack with Redux - YouTube](https://www.youtube.com/watch?v=FOK45_sEqK8)
+
+
+## 2024/09

documents/API/README.md

@@ -28,4 +28,4 @@ RESTful API は、2 つのコンピュータシステムがインターネット
 
 ---
 
-# Table Of Content
+## Table Of Content

documents/Books/README.md

@@ -11,7 +11,7 @@
 
 ---
 
-# Table Of Content
+## Table Of Content
 
 - エンジニアが知っておきたい思考の整理術
 - リーダブルコード

documents/CSS/README.md

@@ -2,4 +2,8 @@
 
 ---
 
-# Table Of Content
+## Table Of Content
+
+- [CSS Frameworks](./cssFramerorks.md)
+- [What is Bootstrap](./bootstrap.md)
+- [What is Tailwind CSS](./tailwindcss.md)

documents/CSS/bootstrap-w3s.md

@@ -0,0 +1,61 @@
+# W3School Bootstrap Tutotial
+
+
+## 02: Get Started
+- `.container`: a responsive fixed width container
+- `container-fluid`: a full width container
+
+## Containers
+
+### Fixed Container `.container`
+- 全てのビューポートにおいて横幅が設定されている
+- 567px以下は100%だけど、それ以外は設定してある。
+
+### Fluid Container `.container-fluid`
+- 常にに横幅いっぱいに広がる `width is always 100%`
+
+### Container Padding
+- 通常、containersは左右のpaddingが設定してある
+- 上下にはない
+- だから、**spacing utilities**を使って、隙間をあけることができる。
+- `pt-5` 
+
+### Container Border and Color
+- `my-5`, `bg-dark`, `text-white`, `bg-primary`
+- installed BootstrapIntelliSence (VS Code)
+
+### Responsive Containers
+- `container-sm`: ブラウザ567px以下は100%
+- `container-md`: ブラウザ768px以下は100%
+- `container-lg`: ブラウザ992px以下は100%
+- `container-xl`: ブラウザ1200px以下は100%
+- `container-xxl`: ブラウザ1320px以下は100%
+
+## 03: Bootstrap 5 Grid
+TODO: Gridなじみがないのでちゃんと理解する
+
+### Bootstrap 5 Grid System
+
+- 12のカラムがページいっぱいに広がっている
+- それらのcolumnsは、いくつかまとめて横幅を出して使うことができる
+- ただ、カラムは12個使う必要はないらしい、それ以下でもよいらしい
+
+### Grid Classes
+
+## 04: Bootstrap 5 Text/Typegraphy
+TODO: abbr途中
+- `.h1` to `.h6`
+- `.display-1` to `.display-6`
+  - hとdisplayの違いが現段階ではよくわからない
+- `<small>` or `.small`
+  - 見出しの中に設置
+  - 第二の見出しとして
+- `<mark>` or `.mark`
+  - 背景に薄い黄色をしいてくれる
+- `<abbr>` （略語を囲む）
+  - `<abbr title="World Health Organization">WHO</abbr>`
+  - 下にドット線をひいてくれる
+
+
+## words
+- "pad the content inside of them": 内部にコンテンツを**埋め込む

documents/HTML/README.md

@@ -1,5 +1,5 @@
 # HTML
 
-# Table Of Content
+## Table Of Content
 
 - [faviconの設定、manifest.json、maskable](./favicon.md)

documents/HTML/favicon.md

@@ -2,8 +2,9 @@
 
 ## 問題: safari のお気に入り画面のアイコンが領域いっぱいに表示されない
 
-> ![IMPORTANT]
+> [!IMPORTANT]
 > 画像をアルファチャンネルを含まないもの（透明の情報をもたないもの）に変更すると、領域いっぱいに表示される様になった
+> ただし、macOSとiPadはすぐきりかわったが、iosが切り替わらず...なぜなのか...
 
 ![画像](../assets/favicon-safari-padding.png)
 

documents/Laravel/README.md

@@ -2,7 +2,7 @@
 
 ---
 
-# Table Of Content
+## Table Of Content
 
 - [Try tp Create My Laravel Project(my-portfolio)](./Laravel-my-portfolio.md)
 - [Try Laravel With React](./Laravel-with-React.md)

documents/LogicalThinking/README.md

@@ -18,6 +18,6 @@
 
 ---
 
-# Table Of Content
+## Table Of Content
 
 - [【超入門】ロジカルシンキング難しすぎて実践できない人向け 論理的思考術](./intro-logical-thinking-very-simple.md)

documents/Prettier/prettierignore.md

@@ -1,6 +1,6 @@
 # マークダウンが Prettier で整形される問題を解決する
 
-> ![NOTE]
+> [!NOTE]
 > 1. ルートディレクトリに `.prettierignore` 追加
 > 2. `*.md` を追加
 > 以上

documents/README.md

@@ -1,81 +1,12 @@
-<div align="center">
+# Today I Learn
 
-<img width="160" src="assets/octcat.png" alt="TIL" />
+- [Book Memo](./Books/README.md)
 
-This image was made with [My Octocat](https://myoctocat.com/)
-</div>
-
----
-
-```javascript
-/*-------------------------------------
- | TIL
- | Today I Learn and Study Log.
- *------------------------------------*/
-
-// If you want to check the monthly reports, go to the annual folders.
-```
-
-```javascript
-const studyStartDay = "2023/11/18";
-```
-
-```javascript
-const programmingStudyTime2023 = [
-  {
-    period: "2023",
-    hoursTotal: 116.75,
-  }
-];
-```
-
-```javascript
-const programmingStudyTime2024 = [
-  {
-    period: "January 2024",
-    hoursPerMonth: 93.75,
-    // hoursTotal: 210.50,
-  },
-  {
-    period: "February 2024",
-    hoursPerMonth: 95.25,
-    // hoursTotal: 306.25,
-  },
-  {
-    period: "March 2024",
-    hoursPerMonth: 90.50,
-    // hoursTotal: 396.75,
-  },
-  {
-    period: "April 2024",
-    hoursPerMonth: 21.25,
-    // hoursTotal: 417.50,
-  },
-  {
-    period: "May 2024",
-    hoursPerMonth: 45,
-    // hoursTotal: 462.5,
-  },
-    {
-    period: "June 2024",
-    hoursPerMonth: null,
-    // hoursTotal: null,
-  },
-];
-```
-
-```javascript
-const englishStudyTime2024 = [
-  {
-    period: "May 2024",
-    hoursPerMonth: 26.25,
-    // hoursTotal: 26.25,
-  },
-  {
-    period: "June 2024",
-    hoursPerMonth: null,
-    // hoursTotal: null,
-  },
-];
-```
+## Table Of Content
 
+- [HTML](./HTML/README.md)
+- [CSS](./CSS/README.md)
+- [JavaScript](./JavaScript/)
+- [TypeScript](./TypeScript/)
+- [Laravel](./Laravel/README.md)
+- [API](./API/README.md)

documents/React/resources.md

@@ -0,0 +1,19 @@
+# React Study Resources
+
+- [flashohq/open-source-react-courses](https://github.com/flashohq/open-source-react-courses?tab=readme-ov-file): 色々まとめてある
+
+## 使えそう、やりやすそう
+- [React Tutorial](https://www.w3schools.com/react/default.asp)
+  - 結局これ
+- [React Course For Beginners - Learn React in 8 Hours - YouTube](https://www.youtube.com/watch?v=f55qeKGgB_M&list=PLpPqplz6dKxW5ZfERUPoYTtNUNvrEebAR&index=20)
+  - YouTube、英語、8時間で終わる
+  - > This course will teach you everything you need to know as a Beginner in react, to being able to create big projects on your own.
+
+## 検討中
+- 
+
+## 保留・見返す
+- [Learn React](https://v2.scrimba.com/learn-react-c0e)
+
+## お見送り
+- 

documents/TEST/README.md

@@ -0,0 +1,4 @@
+# TEST
+
+## Watch List
+- [あなたはフロントエンドテストをしていますか？【Vitestでテスト入門】 - YouTube](https://www.youtube.com/watch?v=vO7oJ_ugShY)

documents/TypeScript/README.md

@@ -0,0 +1,25 @@
+# TypeScript
+
+## Study Resources
+
+- [TypeScript Roadmap: Learn to become a TypeScript developer](https://roadmap.sh/typescript)
+  - TypeScriptで学ぶべき項目の概要
+
+### 試したもの
+- [Execute Program](https://www.executeprogram.com/)
+  - 試した
+  - 英語を読みながら、単語も学びながらできる
+  - 画面上でテキスト入力して学んでいく感じ
+  - 英語さえ読めれば強い、英語の勉強になる
+
+### まだ
+- [TypeHero](https://typehero.dev/)
+
+---
+
+## Table Of Content
+- [TypeScript Basic](./typeScript-basic.md)
+- my-typescript-apps
+  - [Practice TypeScript Apps](./practice-typescript-apps.md)
+  - [Random Quote](./random-quote.md)
+  - [Simple Modal](./simple-modal.md)