副業でWeb制作をやってみようとおもいHTML、CSSの勉強を一通り消化して、次にWebサイトの模写コーディングを練習しようというところでつまづくというひとがいるかとおもいます。
「はじめてHTML、CSSの勉強をはじめてサイトの模写練習に入ったけどおもったように進められなくてこころが折れそうだな～。。。」
はじめて模写コーディングに手をつけたときには見事につまづき、ちょっとWeb制作の勉強をあきらめようかなとも考えたりしました。
しかしなんとかねばって模写コーディングが進められるようになると、段々とWeb制作らしいことができるようになっていきました。
模写コーディングは初心者の最初の壁になりますが、ここでなんとかつまづかずに進められると副業で稼ぐというところにも大きくつながっていきます。
副業でWeb制作をはじめるにあたっての模写コーディング
模写コーディングはその名の通りWebサイトを模写してコーディングの練習をすることです。
副業ではじめてWeb制作の勉強をはじめたひとにとって、模写コーディングは最初に難易度が上がるつまづきポイントになります。
だいたいはじめてWeb制作の勉強をはじめて、HTML、CSSの学習を一通り終えたあとに通る道になります。
１回目は動画教材を利用した勉強をはじめてからでしたが全くおもった通りに進められず挫折、２回目はProgateの有料コースや書籍を利用してなんとか攻略できたという状態でした。
自分のようにセンスがないひとはサラッと教材を終えてから模写コーディングに入ると全然進められない、ということもあるかもしれませんがそれは普通のことなので、そこをがんばれると先へ進めます。
初心者が模写コーディングに進むステップ
副業でWeb制作を勉強しはじめた初心者の方などは、模写コーディングの練習に進むときに２つのことができる段階でないと先へ進めるのがむずかしくなります。
それが、
- 自身で考えてコーディングした経験があること
- コーディングの不明点を調べられること
です。
自身で考えてコーディングした経験があること
模写コーディングの練習に入る前の段階で自身で考えてコーディングをした勉強経験があることが重要です。
Webサイトの部分的にでも自分でどうやって作れるかを考えてコーディングした勉強経験がないと、模写で０からコーディングしていくのはきびしくなります。
考えてコーディングする練習が模写コーディングではないのかと感じるかもしれませんが、その一歩手前の段階ととらえてもらうとわかりやすいとおもいます。
Webサイトのなかのヘッダー部分やブロックの要素などを抜き出して、まずは自身で考えて「ここをこうやったらこうなるかな？」と考えてコーディングする経験が大事です。
そこで自分はProgateの有料コースを利用して、部分ごとに考えてのコーディングを練習しました。
Progateではなくても動画教材で紹介されている一部分や初心者向け模写サイトとして紹介されているサイトの一部分の作成練習からでも同じことができます。
まずはそうした一部を考えてコーディングするという経験をしてからWebサイト全体の模写コーディングに入るほうがスムーズに進められます。
コーディングの不明点を調べられること
模写コーディングに入るときには模写コーディングででてくる不明点を自身で調べられることが必要です。
教材での学習と違い模写コーディングではいろいろなコーディング内容を組み合わせる必要がでてきます。
基礎学習ではひとつずつのタグを紹介されたりしていたものが、自身で組み合わせ形にしないといけないので、どうしても最初のうちはどうしたらおもったような形になるかで不明点が多くでてきます。
「なんでこの形になってほしいのにならないんだろう？」といった箇所が頻発してくるので、そうしたときに理由や原因が調べられないと先に進められなくなります。
ここは検索、ググるスキルにあたる部分も大きいです。
最初はなにを調べればいいかもわからないこともありますが、段々と慣れてくれば調べものはググるほうが早くなります。
ここをこうしたいとおもったときにうまくググれる力、これも簡単な一部分のコーティング練習などからはじめると身についていきます。
スポンサードサーチ
初心者が模写コーディングするときの進め方
はじめて自分が模写コーディングをしたときにつまづいた経験もとに、初心者が模写コーディングを進めるときの考え方を紹介します。
自分の場合はこのあたりを考えずに進めようとしたため、むずかしくて挫折する危険がありました。
その進め方のポイントは
- 難易度は低めから
- 枠組みを組む練習でとらえる
- 細かい点にこだわらない
という点です。
難易度は低めから
まず模写コーディングをはじめてやる際にはできるだけ最初は調べる量が少なくて済む、模写の難易度が低めのものからはじめます。
しかしいきなりこれらのサイトの模写からはじめると、おそらくむずかしく感じることが多いです。
「初心者 模写コーディング」などでググると参考情報がでてきますが、もう少し難易度の低いサイトの模写を終えてから進むほうが効率も上がります。
https://guuten.net/coding-practice/
まずは難易度の低いサイトを参考にして、部分的なところから自身で考えてコーディングができるようにしていくのがおすすめです。
枠組みを組む練習でとらえる
個人的には模写コーディングの目的はサイトの枠組みを組めるようにすることと考えています。
初心者のうちはこの枠組みを組めるようにすることを念頭において模写を進めるほうが効率的です。
はじめて基礎学習を終えていざ模写コーディングをはじめようとすると、気がはやりサイト全体を模写しようという考えがでたりします。
しかし実際には模写コーディングの段階では画像やテキスト、カラーはすべてダミーでも問題なく、最初のうちはサイトの形をコーディングで組めるかどうかが大事になります。
後々は微調整なども必要になってきますが、模写をはじめた最初は細かい点よりもまずは形が作れるかどうかを重視します。
色はモノクロ、ダミーテキスト、装飾なしでフレームをコーディングしていくので、正直模写でサイトができていく面白味は少ないかもしれません。
細かい点にこだわらない
上記のとおり模写コーディングでの最初は枠組みの練習をするため、細かい点にはこだわらないことが大事です。
細かくこだわるとそれだけ時間が必要になります。
模写はあくまで練習なのであまり時間をかけずに進めるほうが学習効率は上がります。
模写では多少のずれやフォント、カラーの細かい違いなどは許容してコーディングの練習として進めます。
ひとつの模写サイトの詳細にこだわるより、練習として複数サイトを模写する、やったことのない形や要素のコーディング練習をするほうが学習につながります。
最初はタグづけやコーディングの形も汚くなりがちですが、そのあたりも徐々に慣れとともに気にしていけばよいので最初の模写の段階ではあまり気にしません。
模写コーディングでつまづいたとき
副業でWeb制作の勉強をはじめ上記のような進め方で模写コーディングに手をつけたものの、なかなかおもったように進められずつまづいてしまうこともあります。
そうした模写コーディングでつまづきを感じたときには、自分の経験からは書籍を利用することをおすすめします。
現在は無料の動画教材やWebサイトも多くあり、それらの利用だけでも学習を進めることは可能です。
ただし初心者の場合は書籍を利用することでそれらの教材よりも理解が進む場面もあったりします。
とくにおもったような不明点の解決方法がググって見つからない場合などは書籍を調べると該当する内容がのっていたりします。
初心者でもわかりやすいHTML、CSS関連の書籍を利用すると、模写コーディングで参考にするサイトと似た構造の練習実例があることも多いので、それらも模写の練習になります。
動画やWebサイトの情報はどうしても簡潔にまとめる必要があるため省かれる場所などもでてきますが、書籍ではページを割いて紹介されるため初心者が理解できるように細かい点まで記載されていたりします。
もし模写コーディングでつまづいてしまうようなときには、一度書籍の利用を考えてみるのもおすすめです。
スポンサードサーチ
【Web制作】模写コーディングのつまづいたときの進め方まとめ
【副業Web制作初心者の壁】模写コーディングでのつまづきまとめです。
- 副業でWeb制作をはじめてみようとおもったときに模写コーディングは最初の壁になりやすい
- 模写コーディングを進められると副業で稼ぐというところにつながる
- 初心者が模写コーディングをするときには事前に以下を経験しておくと進めやすい
- 自身で考えてコーディングした経験があること
- コーディングの不明点を調べられること
- 初心者が模写コーディングを進めるときにおすすめするポイントがこちら
- 難易度は低めから
- 枠組みを組む練習でとらえる
- 細かい点にこだわらない
- はじめての模写コーディングでつまづきを感じたときには書籍を利用してみることもおすすめ
副業で月１万円稼ぐためのWeb制作の参考情報はこちらでも紹介しています。
コメント