WEBCAMP:経済産業省が認定!エンジニア転職成功率98%!HikoProこんにちは!大学生フリーランスエンジニアのHikoProです!今回のお悩みHTML/CSSの学習をするのに「模写コーディング」がオススメらしいけど、何のサイトを模写すればいいか分からない。オススメの模写サイトをレベル別に教えて欲しい!以前の記事では初心者は模写コーディングするのが最も実践的なスキルがつくことをお話ししました。世界には数え切れないほどのWebサイトがあり、どれを模写コーディングすればいいか迷っている方も多いかと思います。そこで今回の記事では、レベル別(初級・中級・上級)に模写コーディングするべきサイトをご紹介します。HTML/CSS初心者の方はこれからご紹介する初級〜上級の全てのサイトを模写することができれば、HTML,CSSの学習は卒業して簡単なWeb制作の案件は受注できるレベルになるかと思います。初級レベルまず初級レベルに挑戦する前に自分が模写コードができるレベルに達しているか確認しましょう!ある程度学習が進んでしないと必ず挫折するので、目安としてProgateのHTML,CSSを全て受講済みの方は初級レベルの模写コーディングにチャレンジしてみましょう。上級編」の完成版を見ながら模写してみましょう。Progateを終わったばかりの方はかなり難しいかと思います。要素の横並びの配置hover時のカラー変更このような、今後Web制作で必ず使う技術の基礎を学ぶことができるので、その点を重点的に理解を深めましょう。今後WordPressの学習をすることを考慮するとブログ型の模写コーディングも欠かせません。初めにWriteというとってもシンプルなテーマを模写してみましょう。ポイントとしては、横幅が一定の幅で統一されている点です。ヘッダー、メイン、フッターの横幅を綺麗に全て揃えてみましょう!また画像を丸くするメソッドの指定、FontAwsomeを使ってSNSのアイコンも表示させてみましょう。https://haniwaman.com/sample/part3/template_08/こちらは、はにわまんさんの作成されたサンプルをお借りしました!ナビゲーションの横並びの配置、サイドバー、メインの配置がとても難しく、いきなりコーディングしてもつまずくと思うので、始める前にHTMLの構造を予め紙などに書き出してみると良いですね!シンプルそうに見えますが、要素の配置がとても難しくfloatやflexboxを使って頑張ってみましょう。中級レベルこのレベルをクリアできれば脱初心者かなというレベルです。初級レベルをクリア出来た方なら、時間をかければ必ず模写できるレベルになっています。このレベルではレスポンシブデザイン(ブレイクポイント1つ)、熱意がある方はjQueryの勉強もしつつ簡単なアニメーションも実装してみましょう。中級編からは、よりクオリティーの高いサイトを模写していくので、BootstrapやGoogleChromeの検証ツールを使って効率よくコーディングしていく必要があります。日本で大人気のWordpressテーマJINのテーマの1つを模写してみましょう。この模写コーディングのポイントとしては、2カラムのサイトとなっており、メインカラムとサイドカラムの2つの構成を意識してコーディングする必要があります!メインカラムは問題なく作れると思いますが、サイドカラムを作るのに時間がかかると思います。要素の上に要素をかぶせる配置positionの使い方flexboxのマスターコーポレート型こちらもWordpressのテーマであるXeoryを模写してみましょう。こちらの模写の特徴として、Googlemapの挿入、facebookの埋め込みなどコーポレートサイトには欠かせない機能を学習することができます。上級レベル中級レベルまでクリア出来た方は動的なサイトでなければ、ほとんどのサイトは模写できるスキルは身につきます!さて、上級レベルでは初級中級で学んだことを全て詰め込んだサイトを模写していただきます。元フリーランスエンジニアのマナブさんが運営するISARAのLP模写です。大人気のWordPressテーマSTORKの模写コーディングをしてみましょう!かなりオシャレなデザインで、細かい場所までコーディングする必要があります。最近のブログでよく見かけるカルーセル(投稿がスライドする)も需要が高いので、この模写の過程で習得しておくと良いでしょう。サイトの模写コーディングをしてみましょう!このサイトを模写コーディングすることができれば、「デザインカンプからコーディングの案件」は難なくこなすことができるでしょう!かなりボリューム満点のページとなっていますが、頑張って完成させましょう!HikoProお疲れ様でした!模写コーディングの学習が終わったら、「実際に案件を受注する」もしくは「PHPやRuby」などのWeb系のプログラミング言語にチャレンジしてみましょう!模写コーディングが終わった後に読むべき記事フリーランスの案件獲得(仕事)ってどうするの?現役フリーエンジニアが6つ解説!実績0の僕でもクラウドワークスで案件受注できた提案文を大公開!WordPressで10万円の案件を受注できるまでの学習全行程まとめまとめいかがでしたでしょうか!どのサイトを模写すればいいか迷っている方はこの記事を参考に、どれが適切か理解できたかともいます。最近フリーランスという働き方が流行っており、フリーのエンジニアを目指す人が増えて来ました。フリーランスエンジニアといっても様々なスタイルがあり、ざっと紹介するとこんな感じです。LP制作できるビギナーJs,Cssを...hikopro.com2019.05.12【実話】僕はプログラミング歴3ヶ月、それでもIT企業で働けます。僕は現在ベトナムのホーチミンのIT企業でエンジニア兼ディレクターのインターンシップをしています。ベトナムに来る前はインドのバンガロールでIT留学をして初めてプログラミングに触れました。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。date*日本語が含まれない投稿は無視されますのでご注意ください。BlogについてHikoProBlogは大学生フリーランスエンジニアが学んだことを発信するノウハウブログです。プログラミング学習、フリーランスの生き方、WordPress、Webマーケティング、IT産業について発信しています。BlogについてHikoProBlogは大学生フリーランスエンジニアが学んだことを発信するノウハウブログです。プログラミング学習、フリーランスの生き方、WordPress、Webマーケティング、IT産業について発信しています。Reserved.タイトルとURLをコピーしました。