[Kotomi]

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

This is the final product. 

Spoiler:

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

Spoiler:

You'll need to add
<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. 

<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

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. 

Spoiler:

Now we should always give her some feet. 

Spoiler:

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

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



You can use any color you want. 

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




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

The colors are yours too. 


Now, let's give her a foot massage!



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

The colors and shadow are your choice

---

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

[Man]

I suggest you put the code in code tags but other than that, shit nice tutorial.

[Kotomi]

I suggest you put the code in code tags but other than that, shit nice tutorial.

The fuck, I ain't makin no skids.

[Oxyrus]

I would change the font used, the colour for both, box and text and it's size. Other than that, good tutorial.

[Kotomi]

I would change the font used, the colour for both, box and text and it's size. Other than that, good tutorial.

I'd usually use a more modern font and the colors I don't usually think about until I have a general feel for where a project is going. 

But the point of this tutorial is for new people interested in web design to start to get a general feel for the field

[Oxyrus]

I would use something like http://codepen.io/anon/pen/NqQaOy but with a jQuery fade out effect.