HTML CSSのヘッダー、メイン、フッターを勉強した

コードに訳をつけながら書いてみました。

ヘッダー

<div class="header">
  <div class="header-logo">タイトル名</div>
  <div class="header-list">
    <ul>
      <li>書きたい内容</li>
      <li>書きたい内容</li>
      <li>書きたい内容</li>
    </ul>
  </div>
</div>

.header {
  background-color: #26d0c9;
  color: #fff;
  height: 90px;
}
.header-logo {
  font-size: 36px;
  float: left;
  padding: 20px 40px;
}
.header-list li{
  float: left;
  padding: 33px 20px
}

例　<h1>あいうえお</h1>
<>をタグという。最初を開始タグ、次を終了タグと呼ぶ。
またタグで挟まれたものをコンテンツという。
例の全体を要素という。
要素を作ることをマークアップという

    <div class="main">
      <div class="copy-container">
        <h1>書きたい見出し<span>.</span></h1>
        <h2>書きたい見出し</h2>
      </div>
      
      <div class="contents">
        <h3 class="section-title">タイトル名</h3>
        <div class="contents-item">
          <img src="任意のURL">
          <p>書きたい項目</p>
        </div>
        <div class="contents-item">
          <img src="任意のURL">
          <p>書きたい項目</p>
        </div>
        <div class="contents-item">
          <img src="任意のURL">
          <p>書きたい項目</p>
        </div>
        <div class="contents-item">
          <img src="任意のURL">
          <p>書きたい項目</p>
        </div>
      </div>
    </div>

メイン要素はcopy-container,contents,contact-formで構成される。
pは段落を表す。改行して表示される。
class="section-title"は見出しに使う。

メインのCSS

.main { /*メイン*/
 padding: 100px 80px; /*borderの内側の余白を上下100px左右80px*/
}

.copy-container h1 { /*見出し*/
  font-size: 140px; 
}

.copy-container h2 { /*小見出し*/
  font-size: 60px;
}

.copy-container span { /*spanに囲まれた部分*/
  color: #ff4a4a;
}

.contents {
  height: 500px; /*高さ500px*/
  margin-top: 100px;
}

.section-title {
  border-bottom: 2px solid #dee7ec;/*枠線の太さ　枠線の色*/
  font-size: 28px;
  padding-bottom: 15px;/*枠線の内側に余白*/
  margin-bottom: 50px;/*枠線の外側に余白*/
}

.contents-item {
  float: left;/*横並びにする*/
  margin-right: 40px;/*枠線の右の外側に余白*/
}

.contents-item p {
  font-size: 24px;
  margin-top: 30px;/*枠線の上の外側に余白*/
}

枠、送信ボタン

  <div class="contact-form">
    <h3 class="section-title">書きたい項目</h3>
    <p>書きたい項目</p>
    <input> <!--１行のテキスト入力を受け取るための要素　枠を作ることができる-->
    <p>書きたい項目</p>
    <textarea></textarea><!--複数行のテキスト入力を受け取るための要素　枠を作ることができる-->
    <p>書きたい項目</p>
    <input class="contact-submit" type="submit" value="送信"><!--送信ボタンを作る-->
  </div>

.contact-form {
  padding-top: 100px;
}

input, textarea {<!--,をつけることで複数のものを指定できる-->
  width: 400px; <!--枠の幅が400px-->
  margin-top: 10px;<!--枠の余白の外側の10px-->
  margin-bottom: 30px;<!--枠の余白の外側-->
  padding: 20px;<!--枠の大きさ-->
  font-size: 18px;
  border: 1px solid #dee7ec;<!--線の太さ　線の色-->
}

.contact-submit {
  background-color: #dee7ec;<!--送信ボタンの色-->
  color: #889eab;<!--ボタンの文字の色-->
}

フッターのCSSは背景色、文字の色、高さ
footer-logoは横に並べて、文字の大きさを指定

フッター

<div class="footer">
  <div class="footer-logo">Progate</div>
  <div class="footer-list">
    <ul>
      <li>書きたい項目</li>
      <li>書きたい項目</li>
      <li>書きたい項目</li>
    </ul>
  </div>
</div>

.footer {
  background-color: #2f5167;
  color: #fff;
  height: 120px;
  padding: 40px;<!--上下左右40pxの余白-->
}

.footer-logo {
  float: left;<!--左側におく-->
  font-size: 32px;
}


.footer-list {
  float: right;<!--右側に置く-->
}

.footer-list li {
  padding-bottom: 20px;
}

理解できるように頑張りたい。