Solution 1 :

As inferred from the problem statement, you needed to have an html/css layout for the rows and columns inside the image given, so I have tried achieving a layout that may help serve your broader purpose. You may also refer to the codepen link: https://codepen.io/Gritika190694/pen/vYGVNPM

.container{
  font-size: 24px;
  font-family: arial,sans-serif,helvetica;
  text-align: center;
}
.topmost{
  display: grid;
  grid-template-columns: 50% 50%;
}
.topmost > .left{
  grid-row: 1 / span 2;
  background-color: skyblue;
  height: 150px;
}
.topmost > .right-top{
  background-color: orangered;
  height: 75px;
}
.topmost > .right-bottom{
  background-color: orange;
  height: 75px;
}
nav > ul{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  list-style-type: none;
  background-color: #eeeeee;
  margin: 0;
  height: 50px;
}
.below-nav{
  display: grid;
  grid-template-rows: 150px 150px;
}
.below-nav > .top {
  background-color: #a4a4a4;
  color: #ffffff;
}
.below-nav > .bottom{
  background-color: goldenrod;
}
.cards-wrapper{
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: 100px 100px;
}
.card:nth-child(even){
  background-color: #cccccc;
}
.card:nth-child(odd){
  background-color: skyblue;
}
.bottommost{
  height: 50px;
  background-color: #a6a6a6;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bottommost > a:link,
.bottommost > a{
  text-decoration: none;
  color: #ffffff;
}
<html>
  <body>
    <div class="container">
      <div class="topmost" id="topmost">
        <div class="left">We got you covered</div>
        <div class="right-top">Learn More</div>
        <div class="right-bottom">
          Join now
        </div>
      </div>
      <nav>
        <ul>
          <li>Home</li>
          <li>About</li>
          <li>Services</li>
          <li>Contact</li>
        </ul>
      </nav>
      <div class="below-nav">
        <div class="top">Your Personal Finnancial safety net online</div>
         <div class="bottom">About Us</div>
      </div>
      <div class="cards-wrapper">
        <div class="card">01</div>
        <div class="card">02</div>
        <div class="card">03</div>
        <div class="card">04</div>
        <div class="card">05</div>
        <div class="card">06</div>
      </div>
      <div class="bottommost"><a href="#topmost">Scroll To Top</a></div>
    </div>
  </body>
</html>

Solution 2 :

Very simple. You need to use the grid system or flexbox.

I drew over the image with grid containers led out. Just study the grid for a couple of minutes, take out some paper and see how you can organize the grid efficiently.

enter image description here

Problem :

I’m new to this but I feel incredibly sluggish.

Can anyone please describe how I build this front page with HTML / CSS? Mostly need help with the structure of boxes and how they are organized.

Thanks in advance!

Page structure to build

Comments

Comment posted by w3schools.com/html/default.asp

w3schools.com/html/default.asp

Comment posted by Smollet777

You can do both. And even mix of two. Sorry but Stack Overflow is not a code writing service. We are always glad to help and support new coders but you need to help yourself first. You are expected to try to write the code yourself.

Comment posted by Ritika Gupta

I have tried achieving something that may serve your broader purpose, pleas check the answer. @user14300518

By