How Marketers Can Work With Code

@petecampbell
pete@kaizensearch.co.uk
How To Work With
Code In Digital
Marketing

@petecampbell
60% OF DESIRED SKILLS ON LINKEDIN ARE CODING

@petecampbell
SOFTWARE DEVELOPMENT IS THE
FASTEST GROWING UK INDUSTRY

@petecampbell
AND DIGITAL CAREERS ARE SEEING DOUBLE
THE GROWTH OF OTHER INDUSTRIES

@petecampbell
AND THOSE WHO CODE CAN ENJOY AN
AVERAGE SALARY OF £50,000 IN LONDON

@petecampbell
WHY EVERYONE IN DIGITAL SHOULD LEARN TO CODE
GAIN SKILLS THAT MAKE YOU AWESOME
LEARN HOW TO SOLVE COMPLEX PROBLEMS
IMPROVES YOUR CAREER PROSPECTS
UNDERSTAND HOW WEBSITES WORK

@petecampbell
What Most School’s Don’t Teach
https://www.youtube.com/watch?v=nKIu9yen5nc

@petecampbell
IF YOU WORK IN THE FOLLOWING JOBS
JOURNALISM & PUBLISHING
IT & ECOMMERCE
MARKETING & COMMUNICATIONS

@petecampbell
AT SOME POINT YOU’LL BE ASKED TO..
SETUP OR USE TRACKING SOFTWARE
REQUEST AN EDIT TO A WEBPAGE
SHARE CONTENT FROM ANOTHER WEBSITE
PUBLISH OR EDIT A BLOG POST

@petecampbell
TODAY YOU WILL LEARN THE FOLLOWING
BASIC HTML & CSS FOR STYLING BLOGS
HOW TO USE EMBED CODES IN BLOG POSTS
HOW TO VIEW & EDIT SOURCE CODE
HOW A WEBPAGE WORKS
WORKING WITH TRACKING TAGS

@petecampbell
PETE CAMPBELL
/ KAIZEN
• Founder / Managing Director
• Kaizen is an award-winning
Content Marketing & Technical SEO Agency
• 8+ Years in Agency & In-House Roles
• Built First Website at 11
• Ran several high-traffic video gaming sites
• Proud owner of a Game Boy Colour

@petecampbell
WARNING – CODE INCOMING

@petecampbell
Get in Touch:
@petecampbell
https://www.kaizensearch.co.uk/
DOWNLOAD THESE SLIDES
KAIZENSEARCH.CO.UK/CODE-WORKSHOP
Don’t Panic!

@petecampbell
HOW A WEBPAGE WORKS

@petecampbell
MOST WEBSITES TYPICALLY FEATURE THESE
3 CODING LANGUAGES
HTML 5 CSS 3 JAVASCRIPT

@petecampbell
MOST WEBSITES TYPICALLY FEATURE THESE
3 CODING LANGUAGES
STRUCTURE LAYOUT &
PRESENTATION
LOGIC & DATA

@petecampbell
HTML

@petecampbell
BASIC HTML DOCUMENT STRUCTURE
<html>
<head>
<title>Webpage Title</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is the Content</p>
</body>
</html>
All tags start with < and >
All tags end with </ and >

@petecampbell
<html>
<head>
</head>
<body>
</body>
</html>
<html> tag indicates that this
document is a webpage

@petecampbell
<html>
<head>
</head>
<body>
</body>
</html>
<head> tags are used to reference
info and link to files:
• Page Title & Description
• CSS & JavaScript
• Tracking Tags e.g. Google
Analytics

@petecampbell
<html>
<head>
</head>
<body>
</body>
</html>
<body> tags contain the content of
the webpage
<h1> is a typical content tag for
styling text as Heading

@petecampbell
<html>
<head>
</head>
<body>
</body>
</html>
<p> is a typical content tag for
styling text as a Paragraph

@petecampbell
LET’S WRITE A WEBPAGE IN JS-FIDDLE
https://jsfiddle.net/

@petecampbell
WRITE THIS CODE IN JS FIDDLE
<html>
<head>
<title>My First Webpage by [Your Name Here]</title>
</head>
<body>
<h1>What Is Your Favourite Food?</h1>
<p>My Favourite Food Is [Food Name]</p>
</body>
</html>
http://pastebin.com/9bHFzbPG

@petecampbell
NOW HIT THE RUN BUTTON
Click Me!
Just Ignore These

@petecampbell

@petecampbell
USEFUL HTML5 CHEATSHEET
http://websitesetup.org/html5-cheat-sheet/

@petecampbell
CSS

@petecampbell
BASIC CSS DOCUMENT STRUCTURE
h1 {
font-family: Arial;
font-size: 18px;
color: #000000;
}
#id {
width: 640px;
height: 320px;
background-color: #000000;
}
.class {
color: #ffffff;
text-decoration: underline;
}
All CSS declarations start with {
And they end with }

@petecampbell
h1 {
font-family: Arial;
font-size: 18px;
color: #000000;
}
#id {
width: 640px;
height: 320px;
}
.class {
color: #ffffff;
}
You can use CSS to style every
<html> element the same, like
heading 1 tags
ID elements are for unique parts of
a webpage, like for a single box
<div> on your page
CLASS elements can be used
when HTML tags repeat
themselves. Like paragraphs

@petecampbell
h1 {
font-family: Arial;
font-size: 18px;
color: #000000;
}
#id {
width: 640px;
height: 320px;
}
.class {
color: #ffffff;
}
Font name
Font size & colour
Box / <div> width,
height & color

