fuchi: tutorials and templates

Seldom do people ask/reach out to me for coding help. When people do I feel bad because i'm lowkey terrible at explaining things through words and feel like I fail at helping. This page is something i've been wanting to make for a while, but put it off because i'm not really qualified to teach. There's also plenty of tutorials and templates already out there. However...I just think it would be fun to do this so...enjoy this page.

templates

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <link href="https://fonts.googleapis.com/css?family=Balsamiq Sans" rel="stylesheet"> 
 <title>My Website</title>
<style>
* {
  box-sizing: border-box;
}
  
  /* this is to center the page */
html {
  display: flex;
  justify-content: center;
}

/* highlight color */
::selection {
  background: #f1f5ec;
  color: #c2d8a5;
}

body {
  font-size: 16px;
  font-family: Balsamiq Sans;
  position: relative;
  color: #4d5047;
  background-color: #FCF5F6;
  line-height: 1.5em;
}

.wrapper {
  border: 2px solid lightgrey;
  background-color: white;
  width: 800px;
}

.grid {
  display: grid;
  width: auto;
  height: 100%;
}
  
.grid > div {
 /* every element in .grid, will have these attributes*/
  overflow-y: auto;
  padding: 10px;
  border: 1px solid #b5cea3;
}
  
.element1 > div {
  display: block;
  border-bottom: 1px solid #b5cea3;
  font-size: 20px;
}
  
.element3 {
  background-color: #F5EBE9;
  height: 300px;
}

.element4 {
  height: 300px;
}

.element7 {
  background-color: #EBE6E8;
}

.element {
  background-color: #E8EBE6;
  border-right: 1px solid #b5cea3;
  height: 300px;
}
  
.element1 a {
  text-decoration: none;
}

.element1 a:hover {
  text-decoration: underline;
}

a {
  color: #95ad89;
}

a:hover {
  text-decoration: none;
}
  
.foot {
  padding: 10px;
  border: 1px solid #b5cea3;
  text-align: center;
  background-color: #E8EBE6;
}
</style>
 </head>
  <body>
<div class="border">
  <div class="wrapper">
<div class="grid" style="grid-template-columns: 30% 70%;height:300px;">
  <div class="element">
    <div class="element1">
<div>
 <strong style="color:#BFA6B3">naviagtion</strong> 
</div>
<div>
  <a href="https://neocities.org/">link 1</a>
</div>
<div>
  <a href="https://neocities.org/">link 2</a>
</div>
<div>
  <a href="https://neocities.org/">link 3</a>
  </div>
<div>
  <a href="https://neocities.org/">link 4</a>
</div>
  <div>
  <a href="https://neocities.org/">link 5</a>
</div>
   <div>
  <a href="https://neocities.org/">link 6</a>
</div>
         <div style="border:none;">
  <a href="https://fuchi.neocities.org/">link 7</a>
</div>
    </div>
  </div>
  <div class="element2">
 <img src="https://i.imgur.com/1a6PIjC.jpg" width="200" style="float:right;"> This is my first version 6.0 index. I cleaned the code up and stripped it. You can credit me or don't. I don't really care this is just a bunch of grids.
  </div>
</div>
  <div class="grid" style="grid-template-columns:50% 50%;">
<div class="element3">
  put anything you want in these
    </div>
    <div class="element4">
  </div>
  </div>
      <div class="grid" style="grid-template-columns:26% 54% 20%;height:300px;">
        <div class="element5">
        </div>
<div class="element6">
 </div>
    <div class="element7">
      it's 11:18 PM
    </div>
    </div> 
<div class="foot">
this is your footer.
</div>
 </div>
      </div>
  </body>
</html>

HTMLCSS tutorials

If you have any tutorial requests please email me fuchimon@proton.me or something idk what to put here.