コーディングの練習をしよう〜その２〜

ちづみ

2018年9月13日 20:01

こんにちは！ちづみです！

今はフリーランスとしてweb制作のお仕事をしています。

このデータはprogateのhtml、cssが終わった方向けくらいの難易度で作成しています。

自分自身の学習してきた経験を生かし、これからコーディングを学習してウェブ制作で稼ぎたい人が楽しく、明確にステップを踏めるようにコーディング練習用のXDデータを出しました。

Progateが終わった方がチャレンジ可能なくらいの難易度のデザインで、ポートフォリオに掲載OKです。

自分自身もprogateで学習をしましたが、Progateのおかげでワクワクしながら学習できたし、内容もスイスイ入ってきました。学習の入り口にProgateをやっていなかったら今の自分はいないんだろうなあというくらい続けられたので、Progateのわかりやすさには本当に助けられました。

Progateのコースを終わらせて、いざ、エディターで一からサイトを作ってみると、結構難しくて、ググってググってヒーヒー言いながら力ずくで完成させました。

progateには出てこなかった単語をたくさん使いましたが、ググったらなんとかいけることがわかりました。とはいえ、とても難しいサイトの模写は完成がかなり大変で挫折しやすいので、、、過去の自分が欲しかったちょうどいいレベルのサイトのデザインを作りました。

どんな人向け？

・Progateが終わったら何をやったらいいの？
・ちょうどいいレベルでいいサイトないかな？
・せっかく作るならポートフォリオに載せたいな
・progateを出て、エディターでコーディングをしてみたいな

と思っている方に届けばと思っていますm(_ _)m

どんな内容？

デザインはこんな感じです！！

このデータで意識してきたこと
・Progateのhtml、cssを終えられた方がググればなんとか作れるレベルのデザインとボリューム
・よくあるサイトのデザインから抜粋（基本のホームページの型作りが体験できます。）
・ポートフォリオにできるデザイン（練習用と明記し、ポートフォリオ掲載OKです）
・実務にも繋がるデザイン

これをやり終えると得られるもの

・一度基本のホームページの型を作ることによって、コードを次に応用、使い回しができる。（自分のテンプレート作りに活かせる）
・「自分でもやりきれた」という自信がつく。
・実務へのイメージがわきやすくなる。

感想を紹介させていただきます。

ProgateのHTML 、CSSの知識＋ググりのみで取り組んだのですが、丁度いい手応えでした。
はじめて実物を作ったので、PC表示、スマホ表示ともに完成したときにとても嬉しく、達成感がすごかったです。
苦戦しながらですが、やりきったことへの自信もつきました。
素晴らしい課題をありがとうございました。

今回プログラミングの勉強で次の目標を考えているときたまたまツイッターでちづみさんのnoteを発見し早速購入させていただきました。
その時Progateはまだhtml中級の途中だったの急いで上級まで進めてすぐに模写コーディングに取り掛かりました。
はじめての模写コーディングでヒーヒー言いながらググりまくってなんとか完成させることができました！
かかった時間は5日間で約15時間ほどです。
仕事中もあの部分のcssをこうしたらいいんじゃないかと考えながら休憩時間にググったりしてなんだかんだ楽しかったです。
やっぱり何か目標ができると一気にモチベーションは上がるんだなと再認識しました。
もし今後も模写コーディング用のnoteを作られのであれば次回も購入させていただくと思います。
コードはまだまだいびつだと思いますがなんとか完成させ、自信につなげることもできてとても楽しかったです。

準備物としてはAdobeXDのダウンロードが必要です。

お手元のパソコンでダウンロードできるかどうか確かめてみてください（無料です）

本書の内容