@petecampbell
h1 {
font-family: Arial;
font-size: 28px;
color: #ffd90f;
}
LET’S GO BACK TO JS FIDDLE
Add this code in the
CSS Panel
http://pastebin.com/9bHFzbPG

@petecampbell
DOES IT LOOK FAMILIAR?

@petecampbell
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div id="id">
<p class="class">This is the Content</p>
</div>
</body>
</html>
A WEBPAGE WITH CSS DOCUMENT REFERENCES
CSS ID Tag
CSS CLASS Tag
http://pastebin.com/2ZseNnZp

@petecampbell
h1 {
font-family: Arial;
font-size: 18px;
color: #fff;
}
#id {
width: 300px;
height: 320px;
}
.class {
color: #ffffff;
}
AND THEN USE THIS CSS CODE
http://pastebin.com/bYD0zZgy

@petecampbell
AND IT’LL END UP LOOKING LIKE THIS

@petecampbell
USEFUL CSS3 CHEATSHEET
http://www.cssauthor.com/html-and-css-cheat-sheets/

@petecampbell
BRACKETS IS AN AWESOME FREE HTML
EDITOR
http://brackets.io/

@petecampbell
STYLING BLOGS

@petecampbell
LOGIN TO THIS WORDPRESS DEMO
http://bit.ly/1YtDR9P
admin
pass

@petecampbell
CLICK ADD A NEW BLOG POST AND ‘TEXT’
(1)
(2)
(3)

@petecampbell
<p>
This is a paragraph with
<strong>bold text</strong>
</p>
<p style="color: #ff0000; font-size: 24px">
This is a paragraph with
<em>italic text</em>
</p>
<p>
This is a paragraph with a
<a href="http://facebook.com/">link</a> and
stuff
</p>
LET’S WRITE THIS BLOG POST IN HTML & CSS
<strong> tag makes text
bold
<em> tag makes text
italic
<a href=“”> tag is a link to
another webpage
Let’s add
inline CSS
http://pastebin.com/0csxuDvY

@petecampbell
NOW GO AND CLICK VISUAL

@petecampbell
HOW TO USE EMBED CODES

@petecampbell
HOW TO ADD A YOUTUBE VIDEO TO A BLOG POST

@petecampbell
Click Share
Right Click > Copy
http://bit.ly/1qE2i9B

@petecampbell
GO BACK TO WORDPRESS & CLICK TEXT
Now Paste the EMBED Code Here

@petecampbell
FINALLY, CLICK PREVIEW TO SEE IT LIVE

@petecampbell
OTHER EMBED CODES

@petecampbell
HOW TO GET A TWITTER EMBED CODE
Click Here & Grab EMBED
Load up a Twitter page and
click on any Tweet

@petecampbell
HOW TO GET A FACEBOOK EMBED CODE
https://developers.facebook.com/docs/plugi
ns/embedded-posts/
Copy Status URL &
Paste it Here

@petecampbell
HOW TO VIEW A WEBPAGES SOURCE CODE

@petecampbell
OPEN UP ANY BLOG YOU REGULARLY VISIT
Right Click on Heading
and Click
‘View Page Source’

@petecampbell
DOES THE CODE LOOK FAMILIAR?

@petecampbell
NOW LET’S EDIT THE CODE. GO BACK
Right Click on Heading
and Click
‘Inspect’

@petecampbell
FIND THE HEADING TEXT
Right Click. Then Press
‘Edit Text’

@petecampbell
WRITE ANYTHING YOU LIKE! *
*Only Changes on
Your Local Device

@petecampbell

@petecampbell
TYPICAL TRACKING CODES YOU MIGHT ENCOUNTER
‘RETARGETING’ PIXELS FROM FB & TWITTER
A/B TESTING / CRO TOOL PIXELS
GOOGLE ANALYTICS OR TAG MANAGER

@petecampbell
INSTALLING GOOGLE ANALYTICS TRACKING
Right Click & Copy
Home > Admin > Property > Tracking Info

@petecampbell
<html>
<head>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r
;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new
Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.pa
rentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-
analytics.com/analytics.js','ga');
ga('create', 'UA-52715485-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
</body>
</html>
ADD THE CODE TO THE <HEAD> TAG
Paste & You’re Done!

@petecampbell
FURTHER LEARNING

@petecampbell
TRY OUT CODEACADEMY – IT’S COMPLETELY FREE!
https://www.codecademy.com/

@petecampbell
W3 SCHOOLS IS ALSO FULL OF USEFUL TUTORIALS
http://www.w3schools.com/

@petecampbell
GENERAL ASSEMBLY OFFERS PAID COURSES IN
LONDON
https://generalassemb.ly/

@petecampbell
TODAY YOU’VE BEEN SHOWN
BASIC HTML & CSS FOR STYLING BLOGS
HOW TO USE EMBED CODES IN BLOG POSTS
HOW TO VIEW & EDIT SOURCE CODE
HOW A WEBPAGE WORKS

@petecampbell
Get in Touch:
@petecampbell
https://www.kaizensearch.co.uk/
DOWNLOAD THESE SLIDES
KAIZENSEARCH.CO.UK/CODE-WORKSHOP
Thank You!

How Marketers Can Work With Code

More Related Content

What's hot (20)

Similar to How Marketers Can Work With Code (20)

More from Kaizen (17)

Recently uploaded (20)

How Marketers Can Work With Code

Editor's Notes