2023.12.28

HTML、CSS、およびJavaScriptを使用してパーソナライズされたホームページを作成する

marugotoyoten

cs50のYoutube動画「HTML、CSS、およびJavaScriptを使用してパーソナライズされたホームページを作成する」について要点と要約をまとめました

３つの要点

要点１
学生はHTML、CSS、およびJavaScriptを使用してパーソナライズされたホームページを作成します。
要点２
彼らはHTMLを使用してウェブページの構造を作成し、CSSを使用して要素をスタイルし、JavaScriptを使用して相互作用を追加します。
要点３
学生は異なるHTMLタグ、CSSセレクタ、およびプロパティを実装し、さらにBootstrapコンポーネントの使用を探求します。

要約

パーソナライズされたホームページの作成
この課題では、学生は自分自身または他のトピックについてのウェブサイトを作成することが求められます。彼らはHTMLを使用してウェブページの構造を作成し、CSSを使用して要素をスタイルし、JavaScriptを使用して相互作用を追加します。

HTML、CSS、およびJavaScriptの実装
学生は、関連する少なくとも4つのHTMLページを作成します。彼らはアンカータグを使用してページ間のリンクを作成し、ユーザーがウェブサイトをナビゲートできるようにします。さらに、見出し、段落、リスト、テーブルなどの異なるHTMLタグを使用してウェブページにコンテンツを追加します。少なくとも5つの異なるCSSセレクタとプロパティを実装するためにCSSが使用されます。学生はまた、アラートやフォームなどのコンポーネントに事前に作成されたスタイルを提供するCSSライブラリであるBootstrapを探求することが奨励されています。最後に、学生はJavaScriptを追加して、ユーザーアクションに応答するために関数とイベントリスナーを使用してウェブページをインタラクティブにします。

動的なウェブページの作成
学生はJavaScriptを使用してウェブページをより動的にする機会があります。JavaScriptのアラート、ボタン、ドロップダウンメニュー、フォーム、またはインターバルを使用して、ウェブページに相互作用を追加することができます。JavaScriptの関数とイベントリスナーを書くことで、学生はウェブページの要素との相互作用時に発生するアクションを定義することができます。

ホームページの完成
HTML、CSS、およびJavaScriptを組み合わせることで、学生は完全に機能し、パーソナライズされたホームページを作成することができます。彼らはHTMLを使用してウェブページの構造を作成し、CSSを使用して要素をスタイルし、JavaScriptを使用して相互作用を追加します。この課題では、学生はユニークで魅力的なウェブページを作成するための創造性と技術的なスキルを発揮することができます。

▼今回の動画

編集後記

▼ライターの学び

HTML、CSS、およびJavaScriptを使用してパーソナライズされたウェブページを作成する方法について学びました。このようなウェブページを作成するためには、それぞれの言語とツールの機能と特性を理解する必要があります。また、Bootstrapなどのライブラリを使用することで、より簡単にスタイルを追加することができます。

▼今日からやってみよう

今日から自分自身や興味のあるトピックについてのパーソナライズされたウェブページを作成してみましょう！HTML、CSS、およびJavaScriptを使用してウェブページの構造を作成し、要素をスタイルし、相互作用を追加することができます。また、Bootstrapを探求することで、より魅力的なデザインを実現することもできます。