age 1 of 22

Lesson 13 – Create Interactive Website (Part 1)

Objectives:
1. Inspect and analyze HTML/CSS files.
2. Inspect elements using Google Chrome.
3. Identify goals, interaction and presentation of the web pages.

Content:

Approved and complete layout are inspected and analyzed

There's a powerful tool hiding in your browser: Inspect Element. Right-click on any webpage, click
Inspect, and you'll see the innards of that site: its source code, the images and CSS that form its design,
the fonts and icons it uses, the JavaScript code that powers animations, and more.
What Can You Do with Inspect Element?

The Inspect Element feature offers many benefits to users. Here are several things you can do with
it:

 CSS live-editing ‒ allows you to make edits in the CSS panel and see the changes in real
time.
 Layout testing ‒ lets you test different website layouts.
 Debug diagnostics ‒ helps website maintenance as it can check whether a site contains
broken code.
 Temporary editing ‒ allows you to tweak page elements without making permanent
changes to the code.

Why Do You Need to Inspect Web Elements?

The Inspect Element feature is valuable for many use cases, especially for:

 Web developers – you can test the code you’ve written and interact with it on a web page.
You can also use Inspect Element to find errors or bugs on a site.
 Content writers – the Inspect Element feature lets you omit sensitive information from a
web page before taking a screenshot. Manipulating a page using Inspect Element is quicker
than photo editing software.
 Digital marketers – lets you check a competitor’s search engine optimization (SEO) efforts,
website metadata, targeted keywords, and Google index status.
 Customer support agents – helps when assisting web developers in pinpointing and fixing a
website error.
 Designers – help modify a site’s design and see the changes before implementing them.
The tool also lets you preview the appearance of a web page on a desktop computer or
mobile device. This saves time and makes communicating with clients more efficient.
 age 2 of 22

How to Inspect Element Using Chrome Developer Tools

Before exploring the Inspect Element tool in Google Chrome, it’s essential to know about the
Developers Tools. It is a panel that comes with the Inspect Tool, and it comprises three main parts:

 Elements/Document Object Model (DOM) panel – contains the page’s DOM tree and
provides access to the Hyper Text Markup Language (HTML) source code. It is located at
the top taskbar of the Chrome Developer Tools.
 CSS panel – allows you to change, add, and remove CSS properties to modify the style rules
of a web page. It is located in the middle section of Developer Tools, under Styles.
 Console – displays logged messages and runs the JavaScript code. It appears at the button
taskbar of Developer Tools.

Here’s how to open Inspect Element using Google Chrome:

1. Open a website in Google Chrome. We will be using hostinger.com for this tutorial.
2. Click on the three vertical dots on Chrome’s top menu bar, choose More tools, then
select Developer tools.

Alternatively, use the keyboard shortcuts – Ctrl + Shift + I for Windows or Linux and Cmd + Option
+ I for macOS users.

Or, right-click on the web page and choose Inspect to access the Developer tools panel.
 age 3 of 22

3. Once the Elements tab appears on your browser window, you can edit the page’s source
code. Resize the inspector box by dragging its corners for better readability.

4. By default, the Elements panel will appear on the right side of the browser window. If you
want to change its location or move it to a separate window, click on the three vertical
dots at the upper-right corner of the panel and choose your preferred Dock side setting.
 age 4 of 22

5. To see how the web page appears on mobile devices, click the Toggle device toolbar at the
top-left corner of the panel. Above the preview, you can change the variables to test how
the page performs with a different screen resolution or bandwidth throttling level.

Pro Tip
To inspect a specific element, right-click on it and choose the Inspect option. The inspect element
tools will open and automatically highlight the source code of the selected element.

You can use Inspect Element to change, delete, or hide site content and check CSS classes . We
recommend clearing the browser cache regularly to ensure you’re viewing the original appearance
of the web page.
 age 5 of 22

The following sections will provide in-depth information on how to perform common Inspect
Element tasks.

Change an Element

To change a page element, you need to alter the page’s CSS or HTML source code. This way, you
can edit text and its style elements, such as font weight, size, and color.

The DOM panel enables simple text modification. Here’s how to do it:

