And there is a very important reason why I picked out this specific type of layout and I did it for multiple pages. I did it on the about page and the menu page is pretty much this entire set of images and then right next to the images are the content elements.

The reason why I did that was because one, I've been asked to build this type of layout many times and so I'm assuming that at some point in your career you'll be asked to work on this kind of system as well. In addition to that, this type of layout will force you to really reinforce a lot of the concepts that we've learned so far.

You need to be able to learn how to work with a grid layout, how to implement Flexbox, how to have different text components sit right next to images, how to align them. Then once we get into the responsive section, which is where we're going to be able to make this program work perfectly on mobile devices, you can see how this will work.

If you just shrink the size here, you'll see when this gets to a smartphone size, do you see how the images and the text actually rearrange themselves automatically?

Well, that is going to be something that you are going to have to do many, many times and this type of layout is a great way of learning how to get that accomplished. With all that being said, let's spend the rest of this guide putting the HTML structure in place that we're going to need for this.

Then after that, in one of the next guides, we'll get into adding the CSS. So come down here in the about.html and we want this to be below the page container and we're going to create a new wrapper. This is going to be called the squares-wrapper, if I can spell it, and there we go.

All the content we're going to be putting together is going to be inside of here. I'm going to create a new class here just called squares and then the square components will be listed inside of here. A very common convention that I'll follow is I will have some type of wrapper container class, then I will have the plural name for whatever I'm using.

So if I have a squares wrapper inside, I'm going to have squares and then I have a singular version of that right afterwards. So here, I'm going to have nested inside of that a square class, and here, we're going to have an image, so I'm just going to put a comment here and say image goes here. Then below that, we're going to have the actual content.

Let's just call this the square text wrapper. Then inside of here, we'll have a h1 and I want to have just some lorem ipsum text, so we can say h1 lorem8, which is my Emmet abbreviation, that's going to give us some good heading content. Then, I want to do a paragraph tag and for this I want a little bit more content. Let's say lorem50. That should give us what we're looking for. We can always add more if we want to add more, or take some away if we want to do that. That is going to be our basic square text wrapper.

about.html

<div class="squares-wrapper">
    <div class="squares">
        <div class="square">
            <!-- IMG goes here -->

            <div class="square-text-wrapper">
                <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit </h1>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta provident sunt laudantium fuga repudiandae, nulla! Debitis ullam culpa incidunt quo voluptatibus deserunt, quia velit, eaque quaerat iste consequuntur, explicabo voluptate voluptates dolor dignissimos illum doloribus distinctio mollitia quam laboriosam. Optio possimus vitae a. Dolore obcaecati animi non sit nemo, iusto debitis quos tempora temporibus veniam, accusantium est deserunt aperiam, reprehenderit sed dolorem, reprehenderit officiis vero corporis totam adipisci perspiciatis atque cum architecto voluptatem!</p>
            </div>
        </div>
    </div>
</div>

Now, let's take care of this image. If I switch over here, I will include these images for you in the show notes as usual. Here, I want to go to the digital literacy guide. I have images and I created an entire directory called squares here and so we will use both of these images. I'm going to click on this and let's save the image as. Go back to images, right click new folder, and we're just going to call this squares, just to keep the naming consistent.

We'll do squares fries-sq-1.jpg and now we'll do the same thing for fries two. Once again, feel free to use any kind of images that you want. I did have these custom made with the right size just to make sure that they render properly on the page.

So I'd recommend, even if you want to use other images, that you will at least keep these same sizes. If you're also curious on how to get access to images for your website, a great resource, it's what I've used here, is called Unsplash. If you go to Unsplash, they are free photos that you can use for social media, for websites, anything like that. You can even see some of the images that we've been using throughout this course if you type in fries.

But, you could type in anything else. I will get coding pictures from here and just it's a fantastic resource for any kind of stock photography that you need and it's all completely free, which is really nice.

Now, we have those images here. Let's come down and let's switch to the code and add these in, so I'll get rid of that comment. Let me create a wrapper for this because I know I'm going to eventually use it. I'm going to say image wrapper and that's a div. Inside of here is going to be an image tag and we're going to grab that in images, squares, and then we'll go with the first one.

We can just say here Fries that should be fine. Then, that's all we need for one of the squares.

about.html

<div class="squares-wrapper">
    <div class="squares">
        <div class="square">
            <div class="img-wrapper">
                <img src="images/squares/fries-sq-1.jpg" alt="Fries">
            </div>

            <div class="square-text-wrapper">

Now if we hit refresh, then you're going to be able to see a gigantic set of fries and then the h1 and then some content.

So all we need to do now to get us started is to add one of the other squares and scroll to the left because that's showing everything, so this gives us the square and there we go. Just go down if you have the square class highlighted, go down only to where the ending div is and then you can just copy and paste that.

Now, the second one is going to be slightly different. The only difference being that we want to reverse the order. Here, I'm going to cut this and then I'll paste the image wrapper at the bottom of this square. If I hit refresh now, actually let me switch it up. We want to use fries square two. I'll just make sure that that's all working. Now, you can see we have that other image and we have our headline and then all of our content.

This may not look great yet, but as hopefully you will trust me now since we've been doing this for a while, we have the structure in place. We have all the HTML code we need and we're going to leverage CSS in order to style it and lay it out on the page. So we will do that in the next guide.

Resources

• Source Images