Previous | Next

How to Convert an IJ Code For a Webpage

How to Convert an IJ Code For a Webpage
What up, hobags? Ready for another tutorial? No? TOO BAD. Hold onto your panties, 'cause here we go. For this tutorial you will need:

       ‣ A webpage doohickey; account, account, a paid IJ, etc. you get the idea.
       ‣ A code that you want to use. For the tutorial I'll be using this one, if you want to follow along.


Take your code and stick it in here:

Stick that in your webpage, fill it out, and you're done.


This is how I do it. YOU WANNA BE COOL LIKE ME, RIGHT KIDS? No? ...oh. Okay, well this is awkward. I'll just... show you how to do it anyway. For this option, you'll be learning the very basics of what a stylesheet is. Don't freak out; it's gonna be okay. Why do it this way? There are tons of reasons! It's cleaner, easier to edit, and much less repetitive. Also hover effects.

Take your code and stick it in here:

Stick that in your webpage. That's the easy part. Get ready to hate me. ♥ Don't worry; this is pretty easy, just kind of boring and repetitive.

STEP 1: Know the difference between an ID and a CLASS in a stylesheet. Firstly, an ID is prefixed with # and a CLASS is prefixed with .—#id and .class—got it? Good! What does it mean? An ID is only seen once in your content; a CLASS can be reused.
(example) The container that holds the whole thing is labelled as an ID because you only need it once. Section headers are labelled as a CLASS because they come up more than once.
STEP 2: Start moving styling out of the divs and into the stylesheet. IDs and classes are case-sensitive. To see an example of what you need to do, check this out. Right click and hit VIEW PAGE SOURCE.
(note) If there is styling in an IMG tag, group it with the ID or CLASS that image is inside of! For example, there are three images with the same styling in the header of the code I used as an example, so I put the styling of those images into #HEAD img so that the IMG SRC tags wouldn't need to contain anything other than the URL for the images.
STEP 3: Keep going until you're done! I'm not good at knowing what needs to be explained and what doesn't, so if you have any questions go ahead and comment with them and I'll get back at ya. I cool yet?


Aug. 8th, 2013 01:11 am (UTC)