【中級編】模写コーディングのススメ

どせぜん

どうも、どせぜんです。


緊急事態宣言が延長されたこのコロナご時世、皆様いかがお過ごしでしょうか。

自分はGWにApex Legendsにハマってしまって2日くらいずっとやってしまってました。チャンピオンなれない。

しかしプログラミングの勉強はやめたわけではなく、ProgateでPHPの基礎学習したりとか色々しましたよ!

それでは、どうぞ!




はい、というわけで模写コーディング第2弾、やって参りました。

先日Progateやドットインストールなどを使っていて、Flexboxの存在を知ってから、ちょっとそれに興味がありつつも調べられていなかったので調べたりしてやりました。

あと、こないだTwitterで見つけたFlexboxとGridに関するゲームなどもやって、面白いしわかりやすかったので共有しときます。



模写コーディングの成果


今回は↓のサイトを模写してみました。

https://haniwaman.com/sample/part3/template_08/index.html



結構見た目もシンプルで綺麗な上に汎用性が高いので、このサイトをベースにいろんなサイトを作成できるんじゃないかと思います。


ということで模写コーディングに取り組んでみた結果がこちら。


細かいところまでこだわり始めると無限にできてしまうので、大まかなサイトの枠組みなどは捉えられたんじゃないかなって段階までやりました。

個人的には上記のゲームでやったFlexboxの折り返しとかを活かせた気がしたので、やはりTwitterでプログラミング学習のモチベを上げるのは良い事に繋がると思いました。

これは何をするのにも同じで、自分が何か新しいことなどを始める時には先人をみて学ぶのと、自分の周りに同じ境遇の人を置いておくことだと思います。

今で言ったらプログラミングを学習している人ですね。

ただ、同じ境遇でも「プログラミング勉強しなきゃな〜」って言ってるだけの人じゃなく、「今日はこれやった!明日はこれやろう!」とかガンガン行動している人を周りに置くようにしましょう。

周りの人がだらけていたら、大体の人は同じようにだらけます。

そんな意味でも、TweetDeckを使ってプログラミング学習者を見られるようにしておくのは良い案なんじゃないかと思ったので、自分はノートPCでTwitterを見るときはTweetDeckを使うようにしてます。




今後の方針


ということで前回に引き続き模写コーディングをやってみました。

今後の課題としてはサイトに動きをつけていくことかなと思うので、そちらも勉強していきたいと思います。

この辺のことは多分Javascriptを使えば色々できるようになるはず…。(調べます)

僕がプログラミング学習を始めるきっかけとなったSkillHacksを開発した迫さんの教材も良かったら見てね☺️


〜Skill Hacksが気になった方〜

-Skill Hacks- 動画で学ぶWebアプリ開発講座


〜迫さんは他にも色々やられてるみたいです〜

-Design Hacks- 今日から使える実践デザイン講座

-FrontHacks- フロントエンドプログラミング

-PHP Hacks- PHPプログラミング学習講座

-DietHacks- 現役パーソナルトレーナーのオンラインダイエット講座

-Instagram Hacks- 現役法人コンサルが教えるインスタ運用術

-Blog Hacks- 完全サポート付きブログ講座

-Movie Hacks- YouTubeに特化した動画編集講座