Web Tutorial #1 | The Warning Boxes

Kotomi · 08-25-2015, 12:55 AM

Hello, today we'll be going over the basic warning boxes

So let's get started.

First off you're going to want to open up your preffered text editor, I'm using Brackets.

You'll start with a blank canvas, we in the design community love this because it means much typing Biggrin

You'll need to add

Code:
<DOCTYPE HTML>

</DOCTYPE>

To tell the browser it's an HTML file, not just a text document.

Once you're done that I prefer to give our Pandora a head.

In her head we'll implant the knowledge of our CSS file.

To do so we'll type.

Code:
<head>
    <link rel="stylesheet" type="text/css" href="index.css" media="screen" />
    <title>Azzurra Web Design | Just ~ Elegance</title>
    </head>

We've also given her a very nice title Smile

She's looking a bit bland though, so let's give her a NICE body!

We'll also want to add a couple <div> or divider tags, Using Div tags is the best way to keep everything nice and clean!

Let's see.

Code:
<body>
<div class="warning">
    <span class="text">Warning</span>
        </div>
    <div class="success">
        <span class="text">Success</span>
    </div>
    
    </body>

Now we should always give her some feet.

[Image: e64d733e12d4f88d50e71a7f566e5474.png]

OK, now if you've done all of this and only see "warning" and "Success" printed onto your screen, don't panic! We haven't given Pandora any makeup Sad

Let's give her some nice body gel ^,^

[Image: c6c1aaf5a01d8c15fc9fb5854831e689.png]

You can use any color you want.

Now we need to give her some nice looking divs. and a good size font!

[Image: 0fdcc5308c153a2e3c65cc61b78d2518.png]

[Image: 2d4ccce8ebf5aa1186cdb68ac704d633.png]

We use "em" because it will automatically pick the best size based on the device/screen resolution viewing, meaning that it won't make the div annoyingly big on an iPhone Biggrin

The colors are yours too.

Now, let's give her a foot massage!

[Image: 27556a86e5ae4c481c6cc3fceebef23e.png]

Bottom:0; mixed with position: fixed; will lock her feet to the ground!

The colors and shadow are your choice Smile

Stay tuned, next time we'll be going over how to make them disappear when you click on them ;D

Post your results, use your own colors ^,^

I had to use some code tags because of the image limit.
I prefer to not make it easy to copy/paste Biggrin

Kevin_SF · 08-25-2015, 01:56 PM

Should add an image showing what the finished product looks like. Nice tutorial nonetheless.