Treat Myself

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

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

スポンサーリンク

 

headers

 

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

 

 

課題の内容

30Daysトライアル2ndでは通常の課題に加えて「余裕がある人向け課題」というのが用意されていまして、Day9ではHeaderのパターンをいろいろ作ってみるというチャレンジで4種類のHeaderパターンが用意されていました。

 

色々なヘッダーのデザインを用意したので、チャレンジしてみてください👍

コーディング上達のコツは、デザインを見た瞬間にコーディングの流れが思い浮かぶ状態になるまで手を動かしまくることです!

まずはコーディングしまくりましょう!!

 

「たくさん手を動かして、いろいろなデザインパターンのコーディングができる様になりましょう!」ってことですね。

 

30Daysトライアル2ndの本課題はローカル環境で制作していますが、余裕がある人向け課題は「CodePen」というオンラインエディタで作成して、コーディングパターンのバリエーションとして今後の参考資料にしていきます。

 

「CodePen」ってなに?っていう場合はこちらの記事でご紹介してます↓

treatmyself.hatenablog.jp

 

課題のリンクとイメージ

課題のURLこちら↓

https://xd.adobe.com/spec/a05c5ee9-27a3-42cb-5985-801adec0516f-d66d/grid

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

 

課題のイメージ↓ 

headers

 

Headerが違うだけでかなり印象が変わりますよね。

要素の配置の違いもあるとは思いますが、青のバックグラウンドのナビゲーションバーの中に赤があるとすごく目を引くので、色の影響力はすごいなと感じます。

 

チャレンジ結果

課題のカンプではトップページまでありましたが、Headerのみコーディングしました。

また、ロゴの写真はは挿入せずにロゴが入るべきところは色を変えてあります。

 

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

 

製作時間は約3時間ほどでした。

ホーバーの動きなどはついていないのですが、課題のデザインにかなり近づけたのではないかなと思っています。

 

最後に

30Daysトライアル2ndの本課題を進めるだけでもできることがどんどん増えていくので、まずは本課題をしっかり進めながら時間があるときに是非「余裕がある人向け課題」にもチャレンジしてみてください。

 

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

 

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

 

treatmyself.hatenablog.

 

treatmyself.hatenablog.jp