JWS Docs / Next Build Steps / Constructing the Main

Constructing the Main

In the <main> section of the page the snippet file provided us with two div's with the class "panel_full" both containing another empty class div.

   
      <main>
         <div class="panel_full">
         <div class="">
         </div>
         </div>
         <div class="panel_full">
         <div class="">
         </div>
         </div>
      </main>
   

Step 1

We are going to start with the first set of div's and make the inner one a text panel by adding the class "text_panel".

   
      <main>
         <div class="panel_full">
         <div class="text_panel">
         </div>
         </div>
   

Step 2

This is where we are going to add the bulk of the content about the learning journey of building your first webpage and the tools you have learnt to use whilst doing it.

So to start with inside our "text_panel" div we are going to need to add a <h2> heading and six <p> paragraph tags.

We can add these using Emmet by making a line space inside the div and then typing: h2+p*6

   
      <main>
         <div class="panel_full">
         <div class="text_panel">
             <h2></h2>
             <p></p>
             <p></p>
             <p></p>
             <p></p>
             <p></p>
             <p></p>
         </div>
         </div>
   

If you are planning to add your own content then you may not want to add all six paragraph tags, so you can adjust the number in the Emmet command to suit your needs.

Or you may prefer to write what you've learnt in a bulleted list <ul> instead which you could do by typing: h2+ul>li*6

For those following along you should now add the following words to your text panel.

   
     <div class="text_panel">
         <h2>How I Built it</h2>
         <p>I built my first website using JasmineWS template and tutorial. Along the way I have learnt to use:</p>
         <p>HTML to mark up my content.</p>
         <p>Git to keep track of my page updates/versions.</p>
         <p>GitHub has a online web editor, which allowed me to update my code and commit it back to my repository. It even allows for drag and drop image upload.</p>
         <p>I then turned on hosting which gave me URL I can share with others.</p>
         <p>Next up I am going to learn to use Git branches.</p>
     </div>
   

That is the first set of div's complete now to fill the second set.

Step 3

For the outer div we are going to change the class from "panel_full" to one we haven't used so far "panel_two_thirds", this panel will center itself and the content inside but only takes up two thirds of the screen width on larger screen sizes.

   
         <div class="panel_two_thirds">
         <div class="">
         </div>
         </div>
      </main>
   

Step 4

The inside div we are going to add the class name "contents_panel".

   
         <div class="panel_two_thirds">
         <div class="contents_panel">
         </div>
         </div>
      </main>
   

Inside this div we are going to add a heading, image and text panel.

We will also use class names to control their layout so they are not just in a column but split so the heading element is full width across the top with the text centered, then beneath this the image (38% width) and text (58% width) will sit side by side.

Again we can add these using Emmet by making a line space inside the div and then typing: h3.cp_title+img.cp_img+div.cp_text>p*3

   
        <div class="panel_two_thirds">
        <div class="contents_panel">
        <h3 class="cp_title"></h3>
        <img src="" alt="" class="cp_img">
        <div class="cp_text">
            <p></p>
            <p></p>
            <p></p>
        </div>
        </div>
        </div>
        </main>
   

We should now see a <h3> an <img> and a <div> all with class name's added, plus three <p> inside the div.

Unfortunately Emmet doesn't quite fill in all the tags we need to a <img> so we will have to manually add width="" and height="" just before the alt.

    
     <img src="" width="" height="" alt="" class=cp_img">
    

For those following along you should now add the following contents to your "contents_panel".

You will find the image for this panel along with instructions of how to access it on our download page.

   
        <div class="contents_panel">
        <h3 class="cp_title">I used JWSOne Template</h3>
        <img src="../img/jws-one-column-layout.svg" width="250" height="250" alt="Jasmine Web Starter One Column Layout" class=cp_img">
        <div class="cp_text">
            <p>My first webpage was built using the JWSOne Template, which provides a single column layout with preset CSS styling.</p>
            <p>To learn how to use this template on Github, head over to JasmineWS Docs and follow the step by step tutorials "Getting Started" & "Build Steps".</p>
            <p>Plus continue the journey with "Next Steps" learning how to create additional pages from scratch on GitHub using Snippet Files & Emmet Commands, also more advanced layouts and features.</p>
        </div>
        </div>
   

Step 5

The final step on the <main> is to add a little more interest and styling to the <div class="panel_two_thirds"> by adding a background colour to it with the class "bg_col". The colour properties of this class are already defined in the CSS, using the variable --color-secondary-background.

    
        <div class="panel_two_thirds bg_col">
    

If we preview the page now though we find that the contents don't sit quite right against the background with the image and text touching the bottom edge.

To fix this we can add a little bit of padding to the div, this will help give it a small border of colour around all the contents. We have another predefined utility class of "padding1" to do this with.

    
        <div class="panel_two_thirds bg_col padding1">
    

That's it for the <main> section of the page, our next step covers adding social links, contact details and copyright to the <footer> section.