# Web

### 7. [HTML&CSS](https://prog-8.com/languages/html)
- [HTML&CSS初級編](https://prog-8.com/html/study/1/1)
- 修了時間 3h50m
- [HTML基礎 HTMLの仕組み編](https://codeprep.jp/books/123)
- 修了時間 15m
- [HTML入門 基本要素(タグ)編](https://codeprep.jp/books/1)
- 修了時間 15m
- [HTML入門 HTML5編](https://codeprep.jp/books/75)
- 修了時間 15m
- [CSS入門 基本スタイリング編](https://codeprep.jp/books/2)
- 修了時間 20m
- [CSS入門 色の理論編](https://codeprep.jp/books/16)
- 修了時間 15m
- [CSS入門 CSS3編](https://codeprep.jp/books/17)
- 修了時間 20m
- [CSS入門 margin padding編](https://codeprep.jp/books/49)
- 修了時間 15m
- [CSS入門 position編](https://codeprep.jp/books/64)
- 修了時間 20m
- [CSS入門 display編](https://codeprep.jp/books/73)
- 修了時間 15m
- [メディアクエリの「メディアタイプ」を理解しよう(前編) :closed_book::musical_note:](https://youtu.be/79Dr3RGm0SI)
- 修了時間 10m
- [メディアクエリの「メディアタイプ」を理解しよう(後編) :closed_book::musical_note:](https://youtu.be/B8LnpwiiOzE)
- 修了時間 20m
- [最強に便利なCSSの比較関数 min, max, clamp を紹介！ :closed_book::musical_note:](https://youtu.be/oXHmEK_z-lo)
- 修了時間 15m
- [HTML＆CSSでつくるグリッドレイアウト](https://codeprep.jp/books/8)
- 修了時間 15m
- [HTML＆CSSでつくるナビゲーションバー](https://codeprep.jp/books/10)
- 修了時間 15m
- [HTML＆CSSでつくるWebページ](https://codeprep.jp/books/12)
- 修了時間 20m
- [HTML&CSSでつくるドロップダウンメニュー](https://codeprep.jp/books/18)
- 修了時間 30m
- [HTML&CSS3でつくるポップなメニュー](https://codeprep.jp/books/19)
- 修了時間 20m
- [HTML&CSSでつくるモーダルウィンドウ](https://codeprep.jp/books/41)
- 修了時間 25m
- [HTML&CSSでつくる登録フロー](https://codeprep.jp/books/47)
- 修了時間 20m
- [HTMLとCSSで作るWeb名刺](https://codeprep.jp/books/50)
- 修了時間 20m
- [HTMLとCSS3でつくるクルクル回転するローディング](https://codeprep.jp/books/63)
- 修了時間 15m
- [HTMLとCSS3でつくるお天気パネル](https://codeprep.jp/books/77)
- 修了時間 20m
- [HTMLとCSS3でつくるトグルスイッチ](https://codeprep.jp/books/82)
- 修了時間 15m
- [HTMLとCSS3でつくるパンくず](https://codeprep.jp/books/85)
- 修了時間 20m
- [HTMLとCSS3でつくるホバー時に動くア二メーションリンク](https://codeprep.jp/books/89)
- 修了時間 10m
- [HTMLとCSS3で作る通知ベル](https://codeprep.jp/books/92)
- 修了時間 15m
- [HTMLとCSS3で作るサイドメニュー](https://codeprep.jp/books/97)
- 修了時間 20m
- [HTMLとCSS3で作るホバー時に動くアニメーションボタン](https://codeprep.jp/books/108)
- 修了時間 20m
- [動画を使って夏らしいWebページを作ろう！](https://codeprep.jp/books/112)
- 修了時間 20m
- [基礎からちゃんと学ぶ CSS 入門！フレックスボックス (flexbox) の使い方をゲームで学ぼう！ :closed_book::musical_note:](https://youtu.be/FU4RocY_Y1k)
- 修了時間 30m
- [FLEXBOX FROGGY](https://flexboxfroggy.com/#ja)
- 修了時間 1h
- [ flexbox の flex プロパティの使い方を徹底解説 :closed_book::musical_note:](https://youtu.be/TXwY_SWO07U)
- 修了時間 15m
- [聖杯レイアウトのコーディング実践、デザイン解説 :closed_book::musical_note:](https://youtu.be/XrFD_0Pr6Nc)
- 修了時間 25m
- [Gridを使うとFlexboxより簡単に複雑なレイアウトを組めます :closed_book::musical_note:](https://youtu.be/cwkkD0ejX8Q)
- 修了時間 25m
- [よく使われるサイドバーデザインを一緒にコーディングしていきましょう :closed_book::musical_note:](https://youtu.be/UUPSC8ooDOk)
- 修了時間 20m
- [ハンバーガーメニューの作り方講座 :closed_book::musical_note:](https://youtu.be/9XVuUr4DbNU)
- 修了時間 35m
- [ハンバーガーメニューは実は悪いデザイン？代わりになるWebデザインを紹介します :closed_book::musical_note:](https://youtu.be/OOIz2nl5524)
- 修了時間 30m
- [下タブ（Bottom Navigation）のコーディング実践 :closed_book::musical_note:](https://youtu.be/NDj9awgjEu0)
- 修了時間 15m

### 8. JavaScript
- [JavaScript超入門コース 合併版 📕🎵](https://youtu.be/gs0l4rsQCGM)
- 修了時間 1h15m
- [これだけは覚えておけ！foreach / for-in / for-of 📕](https://kamesuke-blog.com/programming/javascript-for-in/)
- 修了時間 10m
- [JavaScript入門 基本操作編](https://codeprep.jp/books/3)
- 修了時間 30m
- [JavaScript演習 基本操作編](https://codeprep.jp/books/117)
- 修了時間 30m
- [class構文の使い方・書き方が分かるようになる方法！ 📕](https://www.sejuku.net/blog/49551)
- 修了時間 10m
- [JavaScript基礎 オブジェクト指向編](https://codeprep.jp/books/87)
- 終了時間 20m
- [【ES6】 変数・定数・関数の「正しい」宣言方法 📕🎵](https://youtu.be/EXxIVEC72mU)
- 修了時間 30m
- [JavaScriptのnullとundefinedの区別と使い分けをまとめてやんよ 📕](http://tokidoki-web.com/2014/12/javascript%E3%81%AEnull%E3%81%A8undefined%E3%81%AE%E5%8C%BA%E5%88%A5%E3%81%A8%E4%BD%BF%E3%81%84%E5%88%86%E3%81%91%E3%82%92%E3%81%BE%E3%81%A8%E3%82%81%E3%81%A6%E3%82%84%E3%82%93%E3%82%88/)
- 修了時間 5m
- [APIを超ざっくり解説！ 📕🎵](https://youtu.be/k0j88HoUT-o)
- 修了時間 15m
- [非同期処理の完了を待つ方法！Promise＆async/await 📕🎵](https://youtu.be/Vhnz1V-v1cU)
- 修了時間 25m
- [君たちは「即時関数」を知っているか 📕🎵](https://youtu.be/1VyEfy03NTg)
- 修了時間 20m
- [DOM操作できなきゃJS使う意味がない 📕🎵](https://youtu.be/dZyYqVOnrBg)
- 修了時間 20m
- [画像をアップロード＆プレビューしよう 📕🎵](https://youtu.be/7WmkYEZc3as)
- 修了時間 25m
- [JavaScriptによるDOM操作入門 📕](https://zenn.dev/ankouh/books/javascript-dom)
- 修了時間 25m
- [正規表現マスター講義 📕🎵](https://youtu.be/vncq2vWaGDI)
- 修了時間 35m
- [HTMLだけで入力を確認する方法 📕](https://qiita.com/mzmz__02/items/5436aff37a0adc5510d0)
- 修了時間 5m
- [inputの使い方とtype属性の一覧をサンプル付きで紹介 📕](https://webliker.info/39533/)
- 修了時間 10m
- [ユーザー操作に応じて画面を書き換えよう 📕🎵](https://youtu.be/549LwYas6O4)
- 修了時間 25m
- [実務で使える文字列操作５選 📕🎵](https://youtu.be/K_awsMSs-84)
- 修了時間 20m
- [よく使うES6の配列メソッド3選 📕🎵](https://youtu.be/VBuBGqPGALg)
- 修了時間 25m
- [JavaScriptでつくる残り文字数表示](https://codeprep.jp/books/35)
- 修了時間 15m
- [代入において時々現れる、括弧で囲まれた変数名は何なのか 📕](https://sbfl.net/blog/2019/08/26/javascript-bracketed-variables/)
- 修了時間 10m
- [JavaScript入門 ES6編](https://codeprep.jp/books/68)
- 修了時間 25m
- [JavaScript基礎 配列操作編](https://codeprep.jp/books/54)
- 修了時間 20m
- [連番の数字の配列を作成（es2015 ver) 📕](https://qiita.com/sakymark/items/710f0b9a632c375fbc31)
- 修了時間 5m
- [JavaScript演習 配列操作編](https://codeprep.jp/books/105)
- 修了時間 30m

### 9. React
- [Reactの基礎知識 :closed_book::musical_note:](https://youtu.be/Otrc2zAlJyM)
- 修了時間 15m
- [Reactに欠かせないJSXの解説 :closed_book::musical_note:](https://youtu.be/FuYdTDx8ZP4)
- 修了時間 15m
- [create-react-appで環境構築しよう :computer::musical_note:](https://youtu.be/P5lDbRxp9sI)
- 修了時間 50m
- [コンポーネント間でデータの受け渡しと再利用をしよう :closed_book::musical_note:](https://youtu.be/xhVcWoHAyTs)
- 修了時間 1h
- [コンポーネントのstateの設定・取得・変更 :closed_book::musical_note:](https://youtu.be/j4t0aZge0Mc)
- 修了時間 1h10m
- [ライフサイクルの流れを理解しよう :closed_book::musical_note:](https://youtu.be/2jRkPz4-hSo)
- 修了時間 50m
- [importとexportでモジュールを使いこなそう :closed_book::musical_note:](https://youtu.be/OHMDMixkVHk)
- 修了時間 30m
- [React Hooksでstateを扱おう :closed_book::musical_note:](https://youtu.be/Vzvbke_CLAs)
- 修了時間 40m
- [関数コンポーネントでライフサイクルを扱おう :closed_book::musical_note:](https://youtu.be/WrOzSzt6u3c)
- 修了時間 50m
- [Reactでチャットボットを作ろう :closed_book::musical_note:](https://youtu.be/MzJkWO73S70)
- 修了時間 15m
- [サクッと環境構築しよう :computer::musical_note:](https://youtu.be/MzJkWO73S70)
- 修了時間 20m
- [Firebaseプロジェクトの作成と初めてのデプロイ :computer::musical_note:](https://youtu.be/ta2m6nfYHuQ)
- 修了時間 50m
- [stateの設計とクラスコンポーネントの作成 :computer::musical_note:](https://youtu.be/ICr32kxTjG4)
- 修了時間 50m
- [繰り返し再利用できる関数コンポーネントを作ろう :computer::musical_note:](https://youtu.be/EOlvkGIk5RE)
- 修了時間 50m
- [条件分岐とコールバック関数のbind :computer::musical_note:](https://youtu.be/77aEj2DiczM)
- 修了時間 1h30m
- [Material-UIのスタイルをカスタマイズしよう :computer::musical_note:](https://youtu.be/9xgbLe_1Czg)
- 修了時間 40m
- [ライフサイクルの活用 :computer::musical_note:](https://youtu.be/HIsZYhcSr6Y)
- 修了時間 40m
- [問い合わせ用モーダルとSlack通知を実装しよう :computer::musical_note:](https://youtu.be/51Ln2X8QQBk)
- 修了時間 1h30m
- [Cloud FunctionsでAPIを作ってFirestoreを利用しよう :computer::musical_note:](https://youtu.be/vzqJBxYe4WA)
- 修了時間 1h30m
- [useCallbackでパフォーマンスを向上させよう :computer::musical_note:](https://youtu.be/Ta_0dsZHK_g)
- 修了時間 1h20m

### 10. React-Redux & Firebase
- [講座の概要【ECアプリを作ろう :closed_book::musical_note:](https://youtu.be/FBMA34gUsgw)
- 修了時間 20m
- [CRAとFirebaseで環境構築 :computer::musical_note:](https://youtu.be/3PvA-J3GHYQ)
- 修了時間 30m
- [Fluxフローは絶対に知っておいて :closed_book::musical_note:](https://youtu.be/so0JgVToRLk)
- 修了時間 35m
- [Actionsを書いてstateの変更を依頼しよう :closed_book::musical_note:](https://youtu.be/0JKkLZHmWxk)
- 修了時間 20m
- [Reducersの作り方とスプレッド構文の使い方 :closed_book::musical_note:](https://youtu.be/2j4c_O2s1uU)
- 修了時間 40m
- [Redux(Store)とReactを接続してstateを変更しよう :closed_book::musical_note:](https://youtu.be/t_-Tpc913B4)
- 修了時間 50m
- [URLに応じたコンポーネントを表示しよう :closed_book::musical_note:](https://youtu.be/nBB1rMLnrUc)
- 修了時間 50m
- [re-ducksパターンでファイル管理しよう :closed_book::musical_note:](https://youtu.be/cy-mqekl1z8)
- 修了時間 40m
- [redux-thunkで非同期処理を制御すべし :closed_book::musical_note:](https://youtu.be/wKQwCgZlEUY)
- 修了時間 40m
- [Storeと接続されたコンテナーコンポーネントを作ろう :closed_book::musical_note:](https://youtu.be/Q6O-6pRzpr4)
- 修了時間 40m
- [ECアプリの機能とデータ設計 :closed_book::musical_note:](https://youtu.be/8fNgXnVTULU)
- 修了時間 20m
- [Firebase Authで認証機能を作ろう :computer::musical_note:](https://youtu.be/PNvLGoop8z8)
- 修了時間 2h30m
- [Firebase Authで認証をリッスンしよう :computer::musical_note:](https://youtu.be/fxCr5TS5RQg)
- 修了時間 1h20m
- [Firestoreにデータをadd/setしよう :computer::musical_note:](https://youtu.be/Dq0uWRquuf4)
- 修了時間 1h30m
- [Cloud Storageに画像をアップ&プレビュー&削除 :computer::musical_note:](https://youtu.be/CDW_yryn1Rc)
- 修了時間 1h
- [useEffectで編集機能を作ろう :computer::musical_note:](https://youtu.be/tHox104UoOo)
- 修了時間 2h10m
- [商品を一覧表示しよう :computer::musical_note:](https://youtu.be/-I2-jsGkvF8)
- 修了時間 2h10m
- [Swiperで画像スライダーを作ろう :computer::musical_note:](https://youtu.be/ARPMHfUbtaE)
- 修了時間 1h50m
- [ネイティブアプリ風ヘッダーを作ろう :computer::musical_note:](https://youtu.be/aTqx0LMPpqI)
- 修了時間 50m
- [Drawerメニューを作ろう :computer::musical_note:](https://youtu.be/bw_oIwcIGA0)
- 修了時間 1h20m
- [Firestoreでリアルタイムに表示を更新しよう :computer::musical_note:](https://youtu.be/geDm_4GQjEQ)
- 修了時間 1h10m
- [トランザクションを使って商品を注文しよう（前半） :computer::musical_note:](https://youtu.be/62ZTwzn5_Qw)
- 修了時間 1h10m
- [トランザクションを使って商品を注文しよう（後半） :computer::musical_note:](https://youtu.be/fPOU4xH-3CY)
- 修了時間 2h30m
- [注文履歴を確認しよう〜コンポーネントの再利用〜 :computer::musical_note:](https://youtu.be/mHz8Ll8xtjE)
- 修了時間 1h20m
- [Firestoreの複合クエリで商品を条件検索しよう :computer::musical_note:](https://youtu.be/-la-WWHtBmk)
- 修了時間 1h20m

### 11. TypeScript
- [ReactとTypeScriptの相性が良すぎる理由を解説しよう :closed_book::musical_note:](https://youtu.be/X6haQpKrooM)
- 修了時間 20m
- [最速で学ぶTypeScript :closed_book::musical_note:](https://www.udemy.com/course/typescript-react-frontend/)
- 修了時間: 1h50m
- [最速で学ぶFirebase + React Hooks (TypeScript) :computer::musical_note:](https://www.udemy.com/course/firebasereact-hookstypescript-todo/)
- 修了時間: 3h
- [俺のReactがこんなに遅いわけがない【React.memoによるパフォーマンスチューニング】](https://youtu.be/s6HThFCXgsw)
- 終了時間: 20m
- [俺のReactがこんなに遅いわけがない【Hooks時代のパフォーマンスチューニング】](https://youtu.be/cNDEUPeOJTo)
- 修了時間: 25m

### 12. Next.js
- [Next.js入門 講座の概要 :closed_book::musical_note:](https://youtu.be/F77RUjHZEAc)
- 修了時間: 15m
- [Next.js入門 サクッと環境構築しよう :computer::musical_note:](https://youtu.be/IHkvcmXReyU)
- 修了時間: 40m
- [Next.js入門 高速ページ遷移を体感しよう :computer::musical_note:](https://youtu.be/PvpT9VCVBx0)
- 修了時間: 50m
- [Next.js入門 画像、メタデータ、そしてCSS :computer::musical_note:](https://youtu.be/D-q8K7TCN6I)
- 修了時間: 1h30m
- [Next.js入門 Pre-renderingの使い分け :computer::musical_note:](https://youtu.be/kCFvuI4K5fs)
- 修了時間: 50m
- [Next.js入門 Pre-renderingを体験してみよう :computer::musical_note:](https://youtu.be/h9wjVLwd2GQ)
- 修了時間: 1h
- [Next.js入門 Dynamic Routesの設定 :computer::musical_note:](https://youtu.be/x0ayN-ysbsI)
- 修了時間: 1h
- [Next.js入門 Catch-all Routesを使おう :computer::musical_note:](https://youtu.be/reLc17m-toY)
- 修了時間: 1h
- [Next.js入門 シンプルなAPIを作ろう :computer::musical_note:](https://youtu.be/sNcfMIULI80)
- 修了時間: 40m
- [Next.js入門 本番環境にデプロイしよう :computer::musical_note:](https://youtu.be/uqnSr7LtYGM)
- 修了時間: 50m
- [Next.js入門 TypeScriptを導入しよう :computer::musical_note:](https://youtu.be/uqnSr7LtYGM)
- 修了時間: 40m
- [Next.js入門 番外編！外部APIからデータを取得・表示しよう :computer::musical_note:](https://youtu.be/ILt3VBqbeds)
- 修了時間: 40m