1. Open Google Chrome and go to a website. In this example, we’re using hostinger.com.
2. Right-click anywhere on the web page and select Inspect to open the Developer tools.
3. After opening the Elements box, use the Inspect tool ‒ the cursor icon at the top left of the
panel ‒ to highlight the source code element you want to change.

4. Right-click on the code highlighted within the DOM tree and select Edit as HTML.
Alternatively, double-click the text you want to alter.
 age 6 of 22

5. The editor box will expand, allowing you to modify the text. Text elements are usually
encased in quotation marks.

6. Deselect the element to preview the changes.

Modifying the style of web elements involves similar steps, but you’ll use the CSS panel instead.
We’ll mainly use element.style, which comprises different properties to choose from and add to
the web page.

Follow these steps:

1. Open Google Chrome and access a website. In this example, we’re using hostinger.com.
2. Right-click anywhere on the website and choose Inspect.
3. Use the Inspect tool to highlight an element.
4. Click on the element.style property on the upper part of the CSS panel and add the desired
style declarations inside the curly brackets. In the following example, we added a
background color to a text block:
 age 7 of 22

5. If you want to put another style declaration, select the element.style property again. The
web inspector will add another empty line to fill. Here, we append a second property to
display the text in italics:

6. Hovering over CSS properties in the panel will reveal a checkbox next to each line. Uncheck
it to omit any styles from being shown. Alternatively, you can click on a property or a value
to replace it.

Hide or Delete an Element

 age 8 of 22

The Developer Tools also let you hide site elements on web pages. With the Hide Element feature,
the CSS panel can create a visibility property to hide any site content without deleting it.
Follow these instructions:

1. Open Google Chrome and go to a website. Here, we use hostinger.com.

2. Right-click on any part of the web page and select Inspect.
3. Enable the Inspect feature and click on the element you want to hide.
4. Right-click on the code highlighted on the DOM tree and select Hide Element. A new
visibility property will appear on the CSS panel. Uncheck it to undo the change.

5. If you want to remove an HTML element instead, right-click on the highlighted code and
select the Delete element. Refreshing the page will restore the removed code.

Pro Tip
You can undo all the changes made in the Inspect Element tool by pressing Ctrl+Z on Windows and
Linux or Command+Z on macOS.
 age 9 of 22

Inspect CSS Classes

Inspecting page elements is an excellent way to check web design code. You can also copy them to
style your website’s sections using CSS classes.

Here’s how to do it:

1. Open Google Chrome and access a website. Here, we use hostinger.com.

2. Right-click anywhere on the web page and select Inspect.
3. Activate the Inspect tool and hover your cursor over the element you want to check. Its
basic information like color, font, and margin will appear in a box, and the DOM panel will
highlight its source code.

4. You can also find a specific CSS style by pressing Ctrl+Shift +F on Windows and Linux
or Command+Option+F on macOS.
5. A search tab will appear on the lower part of the panel. Enter your query, and the inspector
will generate the results.
 age 10 of 22

Goals, interaction of the contents and presentation of the web page are
identified

Ensuring that a website meets all requirements can be difficult without a set process for doing so. That’s
where thorough website requirements documentation comes in handy.

How to define your website goals

To define your website’s goals, start with why you want your business to succeed. Why did you begin
this journey? What impact do you want to make, and how can a website expand on that original goal?
Get specific and list as many benefits as possible, focusing on what others can get rather than your
enrichment.

This is all work you will need to have plotted out for your content strategy anyway, so doing it here will
save you time regarding your mission statement, home page and about us content pages. Even your
blog content can be created from what you discover in this thought-mapping session.

Defining your website goals will help you with the following:

 Your website design and development process

 Decisions regarding content, layout and functionality
 Efficient allocation of resources
 age 11 of 22

 Allocation of marketing efforts

 Search Engine Optimization (SEO)

Examples of website goals

Website goals can range from increasing brand awareness and improving customer interaction to
becoming an industry leader or generating revenue through sales and leads. No matter what they are,
these goals must align with the company’s mission, vision and overall objectives.

Think about your reach. Are you targeting local, national or global audiences? Make sure the language
and information you use match your chosen area coverage. You must also drill down and think about
what demographics are most attracted to your business and offer information, deals and media that
best suit their needs and desires.

Top Reasons for Defining Goals in Website Creation

A business can effectively plan and develop a website that aligns with its objectives by establishing clear
goals.

