Ella's big book of coding

Freefall, I made it !!

Ok, you can go here for making a simple badge: Making a friend badge

Now we're going to get a little more detailed, studying things like: borders, fonts, how the code *works* and different shapes and sizes of badges, so lets get started!

yeah this isn't sorted at all, so it might be confusing, so sorry!

**still being edited!**

## <br><nowiki><div></div> What do they do??

So the link above will teach you how to make a simple badge. But now I'm going to explain how all those little random bits that don't really make sense work.

### <br>

when you type <br> your adding a line to your text.

so for example, if you typed: "Hello! if you have this badge then you're

<br>

so-and-so's friend!"

then, basicially, it would be like pressing enter in your text.

### <nowiki>

This one is essential if you're going to be typing stuff like: "To add this badge to your profile, type {{badge name}} into the source code.

so when you type {{ you're opening a search through all badges and templates. so if you type:

To add this badge to your profile, type {{badge name}} in the source code," or something, then it the badge name you just typed will pull up the badge you are currently editing. It sounds confusing, I know, just bear with me.

when typing {{badge name}} you'll open the badge on the badge and it will create a loop! here's an example: Template:Example loop badge

you can fix this by typing: "To add to your profile, type <nowiki> {{badge name}} </nowiki> into the source code."

### <div></div>

these are closing and opening tags. So you notice at the beginning of the codes above, below, and all around this page, it says "<div style=" (Notice the "<div")

## Working with images

This took me a while to learn, but don't worry! It'll be much easier for you, because it's very hard to be stupider than me (actually only one person has achieved this, but we won't say who ;>)

### fixing the size

so, first of all, there's the code for making an image badge you would've learned if you'd clicked on the link at the top of the page. I know you're probably too lazy to go back and click it (hey, no judgment I feel you!) so here it is again, if you need that: Making a friend badge

what if you're image is too small? its.the. wrong. size! \*insert complete panic here\*

two words:

CALM

DOWN.

when you insert your image, it'll say: [[File:image name|thumb]] or something like that. let's assume the size of your badge is 400px (we'll get to what px is in a second) then you want to delete "thumb" and in it's place write "400px" this will size up your image. Obviously, it won't always be exactly the right size, if this world-ending disaster occures, erase "400px" and type "450px". Ta-da! You just stopped a zombie apocolypse, it's that easy. ;>

### You might want to remember this

If your image is not the same shape as your badge, then you have two choices:

1. Find a new image to replace it.
2. Size up the image, this will cut off some of the image, but if you're fine with cropping it, then that works.
3. Change the shape of your badge. If you don't know how to do this, then just keep reading, we'll explore that more in a second.

## What is px?

'px' stands for pixels!

when you're first learning coding, your badge will commonly have text that isn't center-alinged, or the badge image will be too small, etc. 'px' can help with this! px changes your size. As it says above, the px can change the size of your image. For example; in code there commonly something that says "width:200px" and/or "height:200px" (the 200 is just an example it could be pretty much any number). If you edited it to say "width:300px" then it would widen your badge, and your badge is now a rectangle! Or you could edit the "height:200px" to say "height:300px". Now your shape would be a square again, just 100 pixels bigger.

But that's not where it ends. you can also use it to move your text box, or shape or pretty much anything. for example; there are commonly parts in code that say "left:200px" or "top:200px". You can edit the "left:200px" and change it to "left:300px". This will make your textbox move to the right. or you could edit the "top:200px" and make it "top:300px". the textbox is going to move down.

## Making a circle badge

for an image background:

<div style="position:relative;top:0px;width:220px;height:220px;border:5px double white;overflow:hidden;border-radius:100%;">your image here<div style="position:absolute;top:-5px;text-align:center;font-family:cherry cream soda;color:white;font-size:12px;text-shadow:0px 0px 5px white;padding:40px;">text here!
<small><small><small>[[User:YOUR USERNAME HERE|coding credits]]</small></small></small>
<nowiki></div></div>

## Coutdown

bolded words are the parts you can edit:

<code><span class="countdown" style="position:absolute; font-size:
**28**px;color:**white** ; text-shadow: **#ffffff** **4px 4px 4**px; "><span class="countdowndate" style="opacity:1">**your date here**
**your time here**</span></span>

## Message wall greetings (aka pop-ups)

**bolded words are the parts you edit**

<div class="mw-collapsible" style="position:fixed;left:0;top:0;width:150%;height:700%;background:linear-gradient'''(#a1a1a1, #a1a1a1'''););opacity:'''95%''';z-index:1;"><div class="mw-customtoggle-Message\_Wall\_Enterance WikiaMenuButton" style="position:fixed; top:50%; left:10%; width:70%; max-height:100%;border:'''4'''px '''solid black''';padding:0%;box-shadow: '''0px 0px 0px''' white;padding:'''20px'''; padding-bottom:1.5px; font-family:'''bilbo swash caps''';font-size:35px;line-height:100%;font-weight:bold;text-align:center;">'''your text here'''</div></div>

## Fonts

1. Abril Fatface
2. Akronim
3. Almendra Display
4. Annie Use Your Telescope
5. Arial
6. Bellota
7. Berkshire Swash
8. Bigelow Rules
8. Bigelow Rules

9. Bilbo Swash Caps

10. Black Melody

11. Caveat

12. Cherry Cream Soda

13. Cherry Swash

14. Cinzel Decorative

15. Coiny

16. Comic Sans MS

17. Coming Soon

18. Cookie

19. Courgette

20. Courier

21. Dancing Script

22. Eater

23. El Messiri

24. Festive

25. Great Vibes

26. Handlee

27. Henny Penny

28. IM FELL DW Pica

29. Indie Flower

30. Josefin Sans

31. Kaushan Script

32. Lobster

33. Marck Script

34. Modak Script

35. Monserrat

36. Nothing You Could Do

37. Pacifico

38. Permanent Marker

39. Playfair Display

40. Rubik

41. Sriracha

42. Tahoma

43. The Girl Next Door

44. Times New Roman

45. Trebuchet MS

46. Yeseva

(yes I'm coding it so you can see what they look like, but I have a life you know /j ((just joking I don't have a life lol))

## Borders

borders are actually pretty simple. In the link that I've now posted here twice (Making a friend badge) there is the code for two different types of badges. In the second one, you might notice the word "border" a few times. more specifically, it says: "border:5px double white." see where it says "double"? you can simply delete that and replace it with a few different words: dotted, triple, solid, dashed, ridge, groove, outset, or inset. Below is an example of what those different borders will look like:

double border
dotted border
solid border
dashed border
ridge border
groove border
outset border
inset border

## If you have questions

Ask them in the comments! I will do my best to answer your questions, and then add a section to the article on it in more depth.

## For more coding help

Making a friend badge

Color Hexs

Coding Help Wiki

JulesCodingGuide