Treat Myself

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

【30DAYSトライアル 2nd】デザインカンプコーディング編②のまとめ&感想(DAY12からDAY16)

スポンサーリンク

30days trial 2nd

一気にやろうとすると大変かもしれないですが、毎日積み上げていくと完成できるように課題が構成されていて、デザインカンプからのコーディングもDAY16でいったん完成しちゃいます。

DAY12からDAY16の課題と気付いた点をまとめました。

 

 

Day12: ボタン・見だしの幅広いバリエーションにチャレンジ

<課題>

 

<感想>

 様々なバリエーションの見出し・ボタンを作るのはとても勉強になりました。

苦手意識が大きい疑似要素も容赦なく出てくるのでなんとか使いこなす必要がありました。。

 

なんとかできたコードをCodePenに保存して今後のためにいつでも参照できるようにしておきます。

(ボタンの方はDAY17の課題のアニメーションもつけたので、別の記事で載せます)

See the Pen Day12 Titles (30days trial 2nd ) by Yaponka (@Yaponka) on CodePen.

 

Day13: ニュースセクションのコーディング

<課題>

 

<感想>

 記事と記事の間にあるボーダーがくせ者です。ご想像の通りそろそろおなじみの疑似要素を使いました。

 

私はボーダートップを各ニュースに付けて一番上のニュースだけにはボーダがあたらないやり方で乗り切ってます。

 

Day14: テーブル作成とGoogle mapの埋め込み

<課題>

 

<感想>

 テーブルってHTMLの基礎で一応学んではいたけど。。。っていう感じだったので今回実践でテーブルを作って理解が深まりました。

 

オススメされていた参考記事をしっかり読むとかなり理解できますし、課題は問題なくこなせるはずです。

 

参考記事載せておきます↓

CSSでテーブルを作る上で実践的に覚えておきたいこと | HPcode

HTMLのtableでテーブルを作る方法と応用テクニックを解説 | webliker

 

Day15: お問い合わせフォームのコーディング

<課題>

 

<感想>

 苦手なことばっかりで辛いですが、フォームは本当に苦手な部分のひとつです。

参考記事として紹介されてた「はにわまん」さんの記事のおかげで乗り切れました。

標準のフォームのスタイルをリセットしてから作りたいフォームのスタイルをあてるためCSSの記述量が多くなるので、SASSの@mixin機能を使うとすっきり書けますよ。

 

 

Day16: フッターセクションのコーディング

<課題>

 

<感想>

フッターの背景色はよーく見るとグラデーションになってるんです!

なのでCSSでグラデーションの設定が必要になります。私はサルワカさんの記事を参考にグラデーション問題を解決しました↓

CSSのグラデーション(linear-gradient)の使い方を総まとめ!

 

最後に

DAY9でデザインカンプの完成版を見たときは「自分にこれができるのか?」と不安に思いましたが、毎日課題を進めていくとなんとか私でも完成版とほぼ同じにすることができました!

コーディングに関して苦手なことだらけで、よく考えたら得意なことがまだ見当たりませんが、30DAYSトライアルを続けることで日々成長を感じられることに楽しさを見いだしています。

 

*30DAYSトライアル2ndの他の課題と感想のまとめも気になる方はこちらの記事をどうぞ↓

treatmyself.hatenablog.jp