One of the main reasons for setting goals in website creation is to ensure that the content produced is
purposeful and relevant. High-quality and focused content attracts the target audience, enhances user
experience, and effectively communicates the brand’s message.

Defining your goals will help design a functional and visually appealing website with an organized layout
and user-friendly navigation. This will help reduce bounce rate, positively impact user experience,
reinforce brand identity and encourage user engagement.

You’ll also see benefits within your business with efficient project management and resource allocation,
smooth communication among team members, and fast and accurate website development and
completion.

Once your website is published and live, you can see the ongoing benefits of measurable benchmarks,
allowing business owners to evaluate the effectiveness of everything from content and design to
marketing strategies. When you have benchmarks, you have a doorway for continuous improvement,
allowing you to rapidly and accurately respond to shifting and changing user preferences and industry
trends.

Types of Website Goals

Businesses and individuals can tailor several website goals to meet their needs and intentions.

Increase Brand Awareness

 age 12 of 22

A well-designed and informative website will not just represent who you are but effectively introduce a
brand to an increasing number of people, creating a positive and memorable impression that goes hand-
in-hand with trust and authority. By showcasing the brand’s unique selling points, values and
personality, businesses can establish a robust online presence, enhance their reputation among their
target audience, and provide a voice, face and company that people can relate to.

Lead Generation

A website can serve as an excellent platform for capturing and nurturing potential customers by offering
valuable content, including:

 Blog posts
 eBooks
 Webinars
 Expert opinions
 Tips and hacks
 Comments and conversations

Adding both primary and secondary calls-to-action into a clean website design can encourage visitors to
provide contact information so you can create a connection that stretches long past their initial visit.

The more positive and helpful touch points your leads receive, the more their trust and willingness to
convert to leads.

Increased Website Traffic

A higher volume of visitors on the site can lead to increased brand awareness, lead generation and
conversions. The best way to do this is through organic means rather than advertising. Visitors who
come to your website via referral or search engine clicks are far more likely to commit and take action.

Getting SEO right is complex because thousands of points need to be covered upfront and behind the
scenes. Ignoring any of them can hurt your rankings, so you need to work to make your website high-
quality from every angle – a website audit can go a long way here.

If it makes life easier for people visiting your website (i.e. you answer their questions) and you have
fantastic information to share engagingly. In that case, you’ll go well on search returns, so look to offer
the best quality you can.

Build a database

By encouraging visitors to sign up for newsletters or other content, businesses can create a database of
interested and engaged users to whom they can send regular updates and promotional materials. This
can help to keep the business top-of-mind among potential customers and enhance long-term customer
retention.
 age 13 of 22

It also helps you know how many people are interested and what information they are looking for,
allowing you to tailor your data and services to meet their needs and talk to them personally.

Make Money

No business, not even non-profit, can survive without an income, so behind every website, it makes
sense that there is a goal to make money.

E-commerce websites, for example, focus on selling products or services directly to customers. Other
business models, such as affiliate marketing or advertising, can generate revenue through the website
by promoting different brands or displaying ads. By clearly defining their revenue-generating goals,
businesses can create a targeted website strategy that aligns with their financial objectives.

Types of Interactive Content

Over the last decade, the producers of digital products have developed a broad range of interactive
content types and seem to continue thinking over new ones in a non-stop mode. Let’s see what kinds
are effectively used on modern websites and apps.

Videos

Video content simultaneously activates several channels of perception – audio, visual, and motion – and
usually wraps that all in telling a story. Such a combination of factors often makes a video presentation
strong, emotional, and memorable. A catchy video crafted with an understanding of the target audience
 age 14 of 22

is a tool attracting customers’ attention as well as a well-checked method of informing them quickly and
brightly. In addition, a significant benefit is a strong connection with the real-life experience provided by
different types of videos, which has the great power of setting associations and encouraging viewers’
empathy.

As for the types of video content that can now be found on websites and applications, today, there’s
quite a broad range of them:

 Welcome (introduction) video

 Promotional (commercial) video
 Showcase (showreel) video
 Video testimonial
 Product video
 Background video
 Hero section video
 Video guides and tutorials
 Explainer video
 Educational videos
 Entertaining videos

Calculators

