Are there design-patterns for website design?

The following HTML index page is the root page for a site.

Navigation bar for one-level deep site

 .box {
     background-color: #ddd; color: #000; padding: 5px;
 }
 .main-head { grid-area: hd; }
 .content { grid-area: ct; }
 .main-nav { grid-area: nv; }
 .main-footer { grid-area: ft; }
 .wrapper {
     display: grid; grid-gap: 2px;
     grid-template-areas: "hd" "nv" "ct" "ft";
 }
 @media (min-width: 1200px) {
     .wrapper {
         grid-template-columns: 1fr 1fr 4fr 1fr 1fr;
         grid-template-areas: 
             "hd hd hd hd hd" ". nv ct ct ." ". nv ct ct ." ". ft ft ft .";
     }
 }

<div class="wrapper">
    <div class="box main-head">The header</div>
    <div class="box main-nav">
        <ul>
            <li><a href="">Nav 1</a></li>
            <li><a href="">Nav 2</a></li>
            <li><a href="">Nav 3</a></li>
        </ul>
    </div>
    <div class="box content">
        <h1>Main</h1>
    </div> 
    <div class="box main-footer">The footer</div>
</div>

"The header" does not include the navigation links. When the user clicks on "Nav 1", "Nav 2", .., only the "Main" DIV changes. The others remain, giving the site some uniformity.

This doesn't quite work once a site is more than one level deep. Once the site is two levels deep, it makes more sense for the navigation to be in "The header" and for the "Nav x" links to be relative to the links in the header.

Does there exist a design school that gives a label to the present design (above), or to the one just suggested? Two programmers talking will say "I'm using such and such patterns" and they will instantly understand what each is saying.

Are there design-patterns for page design?

Please don't suggest using a tool that generates HTML. The idea is to understand enough to craft (responsive) sites with barebone JS/CSS/HTML (and grids).

Tags: , , , , , ,