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

224

ちづみ

2018/09/13 20:01

※シリーズ500部以上ご利用いただいています！
※2019年10月30日デザインをリニューアルしました！！

こんにちは！ちづみ＠ノマド女子です！

今は国内外を移動生活しながらweb制作のお仕事をしています。

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

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

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

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

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

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

どんな人向け？

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

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

どんな内容？

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

※2019年10月30日にリニューアルしました！

ーーこのデータで意識してきたことーー

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

ーーーーーーーーーーーーーーーーーーー

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

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

ーーーーーーーーーーーーーーーーーーーー

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

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

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

ーーーーーーーーーーーーーーーーーーーーー

XDの見方についてはこちらで簡単に説明していますので、一度見てから始めるとスムーズです。XDのurlカンプが初めての方など、まずはこちらをみてどのようにコーディングしていくか掴んでいただければと思います。