Interactive calculators become a great supporting tool helping users of a website or app solve their
problems quickly, doing needed calculations they need without leaving the website or app. Not only
does it contribute to the positive user experience, allowing for fast and informative interactions, but also
it means much for the effective decision-making process, making the experience personalized and well-
tuned. In the case of e-commerce websites or applications, interactive calculators can make a
considerable impact on engaging the customer to move forward along the sales funnel.

Product Demonstrations

This type of interactive content is getting increasingly popular, and content creators do their best to
improve the existing formats of product demos and find new ones to impress customers. Today they go
much further than video presentations already well-familiar for users: you can also find interactive
demos showing 360-degree views of the products or places, live streams allowing them to directly
communicate and ask questions about the product, etc. As a result, these creative approaches help
brands show and tell more about their offers and engage customers to learn more and try.

eBooks and Whitepapers

A white paper is a type of informational document issued by a company or organization to provide a

deeper glance on some topic, research findings, cases, solutions, etc. With the rocketing progress of
digital communication, whitepapers have also become a powerful tool for content marketing, inbound
marketing, and lead generation through valuable and engaging customer experience.
 age 15 of 22

eBooks, reports, guides, tips, trend reviews, and other kinds of whitepapers also present a popular type
of interactive content, first of all, due to their informational nature and usefulness as well as their ability
to operate offline. They create an additional touchpoint, another communication channel for brands and
products, and when well-crafted and supportive content is shared, it helps increase brand awareness
and loyalty. What’s more, as well as landing pages, whitepapers of all kinds can be finely tuned for
particular segments of the target audience, making communicating with them more concise,
personalized, and efficient.

Games and Quizzes

Thinking that games are attractive to only kids is a big mistake, and many brands and digital products
aren’t making it today. Adding a pinch of the game even to a serious product can give the users the
moment of joy or happiness of victory that supports the desirability and emotionality of the user
experience. In turn, quizzes can be not only entertaining but also informative: crafted thoughtfully, they
tell the creative team behind the digital product more about the target audience and help tune the
experience better.

Polls, Questionnaires, and Surveys

These points belong to the most classic ways of engagement and interactivity rooted in the experience
that had been well-known and quite common much before it became a part of the digital world. Polls
and surveys present one of the most effective tools for UX personalization and setting the feeling of
direct communication between the brand and the customers. The main challenge here is to keep the
balance and not overcomplicate the experience to avoid getting users bored.

Maps

In the last years, interactive maps have grown their popularity not only as independent products but
also as a valuable part of user experience on different websites or applications. For example, they can be
used to support the smooth and flawless user flow in the shipping and delivery services or help different
businesses provide their customers with the ability to build routes and get to places quicker.
Additionally, interactive maps can become an excellent tool for data visualization for different editorials,
media, and other information-based resources.

Timelines

A timeline is a graphic element that displays the chronological set of events. In user experience design
for web and mobile, they’ve been showing the growing diversity of creative approaches and often
become the impactful and effective type of data visualization, often supported with interactions like
zooming, animation, etc.

Infographics
 age 16 of 22

The term ‘infographics’ is used to call different approaches to represent big bulks of information, data,
or knowledge graphically in a way that makes it easier for readers and viewers to process, understand,
and remember. To reach that goal, designers employ different tools and patterns that help speed up and
enhance visual perception and activate the natural abilities of human brains. Progressing to the digital
world, infographics leaped into not only diversification of the graphics but also interactivity and motion,
making them even more dynamic, impressive, and effective.

Tags and Checklists

Tags and checklists are widely used to help users interact with the digital environment and tune the user
experience making it more precise and corresponding to what people strive to get from this product.
Being engaging and interactive, they pave shortcuts to the proper content arrangement and faster
solutions. What’s more, they really help the teams behind a website or application to get a deeper and
clearer understanding of what users want and how they tune the product according to their needs, so if
ready to collect and analyze that data, the producers can improve the digital product on the basis of
what real users’ actions and this way make the website or application more user-friendly.

Interactive Details

Realizing the benefits of interactivity and its contribution into positive user experience, for the last
decade designers and developers don’t limit themselves to the well-checked types of interactive content
but constantly experiment with new approaches and ideas. That results in new types of cool interactive
details we can find on modern websites and apps, like interactive menus, backgrounds, mascots, etc.

