【理解度チェック】HTMLマークアップ課題

トリペン先生

ここまでのHTMLお疲れ様です！
ざっくりとは理解できているとおもいますが、1からマークアップできますか？
その理解度を試すために、ここで1からマークアップしてください。

まずは、動画や答えを見ずにご自身だけでチャレンジしてください。

今回のテキストデータとデザインデータ

テキストデータ
https://docs.google.com/document/d/1ZxS_HtaLQXoCt3IiHIdMuQ5gATq1XlgEos_P_EsGTKk/edit

デザインデータ（プレビュー）
https://xd.adobe.com/view/1d281ba1-edc8-47c0-a099-6812429a9f7e-487b/

記事の内容

コードの答え

今回書いたコード

<header>
    <h1>しっかり・ゆっくりHTML・CSS講座</h1>

    <p>きちんとコーディングしたい人向けのYouTubeライブ配信講座になります。</p>

    <nav>
      <ul>
        <li><a href="">講座一覧</a></li>
        <li><a href="">HTML講座</a></li>
        <li><a href="">CSS講座</a></li>
        <li><a href="">参考サイト</a></li>
      </ul>
    </nav>
  </header>

  <main>

    <section>
      <h2>更新情報</h2>
      <p><time datetime="2021-05-05">2021.05.05</time></p>
      <p><a href="">HTML講座の5日めを更新しました</a></p>

      <p><time datetime="2021-05-05">2021.05.05</time></p>
      <p><a href="">HTML講座の5日めを更新しました</a></p>

      <p><time datetime="2021-05-05">2021.05.05</time></p>
      <p><a href="">HTML講座の5日めを更新しました</a></p>
    </section>

    <section>
      <h2>講座一覧</h2>

      <section>
        <p>HTML基礎</p>
        <h3>しっかり・ゆっくりHTML講座</h3>
        <p>しっかり・ゆっくりHTML講座は、初心者向けの内容になります。
          HTMLをしっかり理解したい人におすすめな内容になります。</p>
      </section>

      <section>
        <p>CSS基礎</p>
        <h3>しっかり・ゆっくりCSS講座</h3>
        <p>しっかり・ゆっくりCSS講座は、初心者向けの内容になります。
          CSSのプロパティーをしっかり理解したい人におすすめな内容になります。</p>
      </section>
    </section>

    <section>
      <h2>HTML講座</h2>

      <section>
        <p>HTML講座1日目</p>
        <h3>準備とheadについて</h3>
      </section>

      <section>
        <p>HTML講座2日目</p>
        <h3>テキスト系とコンテンツモデルについて</h3>
      </section>

      <section>
        <p>HTML講座3日目</p>
        <h3>パス・リンクとテーブルについて</h3>
      </section>

      <section>
        <p>HTML講座4日目</p>
        <h3>フォームとアウトラインについて</h3>
      </section>
    </section>

    <section>
      <h2>参考サイト</h2>

      <section>
        <h3>Living Standard</h3>
        <p> HTMLの基準を設定している団体です。
          一度は確認してみましょう！</p>
        <a href="">サイトをみる</a>
      </section>

      <section>
        <h3>Code Kitchen</h3>
        <p>Web制作の「あれどうやって作るの？」を料理
          レシピのように探せるナレッジベースです。</p>
        <a href="サイトをみる"></a>
        <a href=""></a>
      </section>
    </section>
  </main>

  <footer>
    <nav>
      <ul>
        <li><a href="">講座一覧</a></li>
        <li><a href="">HTML講座</a></li>
        <li><a href="">CSS講座</a></li>
        <li><a href="">参考サイト</a></li>
      </ul>
    </nav>

    <p>運営者情報：クリエイターズファクトリー</p>
    <p>大阪府大阪市西区北堀江1-1-14</p>


    <p><small>© 2021 CF講座</small></p>
  </footer>

講座を完了したらクリックしてね！

HTML基礎

【理解度チェック】HTMLマークアップ課題

コードの答え

HTMLコーディングの役割について知ろう

エディターを準備して便利機能を使おう

VSCの使い方を知ろう！

ファイルを作成してみよう！

基本となるHTMLを書いてみよう

HTMLの基本のタグについて知ろう！

aタグの使い方について学ぼう

imgタグを使って画像を表示させてみよう

パスについて理解しよう

①HTMLマークアップ練習

②HTMLマークアップ練習〜アウトラインタグについて理解しよう〜

コンテンツモデルについて理解しよう

【理解度チェック】HTMLマークアップ課題

tableタグについて理解しよう！

お問い合わせフォームについて理解しよう！

拡張機能「Markuplint」の活用方法