サイトコーディング練習

CF　torikumu　HTML/CSS実践　DAY40
【★実践課題01】サイトコーディングにチャレンジしよう！

デザインカンプ指示からコードヒントなしでの作成に初挑戦しました。
※トップページのみ

デザインカンプ

完成（動画キャプチャ）

気を付けた事

命名規則に気を付ける。
共通のクラス名でコードをシンプルにして作業効率も向上させる。

一朝一夕でできるものではないけど、意識してやってこうと思います。

難しかった事

レスポンシブ対応
画面幅が変わる事でくずれる要素達・・・
「単位」の付け方で改善させながら細かい調整を繰り返してとりあえず形になったかなという感じです。
ハンバーガーメニューは何回かやらないと覚えられない。
jQueryもまだ全然理解してないので今後の学習に取り入れていきたいです。

ヘッダーの固定
ヘッダーの固定は指示には無かったのですが、やってみたくて挑戦。
「position: fixed」に振り回されました。
画面幅いっぱいあったヘッダーが左に凝縮されてしまう・・・

.header-wrap {
height: 90px;
padding: 22.5px 0px;
background: #fff;
position: fixed;
top: 0;
left: 0;
width: 100%;　←これで解決
z-index: 1000;
filter: drop-shadow(0px 10px 10px rgba(0, 0, 0, 0.3));
}

コード一つで数時間グーグル徘徊。スクールに尋ねたらよかった・・・

サイト模写を終えて

授業やtorikumuで学習した事を活かして、コードヒントなしでなんとか作成できました。

少しずつ作成したので、数日空いて続きをした時に「このコードなんやっけ？」となる事がありました。
「コメントアウト」を自分なりにこまめに付けてたのが救いでした。
コメントアウト大事だと実感。
作成者自身でも分からなくなるという事は、実務ではこういう事が本当に日常茶飯事なんだろうと思いました。

要所要所でつまづくポイントがあって、苦戦しながら一つずつクリアしてく感覚がゲームのようで楽しかったです。

まだまだなんとか形にするので精一杯ですが、色々なサイトを模写したり、学習をしながら、オリジナルサイト作成を目標に頑張ろうと思いました。