
Like many developers, I started out in a non-related field. Sure, some developers get on the fast track—hacking and coding in high school, then going to technical or four-year colleges for degrees in computer science or web development. Me? I took a roundabout way and started with a bachelor’s degree in English.
During one particularly stressful semester, I was slogging through some classic German literature, and nothing was clicking. The paper deadline was tight, I was overwhelmed and I got desperate. In a moment of weakness, I did the unthinkable: I reached for the CliffsNotes. *Gasp!*
I know. Not my proudest moment. But, we’ve all been there, right? *Ahem*…RIGHT? (Okay, just lie and say you have. It’ll make me feel better.)
If you’re a marketer and have ever worked with emails, forms or landing pages, you’ve probably had some exposure to HTML, CSS, maybe even JavaScript. And in that time, you’ve most likely had moments of desperation—where something’s not working and you don’t know how to fix it. At some point, you’ve probably felt overwhelmed, confused or helpless.
Don’t sweat it! At Relationship One, I work with the industry’s smartest marketers, and have learned about some of their common coding needs and pain points. This is the first in a series of blogs that will walk through some coding basics to give you a better understanding of the languages you use on a regular basis.
But, before we open the floodgates, we need a foundational understanding of each language. Now, there’s a lot of ground to cover here, but you’re busy. You don’t have time for a lengthy, deep-dive approach. This is the “CliffsNotes” version, baby! And you don’t have to feel bad about it.
HTML: HyperText Markup Language
HTML is composed of a series of markup tags, and each tag describes a different type of content. For instance, there are tags for paragraphs, headers, tables, images, links, etc. To use an analogy, building an email or landing page is sort of like building a house. Now, I don’t know much about building houses, but I do know that it’s important to start with a good foundation. The same goes for your email or landing page. Think of HTML as your house structure: the foundation, studs, beams, joists, etc. Your house can’t stand without these elements, and they are essential to a solid structure. HTML is a set of building blocks that defines what elements are going to be in your email or landing page.
CSS: Cascading Style Sheets
Our house is framed up with a foundation, walls and a roof. It’s structurally sound, but it’s not much to look at. Enter CSS. We use CSS to customize our layout and add style to our elements. In our house analogy, CSS would be the paint color, type of siding, carpet type/color, and flooring — things that create the look and feel of your house. For emails and landing pages, you can use CSS to change the page layout, add colors, format text, create responsiveness (for tablet/mobile), add animation, and more.
JavaScript
Our house is looking good! There’s paint on the walls, carpeted floors, trim around the windows, etc. But how should our house function? How are we going to interact with our house? This is where JavaScript comes in. JavaScript is a client-side (read by an individual’s browser) scripting language that adds functionality and interactivity to your landing page. (Note: JavaScript is not used in email because email clients can’t interpret it.) Some people confuse JavaScript with Java. They are not the same thing. Java is a completely separate server-side programming language. We won’t be covering it in this series. If we continue with our analogy, JavaScript would be the plumbing, electrical, and gas. These are the things that make your static house into a fully functioning home. On a landing page, you can use JavaScript for hundreds of things, including submitting and validating forms, hiding elements, and creating animation.
jQuery
While we’re on the subject of JavaScript, let’s take a quick detour and cover another common term you’ve probably heard: jQuery. jQuery is what’s called a JavaScript library. JavaScript is a robust language with lots of functionality, but it’s not always the most efficient. Libraries take pieces of JavaScript functionality and condense them into easy, usable chunks of code that help streamline your code and work faster. Neat, right? jQuery is a very popular JavaScript library that helps developers write less and do more. Others include MooTools, Prototype, Yui and Dojo.
Plugins
Okay, back to our house. If JavaScript is like the electrical, gas and plumbing, a plugin would be like an appliance that runs on these systems. JavaScript plugins are packaged chunks of code that you can use to do a few specific things. For example, take a dishwasher. If you have dirty dishes, you could clean them the old-fashioned way (fill a sink with hot water, add soap, wash them all by hand, rinse, dry, repeat), OR you could leverage a dishwasher to do all those things for you. Just like a dishwasher, plugins execute specific pieces of functionality so developers don’t have to reinvent the wheel every time they want to validate a form or create a drop-down effect on a navigation bar. Plugins help streamline the development process and can make your code more efficient. You can use a plugin for anything you would normally do with JavaScript, but it’s usually a faster, more efficient way of getting to the same place.
There you have it! Hopefully now, when you’re “Googling” for a code fix or working with a developer, you’ll see/hear references to these coding languages and feel more comfortable with implementing a solution.
Stay tuned for some juicy coding tips and tricks in upcoming posts. In the meantime, feel free to reach out to me in the comments below. And don’t worry; your secret’s safe with me. 😉