模写コーディング記事まとめ

WEBコーダーの定番練習方法の模写コーディングを実践を交えながら複数の記事に渡って紹介しています！

模写するサンプルサイトをこちらで公開しています。

ブラウザの拡張機能の使い方や、デベロッパーツールの便利な使い方、HTML・CSSの実務ノウハウが詰まっています。

↓↓↓ HTML・CSS入門編をご覧になっていない方は是非先にご覧になってください！！ ↓↓↓

【HTML入門】WEB制作への第一歩 | KATSU LOG

本ブログで紹介するHTMLの入門記事一覧です

https://katsu-dev.netlify.app/blog/web/html/

【CSS入門】WEBページの見た目を綺麗に整えよう | KATSU LOG

本ブログで紹介するCSSの入門記事一覧です

https://katsu-dev.netlify.app/blog/web/css/

挫折しない！模写コーディングの手順

挫折しない！模写コーディングの手順 | KATSU LOG

定番の練習方法の模写コーディングの挫折しない進め方や、オススメのサイトを紹介します。

https://katsu-dev.netlify.app/blog/web/copy-coding/

挫折しない！模写コーディングの手順【実践編】

挫折しない！模写コーディングの手順【実践編】 | KATSU LOG

模写コーディングの実際のプロセスを順を追って紹介します。

https://katsu-dev.netlify.app/blog/web/copy-coding2/

挫折しない！模写コーディングの手順【実践編２】

挫折しない！模写コーディングの手順【実践編２】 | KATSU LOG

実践編の続きとして、ヒーロービュー、SERVICEセクションの模写を紹介します。

https://katsu-dev.netlify.app/blog/web/copy-coding3/

デベロッパーツールの使い方【使いこなして爆速コーディング】

デベロッパーツールの使い方【使いこなして爆速コーディング】 | KATSU LOG

模写コーディング、実務でも必ず使用するデベロッパーツールの使い方を紹介します。

https://katsu-dev.netlify.app/blog/web/developer-tool/

レスポンシブ対応の下準備

レスポンシブ対応の準備【メディアクエリ？ブレイクポイント？】 | KATSU LOG

模写コーディングしたサイトをレスポンシブ化する為の下準備をします。

https://katsu-dev.netlify.app/blog/web/responsive-pre/

レスポンシブ対応の実践編

レスポンシブ対応の手順 【実践編】 | KATSU LOG

模写コーディングしたページを実際の手順を追ってレスポンシブ化していきます！

https://katsu-dev.netlify.app/blog/web/responsive-1/

レスポンシブ対応の実践編 part2

レスポンシブ対応の手順 【実践編２】 | KATSU LOG

レスポンシブ対応実践編の続きで、ヒーロービュー、SERVICEセクションをレスポンシブ化していきます。

https://katsu-dev.netlify.app/blog/web/responsive-2/

jQueryで動きをつけよう

模写コーディングしたページに動きを付けよう！【jQuery実践】 | KATSU LOG

jQueryの実践として、以前の模写コーディングで作成したページに動きを付けます。

https://katsu-dev.netlify.app/blog/web/copy-coding-jq/