How Will Digital Marketing Change In The Future
Technological advancements and changing consumer behaviours will shape the digital marketing landscape in 2024. Artificial intelligence will revolution how businesses reach and engage with their target audience, while voice search will require businesses to adapt their SEO strategies.
How will digital marketing change in the next 5 years?
Many of the optimization and targeting processes that marketers currently perform manually will be replaced by AI in the upcoming years. New creative options for brand experiences will be made possible by VR and AR.
How is marketing going to change in the future?
virtual reality will take the lead in marketing trends. Customers will enjoy the amazing emotional experience as they shop for product brands with colorful, engaging advertising. They will come back time and time again, increasing their loyalty to a product brand, possibly even more than chatbots.
trends that we're seeing today, such as the rise of artificial intelligence (AI), virtual reality (VR), and augmented reality (AR), suggest that digital marketing will become more personalized, immersive, and interactive in the next 10 years.at will digital marketing look like in 10 years?
What is the future of digital marketing in 2030?
In conclusion, the future of digital marketing in 2030 will be shaped by the growing influence of AI and machine learning, the emergence of voice search, the growth of video marketing, the importance of personalization, and the significance of sustainability.
What is the future of digital marketing 2025?
By the year 2025, virtual reality will take the lead in marketing trends. Customers will enjoy the amazing emotional experience as they shop for product brands with colorful, engaging advertising. They will come back time and time again, increasing their loyalty to a product brand, possibly even more than chatbots
What is SEO in digital marketing?
SEO means Search Engine Optimization and is the process used to optimize a website's technical configuration, content relevance and link popularity so its pages can become easily findable, more relevant and popular towards user search queries, and as a consequence, search engines rank them better.
Will digital marketing survive?
Will digital marketing survive until 2024? Yes, digital marketing will continue to be a relevant and important part of business in 2024 and beyond. In fact, it is likely to become even more important as the world becomes increasingly digital
2 notes
·
View notes
WhatsApp Clone Using HTML and CSS
What does cloning a website means?
To make a copy
Cloning a website means copying or modifying the design or script of an existing website to create a new website. Website cloning allows a designer to create a website without writing scripts from scratch.
Any website can be cloned. You are also free to integrate some additional new features while cloning your website.
Cloning a website is one of the proven methods you can use to learn web development faster. It provides basic to advanced ideas about how websites work and work, and how to integrate them.
Let’s learn how to clone a website just using HTML5 and CSS in a simple way.
Will take an example of WhatsApp Website and will clone it.
WhatsApp is a free cross-platform messaging service. iPhone and Android smartphone, Mac and Windows PC users can call or exchange text, photo, voice and video messages with anyone in the world for free, regardless of the recipient's device. WhatsApp uses Wi-Fi connections to communicate across platforms. This differs from Apple iMessage and Messages by Google, which require a cellular network and Short Message Service (SMS).
Key WhatsApp Terminology
Cross Platform
Messaging apps
End-to-end encryption
Video & Audio Calls
WhatsApp Business
HTML (Hyper Text Markup Language) –
HTML stands for Hyper Text Markup Language that is standard markup language to create web pages and web-based applications
It represents the structure of a web page
It comprises of series of elements which tells the browser how to display the content
Basic Structure of a HTML Document –
<!DOCTYPE html>
<html>
<head>
<title>WhatsApp Clone</title>
</head>
<body>
<h1>let's learn Web Development</h1>
<p>My first project - WhatsApp Cloning</p>
</body>
</html>
Let’s Explain the above code –
- It is used to defines that the document is HTML5 document
- It is the root elements on an HTML Page
- It contains all the meta information about the HTML Page
- This element contains all the visible content of the page, such as paragraph, headlines, tables, list, etc.
- It defines the largest heading for any topic, it ranges from -
- It defines a paragraph in the HTML page
Elements –
It is the collection of start and end tag, and in between content is inserted between them.
It major components are–
Opening Tag – Used to tell the browser where the content starts.
Closing Tag – Used to tell the browser where the content material ends.
Content – Whatever written inside the opening and closing tag is content.
Some Most Commonly used tags are –
– Used to define a document or section, as it contains information related to titles and heading of related content.
– The navigation tag is used to declare navigation sections in HTML documents. Websites typically have a section dedicated to navigation links that allows users to move around the site
– Anchor tag is used for creating hyperlink on the webpage. It is used to link one web page from another.
– It is used to define a paragraph. Content written inside tag always starts from a new line.
– It is used to define heading of a web page. There are 6 different heading h1, h2, h3, h4, h5 and h6. H1 is the main heading and the biggest followed by h2, h3, h4, h5 and h6.
- It is used to group multiple elements together. It helps in applying CSS.
- Image tag is used to embed an image in a web page.
CSS (Cascading Style Sheet) –
CSS stands for Cascading Style Sheets, that describes HTML elements that appear on screen, paper, or other media.
It used for designing web pages, in order to make web pages presentable.
It is standardized across Web Browsers and is one of the core languages of the open web system/technology.
CSS Selector –
CSS Selectors are used to select or target the element that you want to style. Selectors are part of the CSS ruleset. CSS selectors select HTML elements by ID, class, type, attributes, etc.
Types of CSS Selectors –
Element Selector – It selects the HTML elements directly using name
ID Selector – It selects the id attribute of an element. ID is always unique, in the code. So, it is used to target and apply design to a specific or a unique element.
Class Selector - It selects the class attribute of an element. Unlike ID selector class selectors can be same of many elements.
Universal Selector – It selects all the elements of the webpage, and apply changes to it.
Group Selector – It is used when same style is to be applied on many elements. It helps in non-duplication of code.
Different ways of applying CSS -
CSS can be applied in different ways –
Inline CSS –
Styling is done using different attributed inside an element itself. It can be used to apply unique style for a single element.
<h1 style="color:blue;">Let's learn Web Development</h1>
Internal CSS –
It is defined or written within the <style> element, nested instead <head> section of HTML document.
It is mainly used when need to apply CSS on a particular page.
<style type="text/css">
h1 {
color:blue;
}
</style>
External CSS –
It is used to apply CSS on multiple pages. As all the styling is written in a different file with an extension “.css” Example style.css.
<link rel="stylesheet" type="text/css" href="style.css">
It is written instead head tag.
For more detailed guide – Click here
Let’s implement the above learnt concepts –
In this example will clone a static page of WhatsApp using Internal CSS-
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
:root {
font-size: 15px;
--primaryColor: #075e54;
--secondaryColor: #aaa9a8;
--tertierColor: #25d366;
}
* {
margin: 0;
padding: 0;
font-family: inherit;
font-size: inherit;
}
body {
font-family: Helvetica;
font-weight: 300;
}
img {
object-fit: cover;
width: 100%;
}
.container {
margin: 0 1.2em;
}
header {
background-color: var(--primaryColor);
padding: 1.4em 0;
}
header .container {
display: flex;
justify-content: space-between;
align-items: center;
color: white;
}
header .logo {
font-size: 1.5rem;
font-weight: 300;
}
header .menu {
margin-left: 18px;
}
.nav-bar {
background-color: var(--primaryColor);
margin-bottom: 8px;
display: grid;
grid-template-columns: 16% 28% 28% 28%;
justify-items: space-between;
align-items: center;
text-align: center;
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
.nav {
color: var(--secondaryColor);
text-transform: uppercase;
padding: 1em 0;
}
.nav.active {
border-bottom: 3px solid white;
color: white;
}
.chat {
padding: 1em 0;
display: flex;
justify-content: space-between;
}
.chat .info {
display: flex;
}
.chat .username {
font-size: 1.2rem;
margin-bottom: 5px;
font-weight: 300;
}
.chat .recent-chat {
color: gray;
max-width: 200px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.chat .recent-chat .read {
color: #34b7f1;
}
.chat .photo {
width: 55px;
height: 55px;
border-radius: 50%;
margin-right: 18px;
}
.chat .recent-chat-time {
font-size: 12px;
color: gray;
}
.contact-button {
padding: 1em;
border: 0;
border-radius: 50%;
color: white;
transform: rotate(0deg);
font-size: 1.3rem;
position: fixed;
bottom: 20px;
right: 1.2em;
background-color: var(--tertierColor);
}
</style>
<title>WhatsApp</title>
<link rel="icon" type="image/x-icon" href="wp.png" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/
[email protected]/font/bootstrap-icons.css" />
</head>
<!-- Body section starte here -->
<body>
<header>
<div class="container">
<h1 class="logo">WhatsApp</h1>
<div>
<a role="button" class="bi bi-search icon"></a>
<a role="button" class="bi bi-three-dots-vertical icon menu"></a>
</div>
</div>
</header>
<nav class="nav-bar">
<span class="bi bi-camera-fill nav"></span>
<a role="button" class="nav active">Chats</a>
<a role="button" class="nav">Status</a>
<a role="button" class="nav">Calls</a>
</nav>
<!-- Chat section starts here -->
<!-- chat 1 -->
<section class="chats">
<div class="container">
<div class="chat">
<div class="info">
<!-- <img class="photo" src="user-2.png" alt="User" /> -->
<img class="photo" src="user-2.png" alt="User" />
<div>
<h6 class="username">Anurag</h6>
<p class="recent-chat">
<i class="bi bi-check2-all"></i> Yes, i remembered that! 😄
</p>
</div>
</div>
<small class="recent-chat-time"> 04:20 PM </small>
</div>
<!-- chat 2 -->
<div class="chat">
<div class="info">
<img class="photo" src="user-2.png" alt="User" />
<div>
<h6 class="username">Cipher</h6>
<p class="recent-chat">Do you wanna hangout?</p>
</div>
</div>
<small class="recent-chat-time"> 10:20 AM </small>
</div>
<!-- chat 3 -->
<div class="chat">
<div class="info">
<img class="photo" src="user-2.png" alt="User" />
<div>
<h6 class="username">CipherSchools</h6>
<p class="recent-chat">
<i class="bi bi-check2-all read"></i> Hey bro, time to band!
🥁🎸
</p>
</div>
</div>
<small class="recent-chat-time"> Yesterday </small>
</div>
<!-- chat 4 -->
<div class="chat">
<div class="info">
<img class="photo" src="user-2.png" alt="User" />
<div>
<h6 class="username">Schools</h6>
<p class="recent-chat">Hey, where are you now? 🙄</p>
</div>
</div>
<small class="recent-chat-time"> 7/22/21 </small>
</div>
<!-- chat 5 -->
<div class="chat">
<div class="info">
<img class="photo" src="user-2.png" alt="User" />
<div>
<h6 class="username">Anurag CS</h6>
<p class="recent-chat">
<i class="bi bi-check2-all read"></i> May i borrow your games
for 2 weeks?
</p>
</div>
</div>
<small class="recent-chat-time"> 7/22/21 </small>
</div>
<!-- Contact button on the whatsapp -->
<button type="button" class="bi bi-chat-right-text-fill contact-button"></button>
</div>
</section>
</body>
</html>
23 notes
·
View notes