!私は今、web制作で生計を立てながら、国内外をノマドしながら生きています。自分自身の学習してきた経験を生かし、これからコーディングを学習してウェブ制作で稼ぎたい人が楽しく、明確にステップを踏めるようにコーディング練習用のXDデータをnoteにて出しています。2018年10月3日できた!!ゆっくりやって1時間かからないですかねぇ。スマホ対応とスムーズスクロールを入れてみました。2018年10月3日できたー!所要時間8時間。非効率でぐちゃぐちゃな書き方だったり、この状態からレスポンシブ対応できるのかとか課題山盛りだけど、まずは形にすること目標にしてたからよしとする。2018年10月2日XDの特徴このnoteの内容はXDのデータからのコーディングを行うものです。XDかという理由は以下の通りです。コーディングしやすいテキストのコピーやカラーコードのコピーがワンクリックで完了します。pxの数値の取得もとてもわかりやすく簡単なので、コーディングがとてもしやすいのがXDの特徴です。url形式なのでXDを持っていなくてもデータが見れるwebデザインで主流のadobeのIllustratorやPhotoshopはデータを確認するにはソフトを持つ必要がありますが、XDの場合はurlでデータを共有することができるので、ネット環境があれば大丈夫です。XD自体が無料ではありますが、持っていなくてもコーディングデータがみれるのは大きな利点です。コーディングの練習ならこれやってみて!(入門編)について一番優しい難易度です。Progateのhtmlコースをやっていればできる難易度とは思います。入門編はこんな感じですボリュームもそんな多くないので、気軽に始められると思います!noteで詳細をみるコーディングの練習ならこれやってみて!(初級編)について初級編のデザインはこんな感じです!(2019年10月30日リニューアルしました)基準としてはProgateのhtml、cssが終わった方ならググりながらできるレベルです。noteで詳細をみるコーディングの練習ならこれやってみて!(中級編)について中級編はこんな感じです。初級編が終わった方ならできそうなくらいのデザインを意識して作りましたが、結構やりがいのあるデザインです。noteで詳細をみるこのnoteのメリットメリットポートフォリオに掲載できるちょうどいい難易度のものに取り組むことができるステップを確実にふみつつ、実務に繋げられるようなnoteですので、興味があればぜひご活用ください!コードpickupツイートシェアはてブGoogle+Pocketfeedly使うとこだけ!WordPressでよく使うPHPまとめslackで使える褒めちぎる無料スタンプを作りました!RECOMMENDこちらの記事も人気です。@098ra0209会社員→小学校の先生→フリーランス国内外を旅しながらホームページ屋をやっている人です。現在は日本各地や東南アジアを転々としながら生活しています。ノマドの働き方や、フリーランスのあれこれについて発信しています。