So, I indeed learnt about HTML, CSS and Javascript as the languages responsible, respectively, for the structure or meaning of the content, as well as its style and behaviour in a web page.

If you know about these already, you may want to skip the next few paragraphs and take a look further down the post at the reasons I believe marketers should know how to code.

Learning to code

The learning method we used was to take some code already written by our capable teacher, Mike Baxter, look at how it works, then edit it for our own purposes. This trial format, with a lot of the necessary tags already presented to us, gave us the requisite confidence to throw ourselves into the task at hand.

We did our hands-on coding in Codio, a free web IDE (internet development environment), currently in beta, where one can write code, preview it, host files, folders and eventually your own website.

We also did a lot of snooping around in Google Chrome. Try ‘right clicking’ and selecting ‘inspect element’ to see what DevTools Chrome has to offer – you can learn more about these DevTools at Code School.

So, we learned slowly about how to develop web pages and web sites.

Beginning with HTML markup with attributes, see some example markup here (right clicking and selecting ‘view page source’ in Google Chrome will show you source code of a web page), we worked through different kinds of styling and behaviour:

  • Inline style is adding style to a particular element of HTML, so perhaps adding a colour to one particular instance of a word.
  • Embedded style is adding instruction in the ‘head’ tag of the web page, where one can specify wider styling, for example, one could make all listed text a certain colour.

One step higher up, CSS (cascading style sheets) can be used across more than one webpage. The style sheet is linked to from the HTML ‘head’ tag, and this CSS then specifies which content should be styled and how.

We then looked at some structural elements like boxes and menus, before moving on to Javascript. We studied some simple functions such as a button that can be clicked and replaces a portion of text, or a field for email address validation.

Finally we spread our wings slightly and discussed client-server architecture, http headers, APIs, and then some libraries such as jQuery (a Javascript library) and Bootstrap.

Bootstrap alongside HTML5 is exciting in that it is standardising the web in a way that makes it easier to code, or to adapt open-source code. Bootstrap is a front-end framework combining HTML, CSS and Javascript.

The latest incarnation of Bootstrap (3) is responsive by default and mobile-first. It serves as the style guide for Twitter development, where it was created. Check out the site for more information.

The results?

Well, with Mike’s help, taking a site he had built using the principles described above, I felt confident to go away and continue on my journey to becoming a programmer.

I’m still a long way off, you can click to see my minor amends to Mike’s efforts through the pic below. The header bar doesn’t have any real functionality at the moment, apart from some swanky stuff in the ‘gettin’ fancy’ page, but I have added imagery, text and some boxes with links to external sites.

This was achieved with only a few hours tuition and background, and then a final thirty minutes or so tinkering.

 

Why all marketers should learn to code

Analytics

If you’re going to get to grips with tracking code, you’ll need knowledge of HTML and Javascript. Check out the detail here.

This is useful at a basic level simply to analyse web pages and try to figure out what is tracked, and then at the next level up, if you’re going to implement this yourself.

Style library

As you and your brand build templates, it makes sense for these to sit in the same place as other brand guidelines. Are you making sure there’s enough knowledge across the non-tech teams of what assets will ensure consistency across sites, brands etc?

Having a library of style sheets which will allow you to switch between, for example, seasonal versions of your product pages, could be very important for conversion, and something you’ll need to bone up on if you want to command this kind of change.

Working with an agency

Do you really know what work has been done by an agency, and how long that work should have taken, and whether they did it quickly or took the long route so they could charge more?

Having a few simple questions in your arsenal is handy when you’re sitting down with a web agency who you’ve never felt sure about.

Working with your tech team

A similar story, but with a nicer twist. When you’re working with your tech team, you want to know when your requests are a headache and when they are simple requests.

This is just so you know when you can lean gently on people and when it’s best not to. Knowledge of styling, for example, will allow you to understand better how quickly changes can be made.

Competitor analysis

If you can look at that snazzy website of your competitors, and see some elements of its build, why shouldn’t you? Being able to know if a competitor has a responsive website, built mobile-first, or simply a CSS ‘snap’ between two screen sizes – this is valuable stuff. 

So, marketers, if I’ve convinced you of your need to code, get on an Econsultancy course, or straight on Codio, and get cracking.