WEBサイトを作ると言っても、一から組み立てるわけではありません。
テンプレートを利用して、テキストや画像、色合いを変更して完成させる方法を取ります。
変更する際にHTMLやCSSに触れることで、慣れていくというのが本講義の目的になります。

利用するテンプレート

テーマ名：Freelancer
製作者：Start Bootstrap

以下のページで紹介されていました。
無料で30枚！スマホ対応HTMLテンプレート 初心者に優しいシングルページばかりを集めました

自己紹介サイトのデザインテンプレートですね。
私についてを説明する箇所があり、ポートフォリオ（作品集のようなもの）を並べるブロックもあります。
シングルページでシンプルなのが良いと採用しました。
bootstrapを採用しており、ソースコードも法則性が見受けられ、見本としてもとてもいいものだと思います。

Bootstrapとは？意味や特徴、種類を徹底解説 | 侍エンジニア塾ブログ（Samurai Blog）

テンプレートのダウンロード

テンプレートのダウンロードページにある、『Free Download』ボタンをクリックし
中身にあるstartbootstrap-freelancer-gh-pagesフォルダをデスクトップに展開しましょう。

index.htmlファイルをブラウザにドラッグ＆ドロップして、Demoページと同じ表示になっていれば、ダウンロード完了です。

ダウンロードが完了したら、HTMLの編集を行います。
index.htmlファイルをテキストエディタで開きましょう。

サイトタイトル

以下の箇所を変更することにより、ブラウザの上部タブに表示される文字が変更されます。
画像の黄色線を参照。

/*11行目*/
<title>Freelancer - Start Bootstrap Theme</title>

ページタイトル

以下の箇所を変更することにより、左上のページタイトルを変更されます。

/*28行目*/
<a class="navbar-brand js-scroll-trigger" href="#page-top">Start Bootstrap</a>

aタグで囲まれているので、ページ内リンクとして利用されているのがわかると思います。
ページ内リンクの変更は、href内の#以降の文字列を移動させたいブロックのidと一致させることで利用できます。

その他文字列の変更

表示されている文字をエディタ内で探し、編集するだけなので、とても簡単です。
目についたところを編集し、表示を確認していくことにより、HTMLタグの種類もなんとかくわかってくるでしょう。

まずは、英語の箇所を全部日本語に変更してみましょう。

画像の変更

テーマフォルダ＞imgを開くと、画像が入っていますね。
このフォルダが、表示されている画像の読み込み対象フォルダになります。

例えば下の画像は、自己紹介者の顔写真になります。

/*54行目*/
<img class="masthead-avatar mb-5" src="img/avataaars.svg" alt="">

上のように、ソースコード1行で画像が呼び出されています。
呼び出す対象画像はavataaars.svgです。

では、この画像を変更したい場合、どうするかというと？

• 新たに画像をフォルダに追加し、ソースコードを新しい画像名に書き換える
• 表示されている画像と同名の画像をフォルダに入れて上書きする

という二つの方法があります。
どちらの方法を使っても問題ないので、変更してみましょう。

Modal（モーダル）の中身の変更

モーダルウィンドウとは、ポートフォリオの画像をクリックしたときに表示される、子ウィンドウの事です。
これを開くことにより、ポートフォリオの個別の説明が表示されているのが見られるでしょう。
ページを増やさず、コンパクトにページをまとめたい際に使われる機能だと言えます。

/*326行目*/
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-labelledby="portfolioModal1Label" aria-hidden="true">

例として上の1行を引っ張ってきました。
このclass名「modal」で囲まれたブロックが、1つのモーダルウィンドウとして表示されます。
なので、この囲まれたブロック内を編集することで、表示が変更されます。

id名「portfolioModal1」というところに注目すると、これと一致するhrefの中身があることがわかるでしょう。
これらには法則性があるので、いじってみるのもいいかと思います。

テキストや画像を修正するだけで充分完成と言えますが、色合いを変更したい、文字サイズを変更したいという事もあるでしょう。
そんな時は、CSSファイルを追加で読み込ませて、そこにスタイルを書いていきましょう。

新規CSSを読み込む

テーマフォルダ＞cssのフォルダ内にstyle.cssファイルを作成。
index.html内に以下を追加。

/*20行目に追加*/
<link href="css/style.css" rel="stylesheet">

これで、CSSが読み込まれるようになりました。

CSSにスタイルを追加

では、背景色が白の部分を真っ黒に変えてみましょう。
作成したCSSファイルをテキストエディタで開き、以下を追加。

body{
background-color:#000;
}

この他、文字色の変更や、フォントの変更などはCSSで行います。
CSSを利用することで、自分色のWEBサイトに変化させることができます。

CSSの全てを理解するにはかなりの時間を要するので、初級コースでは専門的に学習を行いませんが、
以下のような解説サイトを見ることで、どういうものかがわかってくると思います。
初心者向けCSS（スタイルシート）入門：基本的な書き方を総まとめ！
【初心者向け】CSS(スタイルシート)の書き方を丁寧に解説 | creive【クリーブ】

最終回という事で、次へのステップとなるHTMLによるWEBサイトの作成を行いました。
思ったよりも簡単に作れるという事が理解できたのではないでしょうか。

しかし、これを自分の思う通りのレイアウトやデザインで作ろうとすると、とたんに基礎的な知識が必要となり、難易度が上がります。
せっかく興味を持ったのに難易度で諦めるのはもったいない事なので、今後の自主学習に励んでください。

その過程でやってみたいプログラミング言語があれば、臆することなく挑戦してみましょう。
挑戦することにより、プログラミング言語が身近になり、継続することでプログラマーとして成長していきます。

難しく考えず、スマホゲームをする感覚で暇つぶしに学習してはいかがでしょうか。
触れ続けることが上達の近道ですから。

以下のページにあるすべてのリンクに目を通してみましょう。
向き不向きはあるので、どんな順番でも問題ありません。