Building the Home Page

Transcript

I'm on the last part of my project my homepage. Since I've already shown you how to mock things up a couple of times, I'll go straight to the final mock up for my homepage and convert it into code. My HTML file already has the code for the header and footer pasted in. I also added link tags at the top of my page for my home.CSS file, and my app.CSS file.

Now, I'll look at row two in my mock up. This row is my main content. So I'll use the main tags. The row has two columns. For the first column, I’ll need a section. And inside of it, I'll put a heading and a paragraph. For the second column, I'll use a figure and a fig caption. My figure is going to be related to what I have in my main content. So it doesn't really matter if I put it on the left or right in my paragraph, but I like it on the right.

Next, I'll pull up my home.CSS file. I'll select the main and turn it into a Flexbox. I'll use the justify content space around declaration and add a little margin to the bottom to create that space between rows two, and three. I'll give my section a width of 40%. And my figure a width of 50%. This leaves 10% of the space left over in row 2 that space around can add to the left and right of my figure in my section. I also gave my image a width of 100%.

Let's preview this really quick. It's all good.

On to row three, I'll need a Flexbox because all four sections need to display side by side and as you know, sections display block. I'll use a div for this row. Each section has an image, a heading and a paragraph. I didn't use a figure here because I think that moving my image to the bottom of the section would break the flow of my content. I want my users to see the image first, then the heading and then the paragraph in that order. Once again, I'll pull up my home dot CSS file. I made my div, display flex and gave it the justify content space around declaration. I also gave each section a width of 20% and the images inside the sections a width of 100%. Let's do one last preview. Perfect. Everything is in order.