This is part one of four in the $10k Technical Skills for Digital Marketing series. Being able to code JavaScript, HTML and CSS are the technical skills that enable you to design the presentation and experience of your marketing messaging. JavaScript will also take you much further. These skills will really increase your market value if you are interested in conversion rate optimization, web analytics, email marketing, PPC or SEO. See how these skills are useful and how to learn them.
Learn JavaScript. Love JavaScript.
JavaScript was the first technical skill and first programming language I really learned and it turned out to be one of the greatest gifts I have ever given myself. JavaScript is arguably the most frequently used, extensible and most valuable tool for digital marketing. It broadens my capabilities, it increases the speed of my work and it adds value to the work I do. How many skills can you offer to an employer (or yourself) that can make that claim?
Let me substantiate the three claims I just made:
JavaScript Adds Value
JavaScript adds value in the form of more and better data. JavaScript is what enables on-page Web analytics data collection. Anything beyond standard pageview tracking such as Google Analytics custom events, dimensions, metrics or product data demands custom JavaScript code.
In digital marketing, better data enables better performance. With a basic understanding of how JavaScript works, you can communicate clearly with developers how you want to collect the data that you need to improve marketing decisions. With JavaScript coding capabilities you can employ Google Tag Manager and handle the custom tracking instrumentation yourself.
JavaScript Broadens Capabilities
JavaScript is used everywhere! Web Analytics data collection was the original reason for marketers to learn JavaScript but now, thanks in large part to Google, JavaScript can be used to automate tasks from email marketing reporting with Google Spreadsheet to PPC bidding and account maintenance with Google Adwords Scripts.
Finally, the application of JavaScript that has the most potential is UX testing and optimization. JavaScript is what testing platforms like Optimizely use to transform a page into different variations of an A/B test. Along with web analytics tracking, this capability offers enormous value and will certainly continue to do so into the future.
JavaScript Increases Speed Through Automation
JavaScript can be used to program repetitive tasks. Automation makes you fast and enables you to work a larger scale. From simple tasks like finding information on a page using a bookmarklet or Chrome Extension to larger jobs like crawling sites and automating task with PhantomJS.
Better, faster, stronger. See why I love it? In addition to the practical benefits, learning and practicing JavaScript is really fun and will introduce a very cool and progressive community. The last bonus about learning JS is that since Node and MongoDB taken hold, it looks like JS is going to be sticking around for a while.
Read and Write HTML and “Get” CSS
HTML is an easy one. Seriously.
HTML literacy is probably the skill that translates to quantifiable value in the shortest amount of time. HTML takes little time to learn, is relatively easy to become proficient with and there are many opportunities to use the skill. It is everywhere! Take, for instance, an organization where there is little existing HTML literacy, you can step in, change and remove ancient images on website’s rotating marquee and Boom!, digital facelift and decreased page load time! Your boss, your site’s visitors, and Google will thank you.
Even if you just become comfortable enough with HTML to be able to visually parse the source code of a webpage, you will have the ability to identify issues and understand their causes. This skill is especially valuable for Search Engine Optimization.
Technical On-Page SEO
Future-facing SEO, along with common meta-tags, integrates structured data such as Schema.org and JSON-LD requires specific syntax to have their intended affect. Page markup can also affect search engine crawlability, page load times, and cross browser compatibility. In this way, valid HTML affects search engine performance and user experience.
HTML literacy also demonstrates its value when implementing analytics or remarketing tags. The code markup and location of the code on the page must be accurate to properly send data to analytics platforms. Being able to debug implementations and communicate with development partners and not fully rely upon them for minor technical support drastically improves the fluidity of technical marketing initiatives and spares you from worrying how or if things will get done.
Email Marketing
Another quick and measurable impact comes in the form of email marketing. You probably already know this but in case you don’t, emails are coded with HTML. You probably also know that email marketing is often one of the most effective digital marketing channels. The ability to test and optimize the look and feel of marketing emails can have a great impact on the effectiveness of the channel and truthfully of the brand’s identity. From simply swapping out images to writing inline CSS and using email platform template tags, the ability to code HTML is vital to a strong email marketing program.
Conversion Rate Optimization
The final use case for HTML and CSS knowledge is one that offers a remarkably high potential value and that is on-page testing and optimization. Conversion optimization tools like Optimizely and Google Content Experiments allow you to add, remove modify the HTML and CSS (styling, location, spacing) or elements on a page to create different experiment variations of the page. Some of the earliest and biggest wins that come from conversion rate optimization experiments are relatively simple CSS changes so having operational knowledge of CSS can translate to significant value rather quickly.
HTML and CSS knowledge can also translate to a sustainable value beyond the operational, nuts and bolts, knowledge. As your conversion rate optimization testing plan develops and experiment possibilities become less immediate, having the knowledge of presently untapped methods of displaying a page or newer HTML technologies will open up new testing possibilities. As long as browsers and HTML standards continue to change (this will always) prove its value.
Learning JavaScript
Learn By Doing
CodeAcademy.com is a great place to start. It offers a great introduction to the basics of the JavaScript language; syntax, data structures, expressions, etc. It also offers an intro a course on jQuery. The jQuery course is offered before JavaScript which seems strange to me as jQuery is built on top of JavaScript. I would strong suggest taking both courses if you want to learn jQuery.
Learning From The Work of Others
Learning JavaScript, HTML, and CSS is unique in that all the code that makes up a web page is accessible to you. You just have to know how to find it. Chrome Developer Tools (don’t be intimidated) offers a ton of useful ways to inspect and learn what is happening on any web page on the Internet. You can inspect and live-edit pages, see what files are coming into the browser across the network and write JavaScript in the context of any web page with the JavaScript Console. This is a very valuable tool and learning it will also teach you a lot about how browsers, the DOM and web pages work.
Automate Something
Google Apps Script offers an easy interface to try your new skills and accomplish some pretty useful things. It is nice because it abstracts away a lot of complicated things and offers a very simple API to Google Spreadsheets, Google Drive and Google Docs. There is also a lot of good documentation for getting started. If you manage PPC, try Google Adwords Scripts. FreeAdwordsScripts.com offers a lot of good code examples and cool ideas to show how to work with the Adwords Script API.
Books to Read
DOM Enlightenment (Free Online): All you could ever want to learn about interacting with the Document Object Model and more. This is a great one to accompany your exploration of Chrome Developer Tools and the JavaScript console.
Object-Oriented JavaScript: Knowing JavaScript prototypal inheritance is one of the big differences between knowing JS and knowing JS. This is a pretty sweet deep dive into the subject.
Secrets of a JavaScript Ninja: This was written by John Resig who created jQuery. Needless to say, there are a ton of clever patterns to take your JS capabilities to the next level.
Google Apps Script: If you are more interested in the Google Apps Script and simpler forms of automation, this book is great. It will introduce you to a lot of server-side concepts. This stuff is great but just be weary, getting too deep into Google Apps Script may prevent you from learning the really powerful server-side programming languages.
Videos to Watch
Videos can be pretty inspiring. YouTube searches for whatever you are learning can be very helpful but a couple videos that I recommend are:
- JavaScript the Good Parts Series by Douglas Crockford (Must Watch)
- 10 Things I learned from the jQuery Source by Paul Irish (and anything else from Paul Irish)
Learning HTML and CSS
Learn By Doing
codecademy.com again. You have to get repetition with the basics and this is a great intro. Get through it and then read a book and start really practicing.
Guru99 has a ton of free resources.
Learn by Editing
- Get to know and love your code editor! Download the code editor of your choice. Atom is free and pretty good.
- Write some basic web pages and learn how to use scripts and link style sheets to your web page. Reference w3schools.com and look at the source code of existing pages for reference. GitHub.com has some nice clean source code. (You will also want to get to know GitHub anyway)
- Learn some tools. HTML5 Boilerplate is a great place to start with solid web standards and learning Twitter Bootstrap CSS framework will almost certainly come in handy.
Books to Read
HTML5 for Web Designers is great if you want a good basic intro. It will tell you what you need to know but no necessarily how to do it. This book is a must if you are going to be using Optimizely for testing. http://www.abookapart.com/products/html5-for-web-designers
HTML5 & CSS: Learn to Design and Build Websites is an intro to the medium and teaches how to use it at the same time. This is a great book to read in conjunction with step 2 above.
Now go make something awesome! Or rather learn how to make something awesome and keep practicing until you do. These front-end skills will take you a long way and make you very valuable. Check out the rest of the series to learn more about the Back End and Applications, API’s and Web Scraping and Technical Resources and How to Use Them.
Read the rest of the $10k Technical Skills for Digital Marketing or…
Get notified when each posts is released!
[mc4wp_form id=”752″]