Destruction Junket

HTML Collage Workshop

Ok! So you want to make a collage using HTML (Hyper Text Mark Up Language), that's great! Below are a few of the steps that you can take to do get started! the first few step are just set up and then we'll get into it.

SET UP SECTION

Step One

Now first things first, HTML is essentially a written language that once encoded is the front facing text and imagery on your browser, the thing that makes it exciting is that its interactive and can be shared quickly and easily across the globe. It is not very intimidating to use, but to make our lives easier let's go ahead and download a code editor that will be able to give us auto suggestions and help us format it correctly. I recommend Visual Studios Code.

Step Two

Go ahead and create an empty folder on your desktop, you can name this Folder Poopy Doody Folder, or whatever you want.

Step Three

Open Visual Studios code, and click File > Open and now navigate into the folder you just created.

Step Four

Your folder should be totally empty, we need to add a new file into it, so left click on your file and press "Add New File". Name this file "index.html"

Step Five

On the left side of your screen there should be a toggle menu that looks like this:
Click the bottom icon (with the squares), and then type in HTML boilerplate. Install that and then were almost ready to go.

Step Six

Click on your "index.html" page, it should be empty. Start typing in HTML boilerplate and then when it pops up in a box above like this:



Select it. You should see your page pop up with a lot of new Stuff! Go ahead and delet all of that green stuff. Ew Nasty.

COLLAGE SECTION

Texty

Go ahead and paste this in between the space of the two "body" tags on your page: 
                
                <h1>Pee Pee</h1>
                
                <h2>wee wee</h2>
                
                <h3>Poo Poo</h3>
                
                <h4> Cum </h4>
                
                <p> yummy yummy </p>
                
                <div> 
                    Lorem ipsum dolor sit amet 
                    consectetur adipisicing elit. Minus, 
                    rem rerum eos explicabo distinctio 
                    reiciendis mollitia laudantium cupiditate 
                    architecto consequatur reprehenderit 
                    veniam nostrum dolorem soluta beatae, 
                    voluptatibus harum, sunt deserunt.
                </div>


Isn't that neat? but its not that neat, I know. Lets see if we can go ahead and make this a bit more interesting. Go ahead and replace that text with this: 

                
                <h1 style=
                "color:yellow; 
                font-size: 400px;"
                >Pee Pee</h1>
                
                <h2 style=
                "background: linear-gradient(yellow, blue);
                color:yellowgreen;
                font-size: 200px;
                ">wee wee</h2>
                
                <h3 style=
                "background-color: brown; 
                color: blue; 
                font-size: 200px;"
                >Poo Poo</h3>
                
                <h4 style="color: bisque;"> Cum </h4>
                
                <p><b> yummy yummy</b> </p>
                
                <div style=
                "background-color: 
                yellow; color:red"> 
                    Lorem ipsum dolor sit amet 
                    consectetur adipisicing elit. Minus, 
                    rem rerum eos explicabo distinctio 
                    reiciendis mollitia laudantium cupiditate 
                    architecto consequatur reprehenderit 
                    veniam nostrum dolorem soluta beatae, 
                    voluptatibus harum, sunt deserunt.
                </div>

In visual studios code that code should look like this:



If you click any of the colors they should take you to an RGB picker where you can change the color. Finally go ahead and add this one: 

                
                <div style="
                    position: absolute; 
                    top: 300px; 
                    left: 300px; 
                    background-color: blue; 
                    z-index: 4; 
                    width: 500px; 
                    height: 500px; 
                    opacity: 0.6; 
                    border-radius: 10px;">
                </div>