May 1, 2015

Lesson 01: HTML, CSS & JavaScript

Over my 6+ years in this field and countless digital marketing projects successfully delivered, I’ve noticed that clients (and often times their agency counterparts) lose interest in digital marketing projects during the development phase.

Strategy? Engaged! And why wouldn’t you be? Big plans.. very exciting! User experience and design? Super engaged! Can’t describe what it feels like to see a visual promise of how your campaign, website, app, etc. will be brought to life.. spectacular! But what about development?

In the same way any language is created, the foundations seem complicated, but are they really? Surely, languages are designed with user-friendliness at heart.. they’d have to be.. after all, logic dictates that the end goal would be widespread acceptance and adoption.

I believe the disinterest is largely due to a basic lack of education in this area. This and all subsequent posts in this category are intended to offer solace guided by one principle…

What is HTML?

HTML means HyperText Markup Language, and HTML5 is the latest version. That’s all well and nice but what is it, really? Simply put, HTML is the language of the web.

This markup language provides a way for developers to tell your computer what resources are needed and hierarchically where they belong to on your screen when you visit any website. HTML contains a number of different tags (read: labels) that allow whoever creates the page to indicate whether something displayed is a title, body paragraph, link, image, video and so on.

What is CSS?

HTML on its own isn’t enough to make a webpage look beautiful. Enter CSS! That’s Cascading Style Sheets to you.

Cascading Style Sheets (CSS) allow designers to determine how different elements (read: titles, body copy, links, etc.) within any page are displayed on your screen, without affecting the elements themselves.

CSS allows things like the colour of text, the background, size, shape and position of all the different parts of a page to be set, irrespective of changes to the content of a page.

For a real life example of CSS, check this out: http://www.w3schools.com/css/demo_default.htm

The significance behind CSS lies in its ability to separate a document’s content from its presentation. It takes two to tango – HTML tells your screen what to display, while CSS tells your screen how to display it.

JavaScript

This is probably the most fun one of them all – JavaScript allows developers to create interactions on a webpage. In other words, it allows you boss the internet around and tell it to show you only what you want to see, when you want to see it.

In the past JavaScript was used to provide those annoying alert boxes that popped up when you forgot to enter your telephone number in the right box on a form online. Today however, the possibilities are endless. JavaScript can be used to create special visual effects (read: animations) on a page or to load new content without having to reload the whole page.

Admittedly, this is a relatively tough one to understand, unless you’ve seen it in real life. So why don’t we take a look?

Follow these steps before reading the final paragraph.

  1. Go to www.jumeirah.com
  2. Under ‘Book with Jumeirah’, click on ‘All Hotels’ i.e. the second drop-down menu
  3. Click ‘All Hotels’ again to collapse the drop-down menu
  4. Under ‘Book with Jumeirah’, select a ‘Destination’ from the first drop-down menu
  5. Now, click ‘All Hotels’ and view the available options
  6. Change your ‘Destination’ from the first drop-down menu
  7. Click on ‘All Hotels’ again and view the new set of available option

Is it all starting to make sense? That first drop-down menu allows you to tell www.jumeirah.com to show you only options in the country that you’re going to visit, instead of all of the available Jumeirah hotels around the world. Notice how this information is presented to you almost immediately, without having to reload the entire page?

Easy-peasy!