CBC 入門3#1 (簡単なTOPページ作成) 攻略法

CRI BOOT CAMP の TOPページの骨組みをつくる。

入門編の最後は、「Webサイトのトップ画面をつくる」という課題が出ている。
これを6時間でしなければいけない。

効率よく取り掛かるために自分なりにルールを決めようと思った。

CSSのクラスの名前のルールを決める。

CSSのクラスを決める時に、親か子かをはっきりわかるようにしておきたい。

だけど、「今回の課題もサンプルのクラス名を使って構築していきましょう。」と書いてある。

なるほど、みんなで開発するときは命名規則を守れないと大変だものね。

ただ、初心者の「あまうが」にとっては、ラッパーという概念がまだ定着してないので、サンプルのクラス名はわかりにくい…。

ま、決まりなので、命名規則に従ってコード書いておこう。
そして隣にコメントで自分が分かりやすい名前を付けておこう。

CBC ではわからないところの質問を「Slack」というツールで受け付けている。
「あまうが」は、Slackをはじめて使ったよ。
Slackの使い方も教えてくれるから安心して使えるよ。

枠組みの色を決める。

枠組みを親と子が分かりやすいように色分けする予定。

ただ、色を選ぶのもなかなか難しい。
だから最初から3パターン選んで適宜使うことにする。

配色に気を使ってみたよ。
最後には消すので単なる自己満(笑)。

簡単に配色を探せる サイトがあったよ。https://colorsupplyyy.com/app/

これを交互に使うと枠の仕組みが分かりやすくなるかな？

CBC入門3(コーダー上級) #1 の条件を確認する。

「あまうが」は、自分でコードを書いてみてから答え合わせとして正解のコードを見てみたいと思っている。

同じように考える人のために、CBCが設定している条件を書きだしておく。

ヘッダーの条件を確認する。

メインの条件を確認する。

メイン_KV(キービジュアル)設定

メイン_アバウトエリア

メイン_サービスエリア

ニュースエリア

フッターの条件を確認する。

まとめ

少しでも効率的に入門3の課題を終わらせるためのメモ。
目標の6時間すっかり超えてしまったけど、完成まで頑張るぞー！