# Webフロント
## 1. HTML&CSS
- [非エンジニアでもわかる！Webサービス・アプリが動く仕組み 📕🎵](https://youtu.be/zq50JwOU_ls)
- 修了時間 20m
- [HTML&CSS初級編](https://prog-8.com/html/study/1/1)
- 修了時間 3h50m
- [HTML基礎 HTMLの仕組み編](https://codeprep.jp/books/123)
- 修了時間 15m
- [メタタグとは？SEO効果は？metaタグ一覧と書き方まとめ 📕](https://saruwakakun.com/html-css/basic/meta-tag)
- 修了時間 5m
- [HTMLのlinkタグとは？基本的な書き方とrel属性まとめ 📕](https://saruwakakun.com/html-css/basic/link-rel)
- 修了時間 5m
- [head内に書くべきタグを総まとめ：SEO対策に有効なものは？ 📕](https://saruwakakun.com/html-css/basic/head)
- 修了時間 5m
- [Twitterカードとは？使い方と設定方法まとめ 📕](https://saruwakakun.com/html-css/reference/twitter-card)
- 修了時間 5m
- [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
- [Transform（変形）関連のまとめ 📕](https://qiita.com/7968/items/eddfeb4b424d7c2d2d34)
- 修了時間 10m
- [Transition（変化）関連のまとめ 📕](https://qiita.com/7968/items/812d6a21fc4dd9ae9c75)
- 修了時間 10m
- [z-indexのベストプラクティスを考える 📕](https://zenn.dev/catnose99/articles/2f1be29dd203c10dff01)
- 修了時間 5m
- [画像の遅延読込に役立つamp-imgの使い方 📕](https://ics.media/entry/18237/)
- 修了時間 5m
- [新プロパティmix-blend-modeを使いこなそう 📕](https://ics.media/entry/7258/)
- 修了時間 5m
- [position: stickyの面白い使い方と使用時の注意点 📕](https://parashuto.com/rriver/development/position-sticky)
- 修了時間 10m
- [CSSでできる色々な影の表現と意外に知らない落とし穴 📕](https://ics.media/entry/200406/)
- 修了時間 5m
- [CSSで中央寄せする9つの方法（縦・横にセンタリング）📕](https://saruwakakun.com/html-css/basic/centering)
- 修了時間 5m
- [メディアクエリの「メディアタイプ」を理解しよう(前編) 📕🎵](https://youtu.be/79Dr3RGm0SI)
- 修了時間 10m
- [メディアクエリの「メディアタイプ」を理解しよう(後編) 📕🎵](https://youtu.be/B8LnpwiiOzE)
- 修了時間 20m
- [最強に便利なCSSの比較関数 min, max, clamp を紹介！ 📕🎵](https://youtu.be/oXHmEK_z-lo)
- 修了時間 15m
- [なんとなくで書かないで！HTML5を書く時に気にしてみたいタグごとのお約束 📕](https://qiita.com/mikimhk/items/05b303d932093eb4c0d1)
- 修了時間 10m
- [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) の使い方をゲームで学ぼう！ 📕🎵](https://youtu.be/FU4RocY_Y1k)
- 修了時間 30m
- [FLEXBOX FROGGY](https://flexboxfroggy.com/#ja)
- 修了時間 30m
- [ flexbox の flex プロパティの使い方を徹底解説 📕🎵](https://youtu.be/TXwY_SWO07U)
- 修了時間 15m
- [聖杯レイアウトのコーディング実践、デザイン解説 📕🎵](https://youtu.be/XrFD_0Pr6Nc)
- 修了時間 25m
- [Gridを使うとFlexboxより簡単に複雑なレイアウトを組めます 📕🎵](https://youtu.be/cwkkD0ejX8Q)
- 修了時間 25m
- [よく使われるサイドバーデザインを一緒にコーディングしていきましょう 📕🎵](https://youtu.be/UUPSC8ooDOk)
- 修了時間 20m
- [ハンバーガーメニューの作り方講座 📕🎵](https://youtu.be/9XVuUr4DbNU)
- 修了時間 35m
- [ハンバーガーメニューは実は悪いデザイン？代わりになるWebデザインを紹介します 📕🎵](https://youtu.be/OOIz2nl5524)
- 修了時間 30m
- [下タブ（Bottom Navigation）のコーディング実践 📕🎵](https://youtu.be/NDj9awgjEu0)
- 修了時間 15m
- [Chrome DevToolsの使い方を徹底解説！Chrome Developer Toolsを使いこなすと開発効率が上がる！ 📕🎵](https://youtu.be/awRkFcv51r4)
- 修了時間 30m
<br> **└期限 2020/12/18**

## 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
- [HTMLコーダーがおさえるべきinputタグの書き方まとめ 📕](https://ics.media/entry/11221/)
- 修了時間 5m
- [ユーザー操作に応じて画面を書き換えよう 📕🎵](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の基礎知識 📕🎵](https://youtu.be/Otrc2zAlJyM)
- 修了時間 15m
- [Reactに欠かせないJSXの解説 📕🎵](https://youtu.be/FuYdTDx8ZP4)
- 修了時間 15m
- [React I](https://prog-8.com/lessons/react/study/1)
- 修了時間 1h40m
- [create-react-appで環境構築しよう 💻🎵](https://youtu.be/P5lDbRxp9sI)
- 修了時間 50m
- [コンポーネント間でデータの受け渡しと再利用をしよう 📕🎵](https://youtu.be/xhVcWoHAyTs)
- 修了時間 30m
- [コンポーネントのstateの設定・取得・変更 📕🎵](https://youtu.be/j4t0aZge0Mc)
- 修了時間 20m
- [ライフサイクルの流れを理解しよう 📕🎵](https://youtu.be/2jRkPz4-hSo)
- 修了時間 25m
- [importとexportでモジュールを使いこなそう 📕🎵](https://youtu.be/OHMDMixkVHk)
- 修了時間 20m
- [はじめてのReact](https://codeprep.jp/books/104)
- 修了時間 20m
- [Reactで作るTodoアプリ](https://codeprep.jp/books/116)
- 修了時間 30m
- [React Hooksでstateを扱おう 📕🎵](https://youtu.be/Vzvbke_CLAs)
- 修了時間 20m
- [関数コンポーネントでライフサイクルを扱おう 📕🎵](https://youtu.be/WrOzSzt6u3c)
- 修了時間 25m
- [Reactでチャットボットを作ろう 📕🎵](https://youtu.be/MzJkWO73S70)
- 修了時間 15m
- [サクッと環境構築しよう 💻🎵](https://youtu.be/MzJkWO73S70)
- 修了時間 20m
- [Firebaseプロジェクトの作成と初めてのデプロイ 💻🎵](https://youtu.be/ta2m6nfYHuQ)
- 修了時間 50m
- [stateの設計とクラスコンポーネントの作成 💻🎵](https://youtu.be/ICr32kxTjG4)
- 修了時間 50m
- [繰り返し再利用できる関数コンポーネントを作ろう 💻🎵](https://youtu.be/EOlvkGIk5RE)
- 修了時間 50m
- [条件分岐とコールバック関数のbind 💻🎵](https://youtu.be/77aEj2DiczM)
- 修了時間 1h30m
- [Material-UIのスタイルをカスタマイズしよう 💻🎵](https://youtu.be/9xgbLe_1Czg)
- 修了時間 40m
- [ライフサイクルの活用 💻🎵](https://youtu.be/HIsZYhcSr6Y)
- 修了時間 40m
- [問い合わせ用モーダルとSlack通知を実装しよう 💻🎵](https://youtu.be/51Ln2X8QQBk)
- 修了時間 1h30m
- [Cloud FunctionsでAPIを作ってFirestoreを利用しよう 💻🎵](https://youtu.be/vzqJBxYe4WA)
- 修了時間 1h30m
- [useCallbackでパフォーマンスを向上させよう 💻🎵](https://youtu.be/Ta_0dsZHK_g)
- 修了時間 1h20m
- [VS Codeの使い方講座！日本語化する拡張機能のインストールも紹介！ 📕🎵](https://youtu.be/csOaPNMDEwg)
- 修了時間 30m
- [VS Code ショートカット 📕🎵](https://youtu.be/cNyvefTJOcM)
- 修了時間 35m
- [Prettierの使い方解説 📕🎵](https://youtu.be/zoaIv5ifoPI)
- 修了時間 10m
- [頼むからエンジニアは全員『リーダブルコード』を読んでくれ 📕🎵](https://youtu.be/XZKgdM5x_ds)
- 修了時間 15m
- [JavaScriptのコーディングルールを決めよう 📕🎵](https://youtu.be/12gb3pCuzV4)
- 修了時間 20m
- [プログラムにマジックナンバーを使うべきでない理由を解説しよう 📕🎵](https://youtu.be/OnTtXy6x3ZU)
- 修了時間 15m
- [アトミックデザインのすゝめ 📕🎵](https://www.youtube.com/watch?v=Un0aoW0kNeE)
- 修了時間 25m
- [Reactのスタイリング方法を比較する 📕🎵](https://youtu.be/6yH9bhEHTgk)
- 修了時間 20m

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

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

## 12. Next.js
- [お前らはまだNext.jsのスゴさを知らない 📕🎵](https://qiita.com/thesugar/items/47ec3d243d00ddd0b4ed)
- 修了時間 20m
- [Next.jsにおけるSSG（静的サイト生成）とISRについて（自分の）限界まで丁寧に説明する 📕](https://qiita.com/thesugar/items/47ec3d243d00ddd0b4ed)
- 修了時間 20m
- [Next.js入門 講座の概要 📕🎵](https://youtu.be/F77RUjHZEAc)
- 修了時間: 15m
- [Next.js入門 サクッと環境構築しよう 💻🎵](https://youtu.be/IHkvcmXReyU)
- 修了時間: 40m
- [Next.js入門 高速ページ遷移を体感しよう 💻🎵](https://youtu.be/PvpT9VCVBx0)
- 修了時間: 50m
- [Next.js入門 画像、メタデータ、そしてCSS 💻🎵](https://youtu.be/D-q8K7TCN6I)
- 修了時間: 1h30m
- [Next.js入門 Pre-renderingの使い分け 💻🎵](https://youtu.be/kCFvuI4K5fs)
- 修了時間: 50m
- [Next.js入門 Pre-renderingを体験してみよう 💻🎵](https://youtu.be/h9wjVLwd2GQ)
- 修了時間: 1h
- [Next.js入門 Dynamic Routesの設定 💻🎵](https://youtu.be/x0ayN-ysbsI)
- 修了時間: 1h
- [Next.js入門 Catch-all Routesを使おう 💻🎵](https://youtu.be/reLc17m-toY)
- 修了時間: 1h
- [Next.js入門 シンプルなAPIを作ろう 💻🎵](https://youtu.be/sNcfMIULI80)
- 修了時間: 40m
- [Next.js入門 本番環境にデプロイしよう 💻🎵](https://youtu.be/uqnSr7LtYGM)
- 修了時間: 50m
- [Next.js入門 TypeScriptを導入しよう 💻🎵](https://youtu.be/uqnSr7LtYGM)
- 修了時間: 40m
- [Next.js入門 番外編！外部APIからデータを取得・表示しよう 💻🎵](https://youtu.be/ILt3VBqbeds)
- 修了時間: 40m