コーディングの模写ならこれやってみて!(初級編)

こんにちは!ちづみ @ノマド女子です!

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




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


本当にありがたいことに過去に114名以上の方にご購入いただきました。



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


自分自身も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が正常に使えるかどうか、確認用のURLも作りましたので、こちらで一度確かめられると確実です。↓

https://xd.adobe.com/spec/43e396d8-4de3-4516-7113-7bcf5a806238-35d2/



本書の内容

XDデータのURL(画像付き)
実務に寄せた簡単な指示書(期限、幅指定など)

注意点

添削は含まれておりません。ご了承くださいm(_ _)m




「ググる」「最後まで作りきる」を目標に掲げる


今思えばprogateから出てエディターでググりながら1サイト完成させた時が大きく成長した時だなと感じています。振り返って見ると、山を登りきった時のような、疲労感はあるけどなんともいえぬ心地よさと達成感がありました。

多分、エンジニアにとって一番必要な力「ググる力」はProgateを出て、エディターで1から作り始めた時に大きく養われると思います。

決してスイスイとは進まないかもしれませんが、だからこその価値はあると思っていて、悩みながらググってググって、完成させてみることに大きな価値がありますし、その経験が今後に絶対にいきてくると思っています。


興味を持っていただけた方、ぜひ挑戦していただけたらと思います。


この続きをみるには

この続き:551文字/画像2枚

コーディングの模写ならこれやってみて!(初級編)

ちづみ

1,000円

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

125

ちづみ

web制作で稼ぐためのコーディング練習課題

1つのマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。