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

どせぜん

どうも、どせぜんです。

最近ちょっとブログ更新できてませんでした。

っていうのも就活とか就活とか就活とかしてました。


SkillHacksを終えて、具体的に案件獲得のため動き出しているんですが、何せやはりまだ案件獲得レベルではないな、と自分でも感じたので、模写コーディングをする事にしました。

模写コーディングって何?


模写コーディングっていうのは、ざっくりいうと既存のホームページをマネして作ってみるって事です。

学んだ知識はもちろん、調べながらいろんなことを実践できるので結構力つくんじゃないかと考えてます。

今までやってきたHTMLとCSSの知識さえあれば、表面上の模写はできると思います。

そんなこと言ったって、やるにはサーバーとか色々いるんじゃないの?って思うかも知れませんが、htmlファイルとかはSafariとかChromeとかで開けるんです。

htmlファイルとかをブラウザにドラッグ&ドロップするだけで文字とか表示できるので、試しに メモ帳とか開いて、

<h1>test</h1>


って書いた後に test.html っていうファイルの名前で保存して、それをドラッグ&ドロップするだけで、画面上に test って表示されるの確認できます。

あとはcssファイルとか作ればデザインも付与できると。


この流れを他のサイトとかのデザイン真似する様にやってくと、HTMLとCSSの復習にもなりますし、自分が今まで知らなかった方法なども知ることができ、サイト作成の練習にもなるというわけです。

模写コーディングやってみた


先日Twitterにも投稿したのもあるのですが、

この時は、結局これであってるのか分からず、なんかリンク先とか変なところに凝ったりもしてたんですが、とりあえず初級としては、表面上ができていればいいということで落ち着きました。


そんな教訓を踏まえ、
今回また改めてやったものがこちらです。


サイトは

https://www.try110.com/bousai_kawara/

こちらのものを参考にしました。


これからも模写コーディングはやっていくつもりです。

クラウドワークス とか見てると、WordPressでホームページ作る案件とかあるみたいで、基本やることはこのHTMLとCSSがベースになっているんですが、PHPなども学ぶ必要があるみたいなので、本買いました。


また、模写コーディングを進めて、WordPressでのホームページ作成の案件なども獲得していけたらなと考えています。


それでは、また。



〜Skill Hacksが気になった方〜

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


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

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

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

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

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

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

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

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