Treat Myself

海外生活中アラサー女子の英語・プログラミング学習備忘録

余裕がある人向け課題 カード編 【30Daysトライアル2nd】

スポンサーリンク

cards

30Daysトライアル2nd Day10余裕がある人向け課題をやった感想記事です。

 

 

課題の内容

30Daysトライアル2nd Day10では横並びのカードの実装を行い、余裕がある人向けの課題では、

  • 別の横並びCSSを試す
  • カードの他パターンのコーディング

が出題されました。

 

「別の横並びCSSを試す」とは要素を横並びにするCSS指定方法をいろいろ試してみるということで、本課題をflex boxを使って完了させた場合は,

  • display: inline-block
  • float: right 又は left

を使って同じ様に横並びにチャレンジします。

 

「カードの別パターンのコーディング」は課題とは別にカンプが用意されているのでカンプ通りにカードを実装していきます。

 

カードの他パターンのコーディング課題のリンクとイメージ

課題のURLこちら↓

https://xd.adobe.com/spec/e25505bc-fa86-4093-4448-a5321aff099a-9464/grid

(パスワードは東フリさんのスラックに参加すると確認できます)

 

 課題のイメージ↓ 

cards

 

どれもよくWebサイトで見かけるデザインなので、できるようになったらコーディングの幅も広がるはずですよね。

 

チャレンジ結果

 flex boxがいかに便利か実感したので、他パターンのカード実装も横並びはflex boxに頼りっぱなしになっています。

 

See the Pen 30 DAYS trial 2nd cards by Yaponka (@Yaponka) on CodePen.

 

ブログを書くために振り返ってみたら、

  • レスポンシブになっていない
  • 「Price」はそもそもやってない

ということに気付きました。。。

中途半端な出来なのに記事をかいてしまって申し訳ないですが、記事を書くために振り返って気付けることができてよかったです。

 

*スマホにはまだ対応していませんが、PCとタブレットのみレスポンシブ対応にしました。

*「Price」も作りました。(気付けてよかったです) 

 

最後に

 30Daysトライアルをやっていると毎日新しい課題をこなすので、課題をやり遂げることでいっぱいいっぱいになりがちですが、感想記事を書くことによって振り返りができて、さらに気付かないうちに抜けていたことに気付けることができました。

 

引き続き30Daysトライアル2ndの本課題に加えて「余裕がある人向け課題」の感想記事もアップしていきますね。

 

30Daysトライアル2ndの本課題の感想はこちら↓

 

treatmyself.hatenablog.jp