levelups
front-levelup
N 予備校１章の知識を復習し、拡張する。
この教材で学べること
TRの延長としてHTML,CSS,JSを学ぶ。N予備校１章の知識でできることをより習得する。
4択クイズアプリ
４択のクイズを複数連続で回答していく。
TODOリスト
TODOリストを作成する。検索機能がついている。また、ローカルストレージ(ブラウザのデータベース)に保存しているためタブを閉じてもPCの電源をきってもデータが残る。
３目並べ
○×ゲームを作る。
心理テスト
バートルテスト(大規模オンラインゲームにおけるキャラクター性分類テスト)を作成する。
Webサイト
自己紹介やポートレート系サイトの作り方を学ぶ。
このレポジトリの使い方
- コースを決める
- 各章は README.md をまず読んでからすすめる
- README.md の内容を理解したら、余裕があれば、各章のコードを自分でも実装してみる。
コース
HTML,CSS,JS アプリコース
TR で学んだ内容を復習し TR よりも進化した技術で作る。アプリサンプルは自分が作りたいものに近いものを１つ選ぶ。
| week | コンテンツ |
|---|---|
| 1 | イントロ |
| 2 | #1HTML タグ, #2DOM 操作, #３イベント, |
| 3 | #4 スタイル, #5 動的クラス変更, |
| 4 | #6 データの保持, 応用編 便利な css の flex |
| 5 | アプリサンプル |
| 6 | 自作アプリ |
| 7 | 自作アプリ |
| 8 | 自作アプリ |
| 9 | 自作アプリ |
| 10 | 発表資料作成 |
| 11 | 最終発表会 |
余裕あれば応用編の次のやつにトライ
- アロー関数
- 高階関数
ホームページコース
TR で学んだ内容を復習し TR よりも進化した技術で作る。
| week | コンテンツ |
|---|---|
| 1 | イントロ |
| 2 | #1HTML タグ, #2DOM 操作, #３イベント, |
| 3 | #4 スタイル, 応用編 便利な css |
| 4 | 応用編 メディアクエリ |
| 5 | 応用編 CDN によるライブラリ追加 |
| 6 | Web サイトサンプル |
| 7 | 自作サイト |
| 8 | 自作サイト |
| 9 | 自作サイト |
| 10 | 発表資料作成 |
| 11 | 最終発表会 |
レベル高めの人向け
- 「#3 モダン開発編」をやってみる
- 「#4 発展編」をやってみる
スキルツリー
実装進捗
基本編
- #1 HTML タグ
- #２ DOM 操作
- #３ イベント
- #４ スタイル
- #5 動的クラス変更
- #６ データの保持
応用編
- CDN によるライブラリ追加
- アロー関数
- ３項演算子
- ローカルストレージ
- 便利な css
- flex
- position
- 画像 tips
- メディアクエリ
- 高度な配列の操作
Web アプリサンプル
- ４択クイズアプリ
- TODO リスト検索アプリ
- 三目並べ
- 心理テストアプリ
Web サイトサンプル
- 基本
モダン開発編
- [] NodeJS を使った開発環境(npm)
- [] リントツール
- [] 整形ツール