About Me Page

Transcript

To start my “About me” page, I code the easiest part, the header and footer. I want the exact same header and footer on every page of my website. So I can just copy all the code from my gallery, paste it into my about me file and then delete any HTML and CSS that doesn't involve the header and footer.

Now, I'll go back to my mock up to figure out what to do for the rest of my content. This middle part of my mock up should definitely be in main tags. Then I'll use sections for both columns. The first section will have an image and a paragraph. And the second section will have a heading and a paragraph.

My HTML is good to go. But I've still got some CSS work to do. I want my columns to sit in a row, so I'll make main Flexbox. The first column should be 30%. And the second column should be 60%. If I use the section type selector, and give it a width of 30%, then both sections will have a width of 30%. In order to make just the first section 30%. I'll wrap it in div tags, then make the div tags 30%. Now, I'll change the width for my sections to 60%.

My second section is good now but my first section is too small since it's 60% of its parent. I'll give my first section a width of 100% by selecting it with a div section descendant selector. The descendant selector is more specific than the section type selector. So it overrides the type selector, and the descendant selector doesn't change my second section, since the second section is an inside of a div.

Now that my sections are the right sizes, I'll give main the justify content space around declaration. There we go. I've recreated the layout for the About Me page.