Ever wonder what it might be like to be one of those computer geniuses you see on tv all the time such as Felicity Smoak (Arrow) or Tony Stark (Iron Man) who, with the magical stroke of a few keys, manage to tear down security walls and build technological wonders beyond reason?
Yeah, me neither... *cough*...
While such levels of technological acumen might be beyond the grasp of most (if not all of us), there are still plenty of cool things you can do with just a minimal amount of code. Or you could just end up having fun/getting frustrated...
<div class="i-hold-stuff">I could explain each bit of this, but lets just stick with this. "Div"s are the buckets and containers of the HTML world and h1 is like the largest label you could find to put on it.
<h1 class="largest-h-tag"> Hello World </h1>
</div>
.i-hold-stuff h1 { color: red; font-size: 24px; }All this says is "Look for something with the class 'i-hold-stuff' and a child element h1 and give its text the color red with a font size of 24 pixels tall". "Wait wait wait... whats a 'class'??" you may be asking? Well, simply put its just a catagory, such as pizza's... mm, pizza... So many types from simple pepperoni to my meat-lovers dream. For example, in the html block above there is a 'div' element with the class 'i-hold stuff' and a child 'h1' element that has the class 'largest-h-tag'. This may seem a bit confusing at first, but don't worry, keep fiddling and it will click soon enough.
If you're currently reading this on Internet Explorer/Edge please do me a favor... (I dedicate an hour of each day crying for you poor lost souls so do me a solid) at least TRY to get familiar with something more like Google Chrome, Firefox, or even (dare I ask it) Safari.
Back to point, each browser has a different way of getting at the HTML and CSS on the page but most have the ability to right click and select "Inspect", "Inspect Element", or "Inspect Tool". This opens a window for you to see what the recipe for your yummy page looks like. It's called the "Developer Tools". Congrats, you're a developer! Well... kinda... Anyway, the button we'll be using is usually on the top left of the tools box. It looks like an icon of a box with an arrow pointing in it. By clicking this, you can now hover over the elements on your page to target them. And by clicking on one you can focus on it and it will become highlighted over in the Developer Tools. If there is a little arrow to the left of them, you can click it to open them up and see what's inside. Just like Easter Eggs, woot!
You Spin My Head
Alright, let's get down to business. Here is a taste of what you can do now. Note that this can be a little harder to follow in safari and IE.
First off, pull up that tools box I told you about and click the top left arrow-and-box icon. It should stay blue and now your next click will highlight the html in the code. Now, click the image of my FACE!
In the tools box it should now be highlighted blue or gray over an html block that has an image tag that looks like '<img src="http://www.choo..' If not, look just above or below the highlighted code, it should be close by. Now for the fun part. On the right, you should see a box that has some headers with words like "Styles", "Event Listeners" and "Properties". Make sure the "Styles" tab is selected like this.
Finally, just copy the code below into the styles by clicking next to the closing bracket '}' and paste or type it in.
transform: rotate(36000deg); /* Number of spins? 360 = once */
transition: all 30s ease-in-out; /* Spin time? 1s = 1 second */
transform-origin: center; /* Rotation origin? Left, right, top, center, etc */
Now watch me spiiiiiinnn! Ok, that might not be good for the head. To stop it you can either wait for the 30 seconds of spinning to end, or you can hover next to "transition" and uncheck the box to end it immediately. Congratulations! Now you can make your browser dance to your whims or even delete those annoying browser ads by simply targeting them (remember how?) and clicking the delete button!
You can play with these values for some fun animations and, by pasting this same code pretty much anywhere on the internet, you can make some ridiculous things happen. Go forth and CODE!