プログラミングの基礎学習が終わって、「次は何をしよう？」と考え中の方、「模写コーディング」をしてみましょう！
HTML/CSSの基本が出来てたら大丈夫。
実際に何か作ってみる作業をして、実践的なスキルを身に付けるのがおすすめです。
模写コーディングとは？
ズバリ、すでに完成しているWebサイトを模写して再現することです。
HTML/CSSを使ってお手本となるサイトを見ながら、全く同じように作ることを言います！
これがなかなか難しい！
私もいくつかのサイトを模写したことがありますが、心が折れそうになったことも。
まずはシンプルなサイトから模写してみることをおすすめします！
こんな人にオススメ！
- 基礎学習が終わった人
- HTML/CSSの実践的なスキルを身に付けたい人
模写コーディングがオススメな理由
基礎学習はあくまでパーツ的な学習でしたが、模写コーディングは様々なパーツを組み合わせて1つのサイトとして完成しているので、基礎学習の集大成とも言えるでしょう。
また、学習していないコードも出てきたりして、よりコーディングの幅が広がります。
メリット
- ページ全体をよく観察して組み立てるスキルが付く
- コーディング速度が速くなる
- 実務レベルに近づける
- 模写したものを実績として扱える
- 基礎学習の範囲外の技術が学べる
- コーディングのパターンがわかってくる
模写コーディングのやり方
模写するサイトを決める
シンプルな構成のサイトから模写するのがオススメです！
いきなり複雑なサイトから始めると挫折に繋がりやすいので。
「こんなの簡単すぎる！」というサイトから腕試しがてら、始めてもいいくらいです！
模写におすすめのサイト
PAS-POL 旅のモノづくりブランド
iSARA(イサラ)バンコクのノマドエンジニア育成講座
調べながら完成に近づけてみる
ヘッダー、メニュー、コンテンツ、フッター、など、まずはパーツに分解してみましょう！
わかる所からコーディングしてみましょう、最初から完璧なコーディングでなくても大丈夫。
まず挑戦してみることが大事！
（私は模写最後まで出来ず、検証ツールで先に答え見たこともあります。）
検証ツールを使って答え合わせ
自分のコーディングとどう違うのか照らし合わせてみましょう。
クラス名とかは自分のオリジナルのもので良いですよ！
divタグやid、cssの使い方を確認してみましょう。
知らないコードが出てきたらググって、使い方を調べる、自分のコードに埋め込む。その繰り返しです。
最初はかなり時間も掛かるはず！でも慣れてきたらコーディングのスピードも速くなるので、最初はゆっくり着実に進めていきましょう。
Webページのレイアウトやデザインの勉強にもなりますよ。
ここまで読んでくださりありがとうございました！
模写を繰り返すとかなり実力が付きますよ。
基礎学習を繰り返すのも良いですが、思い切ってトライしてみてください！
それでは、また！
