フロントエンド案件修行 給食ぱん屋編に参加しました。
初めてゼロからWebサイトを作る経験として、とても楽しかったです。
こちらが４日間で作成した、給食ぱん屋のサイトです。
ドットインストールの動画で学んだ知識を実際に利用する、貴重な経験が出来ました。採点されるわけでもなく、正解が1つではなく、他の仲間が全く違うサイトを作成するのを見て、学びを深めました。初学者が一歩前進したい場合は、本当にお勧めです。
覚え書きとして、工夫した点をまとめてみました。
ヘッダー
- 各項目へジャンプする為の、ボタンを設置しました。
- ハンバーガーメニューも勉強し、書いてみましたが、項目が解りにくいので、最終的にはボタン設置に落ち着きました。
ヒーローエリア
- ３枚の写真を配置して、スライドショー的に切り替えるようにしました。最初、違うサイズの写真を配置したら、切り替わるごとに写真の大きさが代わり、この修正の仕方が解りませんでした。最終的には、同じサイズの写真でスライドショーをすることにしました。
- キャッチコピーを写真に重ねようとしましたが、文字が読みにくいのと、スライドショーの上にキャッチコピーを重ねる方法が解らず、スライドショーより上にキャッチコピーを置きました。
商品紹介セクション
- 画像が交互に来るように配置しました。
お知らせセクション
- 大きさの違う画像を並べたので、少し違和感がありますが、修正の仕方が解らずそのままにしました。
店舗情報セクション
- 最初は
<P>タグで内容を羅列していましたが、位置が揃わずしっくりこないので、最終的には、テーブルで配置してみました。
お問い合わせセクション
- 3つの囲いの始まりを揃えたかったのですが、上手くいかず、中央揃えにしました。
フッター
- 著作者情報とSNSアイコンを並べて見ました。Bootstrap Iconsのアイコンを使いました。