Phoenix Project #2 - Waving Hand Emoji Planet Emoji
Today, we're going to create a standard "Hello World" site.
I wanted to focus a bit on the body section of a website. Since this is where you'll be doing the majority of your work, it's really important for you to be familiar with it and see some tangible results.
Okay, let's begin by opening up your text editor, and open up your basic HTML skeleton from the last lesson. So what you should have to start off with is something like this...
<html> <head> </head> <body> </body> </html>
Alrighty, we are going to do all of our work today in the body section. Let's start off by giving our page a heading statement, this is done through using a heading element;
<body> <h1>Welcome to Singed Phoenix</h1> </body>
Next, we will insert some common text by utilizing a paragraph element. We'll post that below heading statement;
<body> <h1>Welcome to Singed Phoenix</h1> <p>This is my ode to 1990's websites!!!</p> </body>
Yeah, this is coming together nicely...let's take a pause, save your work, and preview your site. (By now, you should have read the documentation to your preferred text editor and now how to preview what you're working on...if you didn't just find your HTML document and drag it over your internet browser window, that should open it up.)
But let's be honest here, this looks boring. It lacks that pop. Let's put some style into what we got here, and we can do that using CSS.
Since we have a simple site here, I think we can get away with using inline CSS for these two lines of code. What we are going to do is make the heading have a background of dark green, while we have the normal text the same dark green color. The code for this is;
<body> <h1 style="background-color: darkgreen; color: white;">Welcome to Singed Phoenix</h1> <p style="color: darkgreen;">This is my ode to 1990's websites!!!</p> </body>
This code should yield this result;
Alrighty, I think this is a good spot to stop and take a breather. You're doing good, you're learning a lot, and you're getting the basics of web design.
uh-oh's and wtf's
If you run into any problems here it is going to be with the styling section of the project. Forgetting a semi-colon or a quotation mark is your usual suspect here.
Just take your time, get in the habit of proofreading your code, and have confidence in yourself.
<html> <head> </head> <body> <h1 style="background-color: darkgreen; color: white;">Welcome to Singed Phoenix</h1> <p style="color: darkgreen;">This is my ode to 1990's websites!!!</p> </body> </html>