![見出し画像](https://assets.st-note.com/production/uploads/images/99991374/rectangle_large_type_2_ca2604cdebc62502b05f59c078c8ce49.png?width=1200)
『実践!ECサイトを模写しよう』のレッスンをリリースしました
模写コーディングを取り上げたレッスンシリーズの締めくくりとして、『実践!ECサイトを模写しよう』をリリースしました。こちらは旧版である『実践!ECサイトをマークアップしよう』の構成を変えてリニューアルしたものになります。
リニューアルのポイント
これまでユーザーの方からいただいたご質問をすべて見直して、より丁寧な説明に変更しつつ、今回は複数ページの実装にチャレンジしていただく構成にしてみました。
また、ポートフォリオサイトやランディンページを模写する過程で学んだ以下のような実践的なテクニックも多用しているので、これまでのレッスンの良い復習にもなるはずです。
要素にデフォルトでついているスタイルをリセットするには?
余白を設定するときにmargin、paddingのどちらを使うべき?
要素を中央揃えにするときの考え方は?
CSSを見やすく整理するには?
さらに今回もコードだけではわかりにくい箇所については、説明図でイメージができるように工夫しました。
![](https://assets.st-note.com/img/1678510684020-gJARKsO1mN.png?width=1200)
![](https://assets.st-note.com/img/1678664730486-Ay8bcDlcpG.png?width=1200)
![](https://assets.st-note.com/img/1678664784019-fukLVNdRgY.png?width=1200)
すでに受講済の方は?
旧版をすでに受講済の方は、今回のリニューアル版を受講することで、HTML / CSS を使った模写コーディングに対する理解をさらに深めることができるはずです。
また模写しているサイト自体もデザインや構成を旧版から大きく変更しているので、受講済の方であっても良い復習になるはずです。ご自身の理解度を確認するためにも、再受講されることをおすすめします。
今後の予定
模写コーディングのレッスンが一通り終わったので、次は「GitHub Pagesでウェブサイトを公開しよう」をリニューアル予定です。もうしばらくお時間をいただきますが、こちらもお楽しみに!
今回の『実践!ECサイトを模写しよう』は全16回でまとめてみました。レッスンの詳細は以下よりご確認ください。
この記事が気に入ったらサポートをしてみませんか?