『自分の仕事は自分でクリエイト』を目指す新米クリエイターたちのアウトプット用Webマガジン。得意を活かした企画に挑戦中!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

コーディング練習用デザインを配布してくれているサイト

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

【初心者向け】HTML+CSS練習用のサンプルコード

【初心者向け】HTML+CSS練習用のサンプルコード

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

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

Photoshop、Illustrator、XDからのコーディングに慣れよう!

Photoshop、Illustrator、XDからのコーディングに慣れよう!

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

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

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

この記事が気に入ったら
いいね ! しよう

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

Pocket
LINEで送る

関連記事

ログイン

新米クリエイターズ Webメディア部

『自分の仕事は自分でクリエイト』を目指す新米クリエイターたちのアウトプット用Webマガジン。

Web・DTPデザイナー・会社員・アルバイト・ライター・ブロガー・主婦・子育てママ...etc。
現在の肩書きは違えど目指すところは皆「フリーランスのWebデザイナー(クリエイター)」

日々の学びやお役立ち情報をブログで発信・アウトプットをしながらWebの世界でコンテンツを配信する、
Webサイトを運営する、アクセスを集めるってどんなことなのか?を体感していきます。

新米クリエイターならではの気づきや学び、Webデザイナーの腕を磨いていく模様をリアルに感じていただけます!