【コーディング課題〜上級編〜】解説記事

【コーディング課題〜上級編〜】解説記事

この記事を書いた人

PENGIN LLC.

PENGIN BLOGは、LPやECサイト制作を中心に行うPENGIN LLC.が運営しております。 弊社は、プログラミング教育などのテクノロジー教育に関わったメンバーが多数在籍しているため、当メディアを通じて、Web制作をご検討中の企業様やWeb制作を学習中の方の学習に役立つ情報を発信しています。

この記事では、コーディング課題(上級編)の解説をしていきます!

解説は動画内で行っています!

コードだけ確認したい方はサンプルコードをダウンロードしてください。

コーディング課題(上級編)をご覧になってない方はこちらの記事で確認してください☆

TOPページのコーディング

まずは制作物の確認とファイルの準備をして、TOPページのHTMLを記述していきましょう!

HTMLはまず全体の枠組みを書いてから、個別のセクションの中身を記述していきます。

Aboutページのコーディング

TOPページのコーディングができたら、下層ページのコーディングをしていきましょう。コピペでできる部分も多いので、省ける作業は省いていきましょう!

下層ページのコーディングはトップページのコーディングで記述したものをコピペで使い回せる場合も多々あります。

共通パーツがページをまたいでどのように存在しているかを観察しましょう!

コンタクトページのコーディング

最後にコンタクトページのコーディングをしていきます。フォーム周りのタグは扱いが難しく感じるかもしれませんが、慣れていきましょう。

今回使ったコードは、忘れずにスニペット登録しておきましょうね✨

Youtubeでは動画学習コンテンツを配信しています!

動画での学習は、テキストでの学習の3倍以上の効果を得られると言われています。そのため、クリスタでは、初学者の方に効果的な学習をして頂くためにYoutubeで学習コンテンツを提供しています。

 ぜひチャンネル登録お願いします→クリ★スタYoutubeチャンネル