Progate、ドットインストールの次にやること・・それはコーディング模写!
progateとドットインストールのHTML、CSSの講座をやり終えたので、さて・・次のステップは・・と調べていたら、「プログラミングのスキルを伸ばすには実践が重要」とのこと。
と言っても・・・「実践って言っても何作ればいいの・・」というのが自分も含め初心者の大半。
で、さらにググって調べてみると、とりあえず、簡単なサイトのコーディングの模写をしてみるのが、いいとのこと。
でもさ・・簡単なサイトなんて、初心者にはわからんよ・・どのサイトか教えてよ・・
と思っていたら、ご丁寧に「初心者のコーディング模写にはこのサイトがいいよ!」と教えてくれているブログが複数ありました!
いい世の中だ・・至れり尽くせり!
初心者がコーディング模写するにはちょうどよい難易度で、汎用性があるコードを使っているサイトはこの2つ。
バンコクのノマドエンジニア育成講座iSara[イサラ]
PAS-POL -旅のモノづくりブランド-
progateとドットインストール回した程度のレベルで、本当にコーディング模写できるの?と思っている初心者の人、必見!
実際にそのレベルの自分がコーディング模写やってみましたので、一通り学習して、これからコーディング模写しようとしている人は参考にしてください。
※ドットインストールとprogateのHTML、CSS講座を終えたくらいのレベルの人。自分も今そのレベルです!
コーディング模写キツい・・・挫折寸前・・
いきなり後ろ向きな感想ですいませんが・・・最初の取っかかりは、正直キツいです。
どこから手を付けていいやら、わかりません。ただ、といっても、なんとか簡単な部分のパーツをひとつ一つ書いていき、こまめにクロームのデベロッパーツールで確認していけばなんとか進められます。
不思議なもので、段々とパーツが揃っていき、模写と同じようなウェブサイトのようになっていくと、気力が湧いてきて、徐々に楽になります。
コーディング模写していて特に辛かったこと・・
クロームのデベロッパーツールを数回見て、CSSを何度変えても、見本のサイトと同じようにならない・・ってことが何度かありました。
まあ・・・単純なミスだったりが大半なんですが、これかなり時間かかります。
一つの謎(CSS)を解決するのに、平気で2時間くらい飛んでいきます。
何時間かかっても、解決できれば、嬉しいんですが、結局よくわからず、モヤモヤしたまま、とりあえず微妙に見本のサイトと違うけど、妥協するということも何回かありました。
完璧でなくてよいから、とりあえず7,8割合っていればよい
まあ・・これは自分への慰めの言葉でもあるんですが、完璧を目指すと時間かかり過ぎて、途中で挫折する可能性大です。
自分はレスポンシブ対応はとりあえず放置して、進めました。それでも、PCサイトの見た目だけでも、見本のサイトとだいだい同じように出来ると満足感を得ることができ、小さな自信もつきます。
あくまで練習なので、完成させることを最優先に進めるのがオススメです。