見出し画像

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

※シリーズ1500部以上ご利用いただいています!

※2020年10月29日リニューアルしましたm(_ _)mもし、前回のままご利用中の方は、レイアウトの変更はほぼありませんので大変お手数ですが、画像やテキストを入れ替えてご利用ください。

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

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



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

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

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


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

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

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



どんな人向け?

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

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


どんな内容?

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

画像4



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


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

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


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

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


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

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

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



本書の内容

・XDデータ
・参考コード
・コード解説

注意点

コードの添削は行っておりません。ご了承くださいm(_ _)m

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


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

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

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


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


この続きをみるには

この続き: 231文字
この記事が含まれているマガジンを購入する
コーディングの練習課題を1つにまとめました。こちらからまとめて購入すると単体で購入するより1260円お得です。コーディングのポートフォリオとして掲載OKです。

600名以上にご利用いただいたコーディングの練習シリーズをまとめました。progateのhtml、cssを終えた方が取り組めるちょうどいい…

または、記事単体で購入する

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

ちづみ

980円

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
私もだいすき!
251
海外を住み歩くノマドです。ゆるく日々あったことを書いてます。

こちらでもピックアップされています

web制作で稼ぐための超実践的練習ドリル
web制作で稼ぐための超実践的練習ドリル
  • 7本

小学校の教員→webデザイナーの私が考える実践的なスキルアップの課題を提供しています。

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。