【コーディング練習】Codestepさんの【HTML/CSS コーディング練習】入門編：プロフィールサイト／LP】を模写しました

今回はコーディング練習としてCodestepさんの【HTML/CSS コーディング練習】入門編：プロフィールサイト／LP</a>を模写しました。

写真追加では適当に写真を持って来てそれっぽくしてみました。

スマホ版とPC版があります。

見本

模写

写真追加

---

スマホ版

見本

模写

写真追加

---

感想

今回作ってみた感想としてHTML,CSSを一通り勉強し、初めてコーディングをしてみるという人向けの課題だったのでそこまで手こずることなく完成させることができました。制作時間は大体3時間ほどでpc版の方を作るのに大半の時間を費やしたという感じで、スマホ版はそこまで変更する点が無かったので1時間もかからず作ることができました。

この課題はflexbox、文字の配置、画像の配置、コンテンツ同士の間隔を復習できる課題でした。

 困った点としてpc版での自転車の画像を配置する時、両端ぞろえで配置しろという課題でした。私はflexboxのspace-betweenを使ったのですが画像同士の間隔が見本とは異なり大きくなってしまいました。その場合画像の大きさを変更するしかないのか。。。

---

最後に

ある程度HTML,CSSを勉強している方ならそこまで時間がかからず作成できるかと思います。自身が学んだことがちゃんと身についているか確認できる最適な課題でした。

ここまで読んでいただきありがとうございました。

コーディング、HP作成の出品もしていますので、ぜひ検討してみてください