お久りぶりです。WEBチームのウサナミです。
本日はWEBコーディングの基礎の基礎も分からないという方向けの記事になります。
具体的には初心者過ぎてどのタグを使えばいいか分からないという方や、CSSの各スタイルがどういった動きをしているか分からないという方向けです。

早速作ってみる　超シンプルコーディング

簡単なタグと簡単なCSSだけでビジュアルを作成してみました。
PCでの表示推奨です。
style部分に各スタイルの動作の説明も書きましたので活用してみてください。
タグに関しては最低限の物だけを使用して作成しました。
推奨するわけではありませんが、どうしても分からないという方はまずはこの最低限のタグだけを覚えて、余裕が出てきたときに新しいタグをどんどん覚えていった方がいいかもしれません。

CSS

.header {
    display: flex;
    /*  要素の挙動を変更 要素を横並びに */
    justify-content: space-between;
    /* 要素の左右の配置を調整 他にもflex-start、flex-end等がある */
    align-items: center;
    /* 要素の上下の配置を調整 他にもflex-start、flex-end等がある */
    padding: 40px 5%;
    /* 要素の中の余白を調整 */
    background: #ddd;
    /* 要素の背景色を変更 */
}
.header h1 {
    font-weight: 700;
    /* 文字の太さを調整 太くしたり細くしたり */
    /* 100単位で設定出来るが読み込んでいるフォントに依存するので、効いているかどうかブラウザでの表示確認を推奨*/
    font-size: 25px;
    /* 文字の大きさを調整 大きくしたり小さくしたり */
}
.header ul {
    display: flex;
    /*  要素の挙動を変更 要素を横並びに */
}
.header ul li {
    margin-left: 30px;
    /* 要素の外の余白を調整 */
    /* margin-leftなので左側に余白を追加 */
}
.header ul li a {
    font-size: 13px;
    /* 文字の大きさを調整 大きくしたり小さくしたり */
    font-weight: 700;
    /* 文字の太さを調整 太くしたり細くしたり */
    border: 2px #bbb solid;
    /* 要素に線を追加する */
    /* 左から順に線の幅、線の色、線のスタイルを設定する */
    /* 基本的には幅と線だけ変えればある程度は代用が効く */
    padding: 15px 20px;
    /* 要素の中の余白を調整 */
    display: inline-block;
    /* 要素の挙動を変更 */
    /* inline-blockの他にもblock、inline、flex等がある */
    /* 動きに関しては背景色を設定した要素にblock等のstyleを指定するとどんな動きをしているか確認しやすい */
}
.content {
    max-width: 800px;
    /* 要素の最大幅を設定 */
    /* max-widthではなくwidthと書いた場合はその幅が絶対値となり、それ以下の幅にはならなくなる。 */
    margin: 0 auto 0 auto;
    /* 要素の外の余白を調整 */
    /* 左から準備上、右、下、左の数値を指定している */
    /* autoは左にのみ指定した場合は右揃え、右にのみ指定した場合は左揃え、左右に指定した場合は中央揃えとなる */
    padding: 50px 0;
    /* 要素の中の余白を調整 */
}
.content h2 {
    font-size: 22px;
    /* 文字の大きさを調整 大きくしたり小さくしたり */
    margin-bottom: 20px;
    /* 要素の外の余白を調整 */
    /* margin-bottomなので下側に余白を追加 */
    padding-left: 15px;
    /* 要素の中の余白を調整 leftなので左側の余白を調整*/
    border-left: 5px solid #bbb;
    /* 要素に線を追加する */
    /* leftなので左側の線が設定される */
    /* 左から順に線の幅、線の色、線のスタイルを設定する */
    /* 基本的には幅と線だけ変えればある程度は代用が効く */
}
.content p {
    font-size: 16px;
    /* 文字の大きさを調整 大きくしたり小さくしたり */
    margin-bottom: 40px;
    /* 要素の外の余白を調整 */
    /* margin-bottomなので下側に余白を追加 */
}
.footer {
    text-align: center;
    /* 要素の中を中央揃え */
    background: #ddd;
    /* 要素の背景色を変更 */
    padding: 50px 0;
    /* 要素の中の余白を調整 */
}
.footer .title {
    font-size: 18px;
    /* 文字の大きさを調整 大きくしたり小さくしたり */
    font-weight: 700;
    /* 文字の太さを調整 太くしたり細くしたり */
}

HTML

<div class="header">
    <h1>ヘッダータイトル</h1>
    <ul>
        <li><a href="">Hメニュー</a></li>
        <li><a href="">Hメニュー</a></li>
        <li><a href="">Hメニュー</a></li>
        <li><a href="">Hメニュー</a></li>
    </ul>
</div>

<div class="content">
    <h2>タイトルが入ります。</h2>
    <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
    <h2>タイトルが入ります。</h2>
    <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
    <h2>タイトルが入ります。</h2>
    <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
</div>

<div class="footer">
    <div class="title">フッタータイトル</div>
</div>

ブラウザでの表示例

最後に

ある程度慣れてくると応用が利くようになったり、さらに慣れてくるとアイディアを利用してちょっと特殊な事も出来るようになると思います。
そこまで行くまでの道のりは大変かもしれませんが、出来るようになると楽しいと思いますので、まずは自分を追い込み過ぎず、物事や構造を簡単に考えることから始めた方が気持ち的に楽になるかもしれません。