ドットインストールでの基礎学習が一通り終わったので、実践練習として模写コーディングをやってみました。

お手本は一般企業さんのLPです(↓スクショです)。

ザ・LPという感じの、レスポンシブではないHTMLとCSSのみ(多分)のシンプルなデザイン。
これなら最初の練習にちょうど良さそう…と思いチャレンジしました。

ほぼまるっと1日を費やし、ググりつつググりつつコードを入力…。

その成果物がこちらです。

想像以上に難しく、最後の方は諦めモード…。

反省点

  • class名の付け方が適当すぎた("riyousha-koe"とか"nayami-list"とか)
  • div使いすぎ、HTMLもCSSもごちゃごちゃ
  • text-alignやfloatの使い方が謎で位置調整がうまくできない(marginやpaddingに数値を当てて調整した部分が多々)
  • 元コードをカンニング(ここでtableを使うんだ~、みたいな感じで)

初挑戦とはいえ、どうググればいいかもわからずカンニングしまくりでした。
基礎が全然定着してないことを痛感…。

それでも大変な分楽しさもあるので、今後もスキルアップのためのんびり頑張ろうと思います(;^ω^)

【初心者】模写コーディングやってみた【HTML/CSS】

ドットインストールでの基礎学習が一通り終わったので、実践練習として模写コーディングをやってみました。

お手本は一般企業さんのLPです(↓スクショです)。

ザ・LPという感じの、レスポンシブではないHTMLとCSSのみ(多分)のシンプルなデザイン。
これなら最初の練習にちょうど良さそう…と思いチャレンジしました。

ほぼまるっと1日を費やし、ググりつつググりつつコードを入力…。

その成果物がこちらです。

想像以上に難しく、最後の方は諦めモード…。

反省点

  • class名の付け方が適当すぎた("riyousha-koe"とか"nayami-list"とか)
  • div使いすぎ、HTMLもCSSもごちゃごちゃ
  • text-alignやfloatの使い方が謎で位置調整がうまくできない(marginやpaddingに数値を当てて調整した部分が多々)
  • 元コードをカンニング(ここでtableを使うんだ~、みたいな感じで)

初挑戦とはいえ、どうググればいいかもわからずカンニングしまくりでした。
基礎が全然定着してないことを痛感…。

それでも大変な分楽しさもあるので、今後もスキルアップのためのんびり頑張ろうと思います(;^ω^)

次に読まれている記事