Working in a digital role and not feeling confident with code? Then this beginners guide is perfect for you.
We take a look at the most popular use cases and occasions where you are likely to face or interact with code, and teach you basics in HTML, CSS & Javascript knowledge that will enable you to complete those tasks.
You will learn the followings:
-HTML & CSS Basics for Editing & Styling Content
- Understanding & Working with a Web-Pages Source Code (Using Inspect Element)
- How to Use EMBED Codes to Display Content from Social Media Platforms & Third-Party Sites (YouTube Videos, Tweets)
- Understanding & Working with 'Tracking Tags' (Google Analytics, Retargeting Pixels via Facebook, Twitter)
- Useful Resources for Ongoing Learning
10. @petecampbell
pete@kaizensearch.co.uk
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
12. @petecampbell
pete@kaizensearch.co.uk
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
19. @petecampbell
pete@kaizensearch.co.uk
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 >
20. @petecampbell
pete@kaizensearch.co.uk
BASIC HTML DOCUMENT STRUCTURE
<html>
<head>
<title>Webpage Title</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is the Content</p>
</body>
</html>
<html> tag indicates that this
document is a webpage
21. @petecampbell
pete@kaizensearch.co.uk
BASIC HTML DOCUMENT STRUCTURE
<html>
<head>
<title>Webpage Title</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is the Content</p>
</body>
</html>
<head> tags are used to reference
info and link to files:
• Page Title & Description
• CSS & JavaScript
• Tracking Tags e.g. Google
Analytics
22. @petecampbell
pete@kaizensearch.co.uk
BASIC HTML DOCUMENT STRUCTURE
<html>
<head>
<title>Webpage Title</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is the Content</p>
</body>
</html>
<body> tags contain the content of
the webpage
<h1> is a typical content tag for
styling text as Heading
23. @petecampbell
pete@kaizensearch.co.uk
BASIC HTML DOCUMENT STRUCTURE
<html>
<head>
<title>Webpage Title</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is the Content</p>
</body>
</html>
<p> is a typical content tag for
styling text as a Paragraph
25. @petecampbell
pete@kaizensearch.co.uk
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
30. @petecampbell
pete@kaizensearch.co.uk
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 }
31. @petecampbell
pete@kaizensearch.co.uk
h1 {
font-family: Arial;
font-size: 18px;
color: #000000;
}
#id {
width: 640px;
height: 320px;
background-color: #000000;
}
.class {
color: #ffffff;
text-decoration: underline;
}
BASIC CSS DOCUMENT STRUCTURE
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
44. @petecampbell
pete@kaizensearch.co.uk
<h2>Hello World!</h2>
<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