Benefits of Interactive Content

Briefly summing up the reasons why creators could consider the integration of different types of
interactive content into their projects, we would mention the following potential benefits:

 deeper user engagement

 personalization
 emotionality
 enhanced data visualization
 a better understanding of users’ needs
 improved SEO
 wow-effects

The ‘Look’ Of A Website Comprises the Following Elements

 age 17 of 22

The ‘look’ of a website is a very common phrase that is used by designers all the time while designing
and developing your website’s outlook. It has constituents of the following elements as listed below-

Color Orientation

The color scheme that is used and its orientation are one of the key elements of a website design and
development. The combination of colors and its consistency throughout the website elevates your
business/brand presence online.

You must devote time to choosing the right colors as they provide a competitive edge and improve the
market landscape visually. Each color has a special significance and underlying meaning, which you
should keep in mind while choosing. Establish the right choice of color palette that solely reminds the
audience of your brand.

Your color palette can be dark, light, minimalistic, pastel, muted, saturated, vibrant, or anything that
makes your brand stand out. The designers can use it to their advantage to make the target audience
vibe with the brand and get associated with the products/services easily.

Imagery Pattern

The use of imagery variations in the website in the form of different patterns, graphic elements, icons,
buttons, shapes, photos, etc. brings out your business more uniquely. They can be structured on the
website in different ways to make the website aesthetically pleasing. It can be straightforward,
representational, organic, geometric, random, stylized, personalized, abstract icons and so much more.
The pictorial choices or images make a realistic effect on the website contents.
 age 18 of 22

Font Style

The selection font style is one of the other elements of what your website will look like at the end. The
font must be chosen specifically based on weights, sizes, hierarchy, and color application. Each font can
be differentiated and can have a different impact based on these criteria.

For example, the title and headers should be in bold or heavyweight as compared to its inside contents.
Here, one other important part is the careful use of whitespace and spaces between words and
alphabets. It is your decision at the end of the day to choose which font style will align with your brand’s
image and products/services.

Layout Composition

The overall website layout is the last element of what your website will look like. The layout composition
of your business/brand should be aligned with each of the above laments together and act as an
adhesive holding it all together - to portray your brand image.

The website layout structure can be left-aligned, right-aligned, or centered, each with different
variations of the page design. You need to make a balanced choice and arrange the whole page in any
symmetry of your choice. Then arrange all the above laments and content to boost the overall user
experience and conversions as the result.

The ‘Feel’ Of A Website Comprises the Following Components

Listed here are the various components of what a website should ‘feel’ like for you as a brand
represented online and for the target audience to interact immediately-

First Impression of a Web Visitor

Landing the first impression of any visitor is the first element of what the website feels like. How you are
going to play with the visual elements is your choice - but the objective is to portray your brand vision to
your target audience. What reaction are you aiming to achieve or expecting is the question- should it be
playful, fun, sophisticated, educational, approachable, simple, serious, and so on. This feeling you
nurture in your audience will help you to market your business more effectively. Thus, instilling a sense
of trust and confidence in them which will garner more conversions.

Browsing Journey

The second element of how a website should feel to the audience and you is determined by the flow of
the website. The speed of the website to load all its content, how comfortable users are reading the
content, whether the animations are in perfect pacing, if the carousels are set at the right time, image
slide timings, and so on are part of the browsing journey.

Effective Interactivity

The third component of what a website should feel like- is determined by the interactions made on the
website. For example, the drop-down buttons, zoom features for images, interactive graphics, color-
 age 19 of 22

changing icons/buttons, motion designs, color contrast typography, textures, gradients, shapes, etc. - all
of which add a layer to the website and its interactivity. They can spark a conversation and get the
audience more focused on the website. They are a strategic choice and boost up your authenticity as a
business online.

Why are these segments important for a website to make a mark?

The look and feel of a website are crucial for the overall success of your brand and business. Here is the
list of reasons why the website’ look and feel’ should be focused on-

Portraying Brand Personality

The components of a website’s ‘look and feel’ elements immediately lay out a message to the target
audience about their vision, attitude, approach, brand personality, and business objectives. Your
business image and personality should be reflected in your website design so that customers know what
to expect. You can always go to any website development company in India for professional expertise.
They can chart out a plan of action and how to approach it on a timeline.

