front-levelup

N 予備校１章の知識を復習し、拡張する。

この教材で学べること

TRの延長としてHTML,CSS,JSを学ぶ。N予備校１章の知識でできることをより習得する。

4択クイズアプリ

４択のクイズを複数連続で回答していく。

TODOリスト

TODOリストを作成する。検索機能がついている。また、ローカルストレージ(ブラウザのデータベース)に保存しているためタブを閉じてもPCの電源をきってもデータが残る。

３目並べ

○×ゲームを作る。

心理テスト

バートルテスト(大規模オンラインゲームにおけるキャラクター性分類テスト)を作成する。

Webサイト

自己紹介やポートレート系サイトの作り方を学ぶ。

このレポジトリの使い方

1. コースを決める
2. 各章は README.md をまず読んでからすすめる
3. 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)
• [] リントツール
• [] 整形ツール