HTML/CSS

挫折しない効果的な模写コーディングのやり方【入門者~中級者向け】

更新日:

「progate、ドットインストールでHTML&CSSの勉強の次はどうするの?」

「模写コーデイングって必要なの?」

「模写コーデイングが辛くて挫折した。」

こういった悩みに答えます。

progateドットインストールでHTML&CSSの学習が出来たら模写コーディングをしましょう。

目次

  • 模写コーディングをやる理由
  • 挫折しない効果的な模写コーディングのやり方

模写コーディングをやる理由

模写コーディングをやる理由は主に3つあります。

  • Webサイトの構成を知る
  • コーディングに慣れる
  • 学んだことを応用する

Webサイトの構成を知る

Webサイト構成の例として

  1. ヘッダー
  2.  ・ロゴ
  3.  ・内部リンク
  4. メイン
  5.  ・画像
  6.  ・説明文
  7.  ・お問い合わせフォーム
  8. フッター
  9.  ・内部リンク

こんな風にヘッダーメインフッターの中にも細かい構成があります。

模写するサイトを見て、どんな構成か把握するだけでもコーディングがやりやすくなると思います。

コーディングに慣れる

HTML&CSSの学習が終わった段階ではまだ自分で考えながらコーデイングすることに慣れていないので、模写コーデイングをして慣れていきましょう。

模写コーデイングで勉強して欲しいことが2つあります。

  • レスポンシブ(デバイス幅に応じて見た目を変化させること)
  • progate、ドットインストールで学んでいないプロパティ

学んだことを応用する

模写コーディングではprogate、ドットインストールで学んだことを組み合わせたり、応用する場面が多いと思います。

ですが、プロパティはすべて暗記する必要はないので忘れていてもカンニングOKです。

組み合わせ例【ボタン + potion:absolute;】でボタン配置

挫折しない効果的な模写コーディングのやり方

模写コーディングは上記でも挙げた通り

  • Webサイトの構成を知る
  • コーディングに慣れる
  • 学んだことを応用する

為にやりますがあまり効率は良くありません。

そこでおすすめする方法があります。

それは「部分的に模写コーディングする」ことです。

どういうことかと言うと、まず模写するサイトを決めてパッと見てこれはコーディングできると思った部分は模写をしないことです。

例【単純な文、枠の付いた見出し】

逆にパッと見てこれはどうやるんだろうと思った部分はレスポンシブまで完璧に模写しましょう。

これをすると無駄な作業をせずにインプット、アウトプットが出来るので効率良く、部分的に勉強することができます。

模写で学べないことを本で勉強

他の投稿

-HTML/CSS

Copyright© yamab-log , 2021 All Rights Reserved Powered by STINGER.