Incite Interaction with The Target Demographic

The website’s ‘look and feel’ triggers your target demographic to engage and interact with your
products/services displayed on the website. The choice you make about the selection of the visual
elements plays an important part in this area. The more appealing they are, the more the target
audience is inclined to interact. Thus, it drives more traffic, enhances conversion, and pushes sales.

The interaction is the action taken after the design has been successful in creating an impression on the
site visitors. Every site owner needs to make clear and empowering choices in the visual elements to
portray the right brand image in the market.

Positive Business Image

With the right set of elements in your website’s ‘look and feel’, you can impact and influence your target
audience to engage with your website. You can aim to be more of any of those things or a collection of
the following adjectives. These adjectives like approachable, professional, experiences, readable,
scalable, responsive, user-friendly, high-end, usable, etc. - will only make your website outlay flattering
and pleasing to the audience. The condition is that you need to figure out what elements are right for
you on basis of its application on the website in terms of -

 Depth
 Variations
 Length
 Width
 Consistency
 Authentic
 Visually pleasing
 age 20 of 22

Teachers Activity:
Ask Question
Show Presentation
Demonstration
Show video:
https://www.youtube.com/watch?v=WfKG9C00giI

Reference:
Site:
https://www.google.com/
https://www.youtube.com/
https://www.hostinger.ph/tutorials/website/how-to-inspect-and-change-style-using-google-chrome
https://www.chillybin.co/importance-defining-goals-creating-website/
https://blog.tubikstudio.com/ux-design-interactive-content/
https://www.linkedin.com/pulse/look-feel-website-its-elements-importance-esolz/

eBook:
 CH 9 – Using Development Tools to Examine Webpages by: Oxford University Press
 age 21 of 22

Assessment 13-1:
Written Test

Test I: Multiple Choice: Write your chosen letter on the space provided.

__________ 1. _____________ goals can range from increasing brand awareness and
improving customer interaction to becoming an industry leader or
generating revenue through sales and leads.
a. Client b. Designer c. Website
__________ 2. A catchy _________ crafted with an understanding of the target audience is
a tool attracting customers’ attention as well as a well-checked method of
informing them quickly and brightly.
a. video b. music c. image
__________ 3. The _______________ that is used and its orientation are one of the key
elements of a website design and development.
a. images b. color scheme c. graphics
__________ 4. One of the main reasons for setting goals in website creation is to ensure
that the ________ produced is purposeful and relevant.
a. page b. content c. website
__________ 5. A ________ paper is a type of informational document issued by a company
or organization to provide a deeper glance on some topic, research findings,
cases, solutions, etc.
a. white b. pad c. note
__________ 6. The use of ___________ variations in the website in the form of different
patterns, graphic elements, icons, buttons, shapes, photos, etc.
a. pattern b. color c. imagery
__________ 7. _______________ websites, for example, focus on selling products or
services directly to customers.
a. Static b. Personal c. E-commerce
__________ 8. With the right set of elements in your website’s ‘look and feel’, you can
impact and influence your target audience to __________ with your website.
a. engage b. leave c. read
__________ 9. Landing the first ____________ of any visitor is the first element of what the
website feels like.
a. sight b. impression c. landing
__________ 10. The ______ must be chosen specifically based on weights, sizes, hierarchy,
and color application.
a. color b. font c. image

Test II: Enumeration

A: What are the benefits in Inspect Element feature?

1. ____________________________________
2. ____________________________________
3. ____________________________________
4. ____________________________________
 age 22 of 22

B: What do you need to inspect Web Elements?

1. ____________________________________
2. ____________________________________
3. ____________________________________
4. ____________________________________
5. ____________________________________

C: What are the parts of Chrome Inspect Element panel?

1. ____________________________________
2. ____________________________________
3. ____________________________________

Activity

Objective: Inspect and analyze the codes use on your web page.

Procedure/Steps:

1. Open your website (base on your design form previous Lesson) in Google Chrome.
2. Click on the 3 dots on Chrome top menu, choose “More tools”, the select “Developer
tools”.
3. You can now edit the source code of your webpage by using the inspector box.
4. Click the “Toggle device toolbar” to see the appearance of your web page on mobile
devices.

Observe what is happening during editing and inspection of the codes. Explain to the class.