架空サイトのコーディング

OVERVIEW

素材がある状態でコーディングのみ練習

twitterで知り合ったWebデザイナーさんから素材をいただいて、コーディングのみに焦点を当てて制作


制作時間:5時間


学び:

  • calcの使い方(ハンバーガーメニューのCSSで使用)
  • linear-gradientの使い方(背景画像の色替えで使用)
  • tbodyの使い方(テーブル内で使用)

工夫:

  • メールのアイコンはFont Awesomeを利用
  • 地図にGoogle Mapの埋め込みを利用

課題:

  • 途中、疑似要素が上手く実装できず試行錯誤したが、結果的にクラス名のスペルがmenuではなくmeneとなっていたことが原因だった。このようなケアレスミスをなくす方法を考えていきたい。エディタの拡張を機能などを見直す。
  • レスポンシブ化に対応させる(ヘッダー固定、ハンバーガーメニュー実装)
  • モバイルファーストでLPサイトを制作する