Basic Code Every Marketer Should Know

Marketing is based in the digital work. Websites, blogs, emails, ads, design and communication all happen through computer based systems and programs. Well-developed software and programs make inputting messaging super easy. The “No-coding-needed” email management systems, website builders and blog platforms are super intuitive and make your input = your intended output most of the time.

What about that final 10% where spacing is off, a link won’t open, a font won’t come through or an image gets distorted? Good software is miles ahead of where we were at the beginning of the internet of things, but not perfect, and your clients will expect nothing less. Knowing just a scratch of fundamental html and css brings “most of the time” to perfect 100% of the time.

 

Knowing just a scratch of fundamental html and css brings your marketing to a whole new level! Click To Tweet

 

HTML

Hypertext Markup Language
Think of HTML as a skeleton. It provides the basic structure for all of that marketing stuff. HMTL will organize your text, links, buttons and images. Once you learn the basic tags for HTML, noticing patterns will be your best bet when learning syntax. What we need to know now is what each of these look like in code. Below are the commonly used HTML tags:

 

Action: Next time you are logged into an email editor, a blog post, or a web page, find the “text” editor option. It looks like this in WordPress blog post:

 

 

When changing to this editor you’ll see the <p> tags wrapping the body copy and the <h2> tags wrapping the headers. For funzies there is an nbsp; for a spacer!

 

PROTIP: Use CTRL or CMD F to find little bits of code you might need to switch!

 

CSS

Cascading Style Sheets

If you have heard of HTML, you have probably also heard CSS within that same conversation. That is because these two work in tandem. HTML tees up the ball and CSS hits the home run. CSS is the styling mechanism for all the html: fonts, colors, spacing, borders, and all of the numerous other aesthetics. CSS uses pixels as measurement, and loves, loves, loves, semi-colons to separate each line of code.  What we need to know is how to call each of these elements in the CSS language:

Action: Do you know your company’s hex colors? Find out. Knowing the couple hex codes for your company can make on-brand styling quick and easy, without asking any graphic designer.

 

 

 

 

INSPECT ELEMENT

Traditional education aside, this one tool will be your biggest source of insight and learning when it comes to syntax and makeup of html+css. While on a web page, right click and select “Inspect.” This pulls up all of the backend that goes into making the front of the page as clean and human-friendly as it is. Opening up a page in this way, and selecting an element will show exactly what makes up each element. Inspecting elements is a fast and easy way to determine colors, link, fonts, and font-sizes, and also serves as a way to access files, such as images.

 

Action: Next time you see a cool styled element on a competitor’s website, right click and hit inspect (in Chrome) to see how they made that happen! Find something you don’t understand? Use sites like this one to keep adding elements under your belt.

 

Want to Learn More?

Coding is artistic, challenging, fun and can also be pretty beautiful. Knowing just a basic level of html and css will make your marketing life easier! You’ll be able to communicate with your developers and designers in the language they understand, and you will truly understand better how things work together in the digital world.

HTML and CSS is a perfect place to start learning about code. Thankfully there are plenty of online learning programs to dip your toe or take a deep dive into the world of coding. I used Treehouse and CoderManual, and Brancher, Kyle, is using Lynda. We also have subscriptions to Sitepoint and Jeremy used books like JavaScript and CSS (a real live book!)

 

Look at that, you just learned something!