- develop 上流ブランチ（一番上のブランチ）
- practice-html HTML課題用のブランチ。developの子ブランチ
- practice-css CSS・Bootstrap課題用のブランチ、developの子ブランチ
- practice-demo 模写コーディング用のブランチ
- MDNを読んだり、動画見たりして知識をつけてください。
- 全部を見る必要は無い！（MDNは情報が多すぎるので全部読まなくて良い）
- できればインプットは家や大学で読んだり、見ておいてほしい。集まるときはできるだけアウトプットをしつつ、分からないことを聞いてほしい。
- HTML→CSS→模写コーディングの順で課題を進める。
- それぞれの課題とブランチ名は一緒なので、順番に課題を進めること。
- 具体的な手順は、このドキュメントのそれぞれの課題説明のところを見てください。
- CSSの中にBootstrapというのが含まれていますが、できれば模写コーディングするときもBootstrapを使ってほしい。
- ここまでくればある程度力が付いているので、WINCのHPや入会用のサイトをみて、問題点(issue)を考えてみよう！
- まずは、このリポジトリ（フォルダ）が自分のパソコンの中にない人はクローンしてください。 具体的なコマンドや操作はマニュアルを参照。
- クローンしたら、以下のコマンドをターミナルで入力してください。（著者がコマンドで普段操作しているので、GUIのやり方が分かりません。。わかる人いたら連絡してください）
(ここはクローンしたフォルダのパス名) git fetch origin practice-html
(ここはクローンしたフォルダのパス名) git checkout practice-html
- 今やった操作は、remoteにあるブランチ（github上にあるブランチ）を自分のリポジトリにダウンロードしてきたという意味です。
- 今のブランチが
practice-htmlにいることを確認した状態で、新たにブランチを切ってください。（必ずpractice-htmlブランチから切ること）
git checkout -b html-OOO OOOは自分の名前かユーザ名 GUIの人は、名前を例のようにして切ってください
- ブランチを切れたら、その中にフォルダ（フォルダの名前は、自分の名前かユーザ名）を新規作成してください。
- そしたら、フォルダの中に次のファイルを新規作成してください。 1. practice.md 2. practice1.html 3. practice2.html 4. practice3.html
- 準備は完了
- 準備でいろいろブランチを切ったりしたけど、理由としてプルリクの流れを体験してほしいからです。
- なぜ？
- 実際にWINCのHPを改修することになったときは、プルリクベースで開発していくことになります。
- また、皆さんがエンジニアになるかはさておき、Web制作のバイトやインターン、エンジニアのインターンではgitやgithubの操作はもちろん、プルリクなどは日常的に使います。
- もし、将来その辺のインターンを狙っている人は今のうちに経験しておくべきです。（インターンの選考の際にプラスに多分なります。。）
- 課題の提出について
- 課題はプルリクで出してもらい、レビュワーがコードや答えをみてレビューする形をとります。
- プルリクの発行は各課題のところに書いておいたので、それをみてプルリクを作ること。
- 課題の提出は、活動日が終わるごとに出してください。
- レビュワーについて
- レビュワーは、基本的にリーダーにやってもらいたいと思っています。
- しかし、チームによっては初心者がリーダーをやっているところが多いと思うので、その場合はチーム内である程度HTML/CSSが分かる人がレビュワーになってください。
- それでもいない場合は、manasan-iTLを指定してください。
- 以下の課題をやってください。理論編問題は「practice.md」に、実践問題（コードを書く問題）は「practice.html」に書くこと。
- プルリクの作り方
- 課題提出のさいは、baseをpractice-html comparedをhtml-OOO(自分が作ったブランチ名)にしてプルリクを出して提出すること。
- レビュワー（リーダーかmanasan-iTL）とアサイン（自分）を指定。
- タイトルと内容にはＨＴＭＬの課題的な感じでどの課題をやったかを書くこと。
- レビュワーからＯＫが出れば次の課題に進んでください。修正コメントをもらったら直して変更内容をcommitしてpushすること。
- 問１ HTMLはなぜ必要なのか？
- 問２ 要素と属性について、それぞれどのようなものか？
- 問３ 要素と属性について具体的なものを、できるだけ（常識の範囲内で）書いてください。
- 問４ インライン要素とブロック要素の違いを書いてください。
- 問５ インライン要素とブロック要素について具体的なものを書いてください。
- このサイトを元に、正しい要素を使ってマークアップ（HTMLファイル）してください。また、以下の条件を守ること。
- 条件
- practice1.html内に記述すること。
- 他の条件は上のサイトの条件を遵守すること。
- 答えは終わってから、どうしてもわからないときのみ見ること。できる限り周りと話したりしてみてください。
- このサイトを元に、正しい要素を使ってマークアップ（HTMLファイル）してください。また、以下の条件を守ること。
- 条件
- practice2.html内に記述すること。
- 他の条件は上のサイトの条件を遵守すること。
- 答えは終わってから、どうしてもわからないときのみ見ること。できる限り周りと話したりしてみてください。
- このサイトを元に、正しい要素を使ってマークアップ（HTMLファイル）してください。また、以下の条件を守ること。
- 条件
- practice3.html内に記述すること。
- トップページのみやること。トップページの条件はサイトの条件に従うこと。
- 最初からコーディングすること。
- 答えは終わってから、どうしてもわからないときのみ見ること。できる限り周りと話したりしてみてください。
- プルリクの作り方
- HTML課題の準備の５までは作業自体は一緒。
- 変わるのは、
pracitce-cssとかcss-OOOの部分ぐらいです。 - ここからHTMLの方とは違う
- 変わるのは、
- フォルダの中に、さらにCSS課題に合わせてフォルダを作ってください。（例えば第1回の課題ならフォルダ名は「第1回」等分かれば良い）
- その中に、index.htmlを作り課題に沿って進めてください。
- 結構メンドイケドそうしたほうが、レビューがしやすいので。
- コミットの粒度は適当で良いです。一定のところまでやってコミットして、プッシュして、プルリクを作成してください。 4. この辺の操作はHTML課題の準備や、別途マニュアルを参照してください。
- 問１ CSSの役割は何か？
- 問２ セレクタとプロパティについてそれぞれ説明してください。
- 問３ セレクタとプロパティの具体的なものを書いてください。加えて、セレクタに関してはそれぞれのセレクタの違いを説明してください。
- 問４ スタイルの適用方法を3つ
- 問５ Bootstrapとは何か？ 普通のCSSと何が違うのか？ 利点は何か？ できるだけ多く、自分の言葉で説明してみてください。
- このサイトのCSS課題を一通り進めること。
- 分かるものに関しては全然とばして構わない。
- 進め方は上の進め方を参照してね。
- 余力がある人
- ↑の課題をBootstrapでやってみたり、もしくはBootstrapのチュートリアルなどをやってみてください。
- もしくは、どんどん模写コーディングの方に移って実践をするのも良し！！
- HTML課題の準備の５までは作業自体は一緒。
- 変わるのは、
pracitce-demoとかdemo-OOOの部分ぐらいです。 - ここからHTMLの方とは違う
- 変わるのは、
- フォルダの中に必要なファイルを作成してください。ここは、課題によって違うかも
- コミット粒度は適当で構いません。
- このサイトの入門編・初級編のいずれかのサイトを模写コーディングすること。
- 入門編や初級編でも結構難しいと思います。
- 模写コーディングは、px単位で合わせなくて大丈夫です。(pxパーフェクト)ある程度同じであればOKです。
- 一回模写コーディングが終わったら、今度はBootstrapでスタイルを当てて三でください。
- Bootstrapを当てるときは、別でフォルダを作ってください。
- 模写コーディングは今までの課題より結構難しいと思います。なので取り組み方と技術的なアドバイスを書いておきます。
- 取り組み方
- 悩みすぎないこと。最大5~10分考えて分からなかったら、調べる→Discordやチームメンバーに質問する→答えを見るというサイクルを回してください。同じ個所で止まっていても時間がもったいないです。できるだけ調べたり、質問したりして答えを見ないほうが良いです。そうしたほうが知識も記憶に残りやすいし、調べ方や質問の仕方の経験になります。（ただ、30分ぐらいかかりそうだったら答えを見てください）
- 質問することに躊躇しないこと。分からないことがあるのは当たり前なので、メンバーでもDiscordでも良いので質問をしてください。Wincに入っていて質問をしないのは、一人で勉強している状態とあまり変わらないので積極的に利用してください。
- 質問を躊躇しないこと
- 質問を躊躇。。（以下略）
- 技術的なアドバイス
- 最初に大枠の設計をしてください。いきなりコーディングをするのはベテランでもない限り不可能に近いです。
- 実際、できる人ほど設計に時間をかけています。
- プログラマーやエンジニアは「コード書く」よりも「考えている」時間の方が長いです。
- 設計は、レイアウト→パーツの切り出し→個々のパーツはどのようにCSSを当てればできそうかの順で考えます。（あくまで著者の自己流）
- 最低でも、レイアウトの設計はやったほうが良いです。
- レイアウトは、Webページがどんな感じの構成になっているかを考えます。
- 例えば、1カラム(header, main, footer) or 2(header, main , aside, footer)カラムなのかみたいな感じです。
- 1カラム = ヘッダーとメインコンテンツ、フッターのみの構成になっているもの
- 2カラム = メインコンテンツのほかに、サイドバーがあるレイアウトのこと。
- 詳しくは、Webページ レイアウト とかでググると出てくると思います。
- パーツの切り出しは、レイアウトから大きめのパーツを切り出すことです。
- ヘッダーとか、フッターとか、メインコンテンツとか
- さらに、ヘッダーの中にはナビゲーションバーとか、ロゴがあるみたいにそれぞれのパーツを切り出していきます。
- 個々のパーツはどのようにCSSを当てればできそうかを目星ぐらいをつけておくと後が楽。
- レイアウト関係ででてくるCSS
- Width, height, max-width(height), min-width(height)
- Flexbox
- Grid, Bootstrap Grid System
- positon
- 他にもありそうだけど、ここら辺使えればある程度できます。
- 設計がある程度すんだら、レイアウトを組む→組んだレイアウトの中にパーツをいれていく感じでやっていくと良いかも。やり方が確立している人はそれでやっても全然OK