コーディング練習はwebサイトの模写で！

こんにちは！副業ママデザイナーのつばさです。

今回はコーディング練習のやり方をご紹介します！

わたしもコーディングはまだまだなのです・・・が、上達のコツは実際に手を動かすことです。

webデザイナーとしてデザインを作るだけの方もいらっしゃいますが、大抵はコーディングまで一括で請け負うことがほとんど。

「デザインだけしかできません！」というより、「最後まで一括してお任せください！」といったほうがクライアントさんも安心ですよね。

とはいえ、ママは家事や育児で時間がないもの。

そんなデザインもコーディングも初心者ママはまずコーディングを勉強し、コーディングでお仕事をこなしつつ、デザインの勉強をしていくことをオススメします。

contents

コーディング上達のために

コーディング上達の近道は、とにかく模写をすること。

模写とは、今あるwebサイト（練習用のサイトなどでもOK）を一から自分でコーディングしてみることです。

①PinterestやLPアーカイブというサイトで自分の好みのデザインを探します

②見本を見つつ、一からコーディングにチャレンジ

③分からないところは検索しつつやってみましょう。webデザイナーには検索力も大切です！

④検索しても分からないところは元ページの「要素の検証」機能を使ってどのように記述されているか確認してください

「要素の検証」機能で記述の仕方はわかったけどなぜそんな記述の仕方になるの？という場合はメンターをつけることをオススメします。

検索して解決する力は大切ですが、ずっと調べても分からない場合、どう調べて分からなかったのかをメンターに伝えて教えてもらうほうが時間を無駄にせずに済みます。

Webクリエイターオンラインスクールはフクモト学長にすぐに質問できる環境が整っていますよ。

自分でwebサイトを探す模写は難しいし、サンプルコードがないので分からない・・・という方のために、コーディングの練習用デザインを配布してくれているサイトを紹介します。

こちらのnoteを投稿した会社に未経験で入社したフロントエンドエンジニアの方が入社前に自主制作していたものを公開して下さっています。

デザインとともに実際のコードも公開してくれているので、答え合わせが出来ます。

現役コーダーさんのnoteです。こちらは有料noteなので、ステップアップしたいなと感じた時に買ってみるのもいいかもしれません。

デザインカンプやサンプルコードもありますし、デザインカンプからのコーディングについての記事も別途作成してくれています。

他にも練習用カンプを配布して下さっているサイトはたくさんありますので、自分の好きなデザインやレベルに合わせたものを探してみるといいかもしれません。

兼業webデザイナー。２児の母。普段は事務系会社員としてフルタイム勤務しながら、個人で仕事を請け負っている。いずれはママのための講座やコミュニティを運営したいという夢を持ち、日々勉強中。