Adding a New Page

Updated: February 17, 2022
No Credit Card Required
ClaimYour
FreeTrialClass

Transcript

I finished the plant gallery so I'm on to “About Me”. I'll click Add Page and name it “About Me”. But since I'm going to put the same header and footer on every page, there's a better way to do this. I'll click the tab for my gallery, and then click the duplicate current page icon. Now I can highlight everything between my header and footer and press backspace.

Before I continue, I’ll delete the other page I created by clicking its tab, and then clicking the trashcan icon. There, I'm ready to get mocking my About Me page isn't going to have that much content, it really just hase a picture of me a small description of who I am, and a longer paragraph about me and why I created the website.

I'll start by dragging an image just below the header. Right below the image, I'll put a label, this is where that small description of me will go. I'm going to group my image and my description. So I'll drag a rectangle element over and resize it so the image and label Oh dear, it covers my content. I'll select the rectangle element and then click on this box icon at the top. Then I'll select the Send backwards option twice. I'll grab another label element, this will be a heading, so I'll make the text a little bigger.

Then I'll drag a text element right below it. A good amount of text will go here so I'll resize my text element to make it bigger. Finally, I can paste some placeholder text into my paragraph. I'll replace this with real content later. This time, I want my markup to look more like an actual web page. So I'll add some color. I'll click on my header, then the color icon then the box next to fill. This lets me change the background color of an element. I'll make my header a light green.

Then I'll change the background color of the rectangle around my image and description. Finally, I'll change the color of my footer to a dark gray and the links inside to light gray. changing the color of texts is little different. Instead of clicking the color icon, I'll click the big letter T for text. Then I'll click the colored box and select that light gray color I wanted. There it looks more like an actual web page.

HTML/CSS AdvancedCoding Exercises, Quizzes and Projects are available at online.ucode.com with your free membership
Loading...