学習を始めて約４ヶ月以上経ちますが、スクールにも行かず、メンターもつけず、なんとか独学で頑張ってきました。
最近は、さすがに1人がしんどくなり、良いコミュニティーはないかな〜？と探すも、コミュニティーって意外とスクールが運営しているものが多いのかな？なかなか無料で入れる良さそうなところが見つかりません。
そんな私ですが、もっぱら「しょーごログ」のしょーごさんのブログを読み漁り、ご飯を食べたり歯を磨く時は、しょーごさんの動画を見て勇気をもらっています。
ここ数週間は、ずっと「Codestep」の無料課題を継続的にやっていたのですが、ここへきてついに、、しょーごさんの「コーディング教材全部盛りセット」を購入しました！！
しょーごさんが２回のレビューを行ってくれるのは、「初級EX」からだそうですが、入門（無料配布）と、初級の課題をやるのも、緊張感が漂います・・・。
この課題は、noteを使って配布しておられるのですが、noteでセットを購入すると、自分のアカウントの「マガジン」というところに表示されるので、それぞれのnoteを読むことができます。
私は今回、noteのアカウント登録も初めてやりました・・・。聞いたことはあったけど、note見るのも使うのも初めて。
さっそく、初級のマガジンを読み、まずは紹介されていたGoogle Chromeの拡張機能を入れてみました。noteで触れられていた拡張機能の他に、しょーごさんが動画で紹介されていた、「おすすめ拡張機能 TOP10」もチェック。
そして、おすすめ第一位の“Perfect Pixel”、やっと入れました〜！！
いやー、前からPerfect Pixel気になっていたのですよ。これは、デザインカンプからコーディングした時に、カンプをピッタリ正確に再現できているかを確認するための機能です。
使い方に関しては、こちらの方の動画↓を参考にさせて頂きました。カンプのデータをPerfect Pixelにドラッグすると、自分がコーディングしたページの上に、データを重ねることができるんですね。重ねたデータは透過させることや、色を反転することもできます。
初級の課題については、結構仕上がりに自信があったのですが、、、見事にズレていました！！！！！！！
なぜなぜかというと、line-heightをきっちり再現していなかったからです、ハイ。
手を抜かずに、ちゃんとやらないとだめですね。確かに、しょーごさんのおっしゃる通り、セルフチェックを細かくやるのは大切です。フォントや余白など、ひとつづつ確認して、合っているつもりでいたけど、こうやって画像を重ねて見ると、チェック漏れが一目瞭然。
私は、全部コーディングが終わってから、最後にPerfect Pixelで確認しましたが、上記の参考にした動画の人は、最初からカンプデータを取り込んで、その上にCSSを当てていましたね。そういう使い方もあるんだー！とびっくりしました。
まだまだ知らないことがたくさんあります。
今朝は、タブレット用のレスポンシブまで終わったので、明日はスマホ用のレスポンシブを仕上げて、余裕があれば初級EXに進みたいと思います！
コメント