Code Every Blogger Should Know

When Melissa and I started this blog we had a really steep learning curve. And thankfully, so many bloggers had experienced the same thing and had written of their trial and tribulations which we read to learn from and fix our own problems with the way things were looking on our blog. So today I’m going to share with you a few simple code tips and tricks that Melissa and I live and breathe by.

The Basics
Think of your basic code rules as patterns and puzzles. I find this helps Melissa to better understand and identify what’s going in a section of code. From this point forward if Im referring to code in a paragraph, I’ll indicate example code with quotations. Understand you won’t actually include or see these quotations in your code on the text tab, this is really more so you can better identify what are just words I’m typing and what is actually an example of the code you’ll see or work with!

For every thing you want to do, their will be a beginning indicator and a closing indicator. This of these as flags that tell you how your text and objects are broken into independent parts. If you’re ever having a problem with spacing the first thing I do is check to see where my opening “<p>” and closing “</p>” are located in relation to my text and objects. If you want a section to be realigned, changed or spaced differently, change where the opening and closing book ends are or add new book ends to the section you want to change.

<p>your text/object here</p> : starts and ends a new paragraph

<b>your text/object here</b> : makes bold

< a href= “http://www.yourblog.com” >Your Blog’s Name < /a > : make’s the text Your Blog’s Name clickable to the http web address

< img src= “yourimagefilename.jpg” alt= “words that show when you hover mouse over image” width= “104” height= “142” > : inserts an image into your web view

<div> your code here </div> : divides your content into sections of objects/text that bits of code will be applied to as a whole, think of it as the difference between making a shirt red and an entire outfit red!

<br> : inserts a line break

<ol> your ordered list here </ol> : creates an ordered list

your unordered list here

: creates an unordered list

<li> your list here </li> : creates an list, unordered or ordered

Now I know that most of these super simple bits can be done very simply by using the convenient buttons in wordpress, which I totally suggest using! Their super simple and there on your tool bar for a reason. But when something looks awry, which trust me it inevitably will, you will need to select the text tab next to your visual post editor tab to trouble shoot what is causing your text or objects to look funny or not exactly how you want them. This is when knowing what all these different bits of code and patterns will be so incredibly helpful and neccessary! If you ever have any problems or questions about setting up your blog or code issues, feel free to email me or comment here and I’ll try my best to help you because I love solving problems and working with code!

Super helpful resources to bookmark:
W3Schools – html basic code reference

Simple HTML cheat sheet – comprehensive simple html code resource

“Deleted code is debugged code. “