DIGITAL MARKETING ADVANCED
1. INTRODUCTION & COURSE OVERVIEW
Course Structure
- Grading System (70% Exam + 30% Permanent Evaluation)
- Exam Format (Multiple choice, Fill-in, Hierarchical order, Match
questions)
- Subject Matter Overview
2. WEBSITES & WEB FUNDAMENTALS
2.1 WEBSITE STRUCTURE
FRONT-END CODE
HTML (HyperText Markup Language)
- Used to create the basic structure and content of a webpage
- Defines the semantic elements and layout
- Foundation of all web pages
CSS (Cascading Style Sheets)
- Used for the design of a webpage
- Controls where everything is placed and how it looks
- Handles colors, fonts, spacing, and layout
- Determines visual hierarchy and user experience
JavaScript
- Used to define the interactive elements of a webpage
- Helps to engage users with dynamic functionality
- Enables form validation, animations, and user interactions
- Powers the interactive experience
The "Holy Trinity" - Responsive Design
Websites must be optimized for three different screen sizes:
- Desktop - Full-size monitors (1920px and up)
- Tablet - Medium-size screens (768px to 1024px)
- Smartphone - Mobile screens (320px to 767px)
RESPONSIVENESS & MOBILE OPTIMIZATION
- Websites must adapt to different screen sizes seamlessly
- Mobile-first approach is now standard in web design
- Users expect the same functionality across all devices
- Google prioritizes mobile-responsive websites in rankings
Bootstrap Framework
Bootstrap is the most used free open-source front-end framework for responsive
web design.
1
,Advantages of Bootstrap:
- Responsive Design - Built-in responsive grid system
- Cross-Browser Compatibility - Works consistently across all major browsers
- Short Development Time - Pre-built components speed up development
- Flexible - Easily customizable and extensible
- Free - Open-source, no licensing costs
- Large Community - Extensive documentation and support
Disadvantages of Bootstrap:
- Unnecessary Code Included - All Bootstrap CSS loads even if you don't use
it
- All Bootstrap Pages Look Similar - Can result in generic-looking designs if
not heavily customized
- Performance Impact - Larger file sizes can slow down initial load times
Basic Coding Exercise (jsFiddle Example)
A practical example of HTML & CSS working together:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstr
ap.min.css">
</head>
<body>
<div class="row">
<div class="col-md-4 stylingA">
<h1>Hello World!</h1>
<p>This is one block</p>
</div>
<div class="col-md-6 stylingB">
<h1>Hello World!</h1>
<p>This is another block</p>
</div>
</div>
</body>
</html>
CSS styling :
body {
color: green;
}
.stylingA {
background-color: yellow;
color: green;
2
, }
.stylingB {
background-color: blue;
color: red;
font-size: 25px;
}
2.2 WEBSITE ARCHITECTURE
INTERNAL STRUCTURE OF A TYPICAL WEBSITE
Hierarchical Organization:
The website structure should be organized logically so that Google can
understand the content and index it properly. This also helps visitors navigate
the site easily.
Homepage (Bovenaan)
- The homepage is the starting point of the website
- From here, Google can reach all other parts of the website
- The primary entry point for all users and search engines
Hoofdonderdelen (Main Categories)
Under the homepage, there are different main sections:
1. Category Pages - Product categories or main topic areas
o Each category can have subcategories (sub/silo)
o Further subdivided into specific product or content pages
o Organized hierarchically for clarity
2. Brand Pages - Brand-specific information
o Can have their own sub-structure
o Helps users find products by brand
o Supports filtering and navigation
3. Articles / Blog - Informative content
o Blog is organized separately from products
o Structure: Blog → Categories (1, 2, 3) → Posts
o Helps Google understand thematic relationships between posts
o Improves topical relevance signals
Sitemap & Robots.txt
3
, - HTML Sitemap - User-friendly list of all important pages
- XML Sitemap - Technical file for search engines, helps Google crawl
faster
- Robots.txt - Determines which parts Google can and cannot crawl
o Helps manage crawl budget efficiently
o Can prevent indexing of duplicate content
o Can block private pages or user areas
Why This Matters for SEO:
- A good website structure makes it easy for users and Google to find
everything
- Helps to rank better in search results
- Ensures authority (link value) is distributed properly across all pages
- Improves crawlability and indexation
2.3 PILLARS OF GOOD WEB DESIGN
Good web design is built on several key principles that work together to create
effective landing pages and websites.
COMPELLING VALUE PROPOSITION
Definition: A clear statement of what makes your offer valuable and unique to
the target audience.
Best Practices:
- Great landing pages do ONE job really well → Use only 1 main idea
- Always think from the user's perspective: "What's in it for them?"
- The value proposition should be immediately visible above the fold
- Focus on benefits, not features
- Make it memorable and differentiated from competitors
Example: Instead of "We sell software," say "Save 5 hours per week on
administrative work."
CLEAR & ACTIONABLE COPY
Copy is the text that appears on your landing page. It must guide the user
through a logical progression.
The Step-by-Step Breakdown (Elevator Pitch Structure):
1. State the Problem - Help users recognize their challenge
2. Present the Solution - Show how you solve it
3. Highlight the Opportunity/Value - Emphasize benefits and USPs (Unique
Selling Points)
4. Include CTA - Tell them exactly what to do next
The 3 C's of Good Copy:
- Clear - Easy to understand, no jargon or confusion
- Concise - Say it in as few words as possible
- Compelling - Make readers want to take action
4
1. INTRODUCTION & COURSE OVERVIEW
Course Structure
- Grading System (70% Exam + 30% Permanent Evaluation)
- Exam Format (Multiple choice, Fill-in, Hierarchical order, Match
questions)
- Subject Matter Overview
2. WEBSITES & WEB FUNDAMENTALS
2.1 WEBSITE STRUCTURE
FRONT-END CODE
HTML (HyperText Markup Language)
- Used to create the basic structure and content of a webpage
- Defines the semantic elements and layout
- Foundation of all web pages
CSS (Cascading Style Sheets)
- Used for the design of a webpage
- Controls where everything is placed and how it looks
- Handles colors, fonts, spacing, and layout
- Determines visual hierarchy and user experience
JavaScript
- Used to define the interactive elements of a webpage
- Helps to engage users with dynamic functionality
- Enables form validation, animations, and user interactions
- Powers the interactive experience
The "Holy Trinity" - Responsive Design
Websites must be optimized for three different screen sizes:
- Desktop - Full-size monitors (1920px and up)
- Tablet - Medium-size screens (768px to 1024px)
- Smartphone - Mobile screens (320px to 767px)
RESPONSIVENESS & MOBILE OPTIMIZATION
- Websites must adapt to different screen sizes seamlessly
- Mobile-first approach is now standard in web design
- Users expect the same functionality across all devices
- Google prioritizes mobile-responsive websites in rankings
Bootstrap Framework
Bootstrap is the most used free open-source front-end framework for responsive
web design.
1
,Advantages of Bootstrap:
- Responsive Design - Built-in responsive grid system
- Cross-Browser Compatibility - Works consistently across all major browsers
- Short Development Time - Pre-built components speed up development
- Flexible - Easily customizable and extensible
- Free - Open-source, no licensing costs
- Large Community - Extensive documentation and support
Disadvantages of Bootstrap:
- Unnecessary Code Included - All Bootstrap CSS loads even if you don't use
it
- All Bootstrap Pages Look Similar - Can result in generic-looking designs if
not heavily customized
- Performance Impact - Larger file sizes can slow down initial load times
Basic Coding Exercise (jsFiddle Example)
A practical example of HTML & CSS working together:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstr
ap.min.css">
</head>
<body>
<div class="row">
<div class="col-md-4 stylingA">
<h1>Hello World!</h1>
<p>This is one block</p>
</div>
<div class="col-md-6 stylingB">
<h1>Hello World!</h1>
<p>This is another block</p>
</div>
</div>
</body>
</html>
CSS styling :
body {
color: green;
}
.stylingA {
background-color: yellow;
color: green;
2
, }
.stylingB {
background-color: blue;
color: red;
font-size: 25px;
}
2.2 WEBSITE ARCHITECTURE
INTERNAL STRUCTURE OF A TYPICAL WEBSITE
Hierarchical Organization:
The website structure should be organized logically so that Google can
understand the content and index it properly. This also helps visitors navigate
the site easily.
Homepage (Bovenaan)
- The homepage is the starting point of the website
- From here, Google can reach all other parts of the website
- The primary entry point for all users and search engines
Hoofdonderdelen (Main Categories)
Under the homepage, there are different main sections:
1. Category Pages - Product categories or main topic areas
o Each category can have subcategories (sub/silo)
o Further subdivided into specific product or content pages
o Organized hierarchically for clarity
2. Brand Pages - Brand-specific information
o Can have their own sub-structure
o Helps users find products by brand
o Supports filtering and navigation
3. Articles / Blog - Informative content
o Blog is organized separately from products
o Structure: Blog → Categories (1, 2, 3) → Posts
o Helps Google understand thematic relationships between posts
o Improves topical relevance signals
Sitemap & Robots.txt
3
, - HTML Sitemap - User-friendly list of all important pages
- XML Sitemap - Technical file for search engines, helps Google crawl
faster
- Robots.txt - Determines which parts Google can and cannot crawl
o Helps manage crawl budget efficiently
o Can prevent indexing of duplicate content
o Can block private pages or user areas
Why This Matters for SEO:
- A good website structure makes it easy for users and Google to find
everything
- Helps to rank better in search results
- Ensures authority (link value) is distributed properly across all pages
- Improves crawlability and indexation
2.3 PILLARS OF GOOD WEB DESIGN
Good web design is built on several key principles that work together to create
effective landing pages and websites.
COMPELLING VALUE PROPOSITION
Definition: A clear statement of what makes your offer valuable and unique to
the target audience.
Best Practices:
- Great landing pages do ONE job really well → Use only 1 main idea
- Always think from the user's perspective: "What's in it for them?"
- The value proposition should be immediately visible above the fold
- Focus on benefits, not features
- Make it memorable and differentiated from competitors
Example: Instead of "We sell software," say "Save 5 hours per week on
administrative work."
CLEAR & ACTIONABLE COPY
Copy is the text that appears on your landing page. It must guide the user
through a logical progression.
The Step-by-Step Breakdown (Elevator Pitch Structure):
1. State the Problem - Help users recognize their challenge
2. Present the Solution - Show how you solve it
3. Highlight the Opportunity/Value - Emphasize benefits and USPs (Unique
Selling Points)
4. Include CTA - Tell them exactly what to do next
The 3 C's of Good Copy:
- Clear - Easy to understand, no jargon or confusion
- Concise - Say it in as few words as possible
- Compelling - Make readers want to take action
4
