Unity

University
Internet programming I (COSC-
3031)

PREPAIRED BY:

Senay Frehiwot
ID/No:
UUR00462/16
 Submitted to: Ms. Gullat
Submitted Date: May 24/2025 .

Table of Contents
Introduction................................................................................................................................... 3
Search Engine Optimization (SEO).................................................................................................4
Some CSS property for Animation, Transform, Transition Properties...........................................5
Animation properties................................................................................................................. 5
Transform properties................................................................................................................. 6
Transition properties..................................................................................................................7
Responsive website....................................................................................................................... 8
 What is responsive website?.............................................................................................. 8
 How we create responsive website....................................................................................8
References................................................................................................................................... 10
 Introduction
As an Ethiopian university student and aspiring computer scientist, living in a digital world is
essential. This lifestyle differs from that of others; it is about being creative and mastering the
realm of computers, including the internet, cyber security, machine learning, and more.

This assignment explores these critical areas of web development. First, it defines search engine
optimization (SEO) and explains its importance in enhancing website visibility to users through
search engines. Next, it delves into CSS by discussing five properties from the animation,
transformation, and transition categories that help bring interactivity and movement to modern
websites. Finally, the assignment explains what a responsive website is and outlines how to
create one that functions smoothly across various devices, from desktops to smartphones.

This assignment was given by Ms. Gullat in the Internet Programming I course at Unity
University in May 2025. It is completed by Senay Frehiwot, a second-year computer science
student from Ethiopia.
 Search Engine Optimization (SEO)

SEO or Search Engine Optimization is defined as the process of improving (optimizing) the
visibility of a website/webpage on Search Engines, such as Google, Bing, etc. The higher your
pages appear in search results, the greater the chance they are discovered and clicked on. The
objective of Search Engine Optimization (SEO) is to attract website visitors who can turn into
customers, clients, or a loyal audience that consistently returns.

We need Search Engine Optimization for the following aspects:

 To improve the quality of our website

 To increase web traffic
 To increase visibility
 To enhance user experience
 To gain a competitive advantage
 For analysis and monitoring of the website

Now if you don't do Search Engine Optimization (SEO), let's say your website ranks at rank 45 in
the Google Search results, resulting in 100 unit conversions. Now, on the other hand, the
website ranking in the 1st position on Google Search for the same product has a conversion
rate of 10,000. So if you think about it, you are losing around 9,900 potential customers just
because you are not on the 1st position. This is the main reason why we need SEO.

Some of the basic components of the SEO are as follows:

1. Keyword Research: Identify the most relevant keywords for your target audience. Use
tools like Google Keyword Planner, SE Ranking, SEMrush, or Ahrefs to find keywords
with a good balance of search volume and competition.
2. On-Page SEO: Optimize your content and HTML source code for search engines. Include
target keywords in the title tag, meta description, headers, and throughout the content.
Ensure your website has a clear and organized structure with easy navigation. Website
SEO Checker like SE Ranking can help you detect areas for improvement and optimize
your website accordingly for better rankings.
3. Quality Content: Create high quality, and relevant content for your audience. Regularly
update your content to keep it fresh and relevant. Use a variety of content types, such
as text, images, videos, and infographics.
 4. Off-Page SEO: Build high quality backlinks from reputable websites to increase your
site's authority. Engage in social media to increase your online presence and promote
your content. Encourage social sharing and participation.
5. Technical SEO: Ensure your website is technically perfect and easily crawlable by search
engines. Optimize page speed for better user experience and search engine ranking.
Implement a mobile-friendly design as it is a crucial ranking factor.
6. User Experience (UX): Provide a smooth user experience on your website. Improve site
navigation and structure to make it easy for users to find information. Reduce bounce
rates by offering engaging and relevant content.
7. Analytics: Use tools like Google Analytics to monitor your website's performance.
Keeping track on important indicators such as organic traffic, conversion rates, and
keyword rankings. Analyze data to make the most appropriate decisions.

Some CSS property for Animation, Transform,

Transition Properties
Animation properties
In CSS we can dynamically change styles of elements based on time duration, user interaction
or state changes called CSS animations. The animation property in CSS can be used to animate
many other CSS properties such as color, background-color, height, or width.

It is implemented using the `@keyframes` rule to create the animation and the animation
property to apply it to an element.

5 properties when we can use to animate some html part:

1. animation-name:
 Specifies the name of the @keyframes animation you want to use.
 Example:-
animation-name:
bounce;

2. animation- duration:
 Defines how long the animation should take to complete one cycle.
 Example:-
animation-duration: 2s;
 3. animation -timing-function:
 Controls the speed curve of the animation.
 Values: linear, ease, ease-in, ease-out, ease-in-out, etc.
 Example:-
animation -timing-function: ease-in-
4. out; animation-
delay:
 Sets a delay before the animation starts.
 Example:-
animation-delay: 1s;
5. animation-
iteration-count:
 Tells how many times the animation should repeat.
 Values: Can be a number or infinite.
 Example:-
animation-iteration-count: infinite;

Transform properties
The transform property in CSS is used to change the coordinate space of the visual formatting
model. This is used to add effects like skew, rotate, translate, etc. on elements.

5 properties when we can use to animate some html part:

1. transform:
 The main properties for applying 2D/3D transformations like rotate,
scale, translate, skew, etc.
 Example:-
transform: rotate(45deg);

2. transform-origin:
 Sets the point around which a transformation is applied.
 Example:-
animation-duration: 2s;

3. translateX() / translateY():
  Moves the element along the X or Y axis.
 These are functions used inside the transform property.
 Example:-
transform: translateX(100px);

4. Scale():
 Resizes the element (makes it bigger or smaller).
 These are functions used inside the transform property.
 Example:-
transform: scale(1.5);

5. skew():
 Tilts the element along X and/or Y axes.
 These are functions used inside the transform property.
 Example:-

transform: skew(20deg, 10deg);

Transition properties
The transform property in CSS is used to apply 2D or 3D transformations to an element. It
allows you to rotate, scale, skew, or translate elements, creating visually dynamic effects.

5 properties when we can use to animate some html part:

1. transition-property:
 Specifies which CSS property should animate when it changes.
 Example:-
transition-property: background-
color;

2. transform-origin:
 Defines how long the transition takes.
 Example:-
transition-duration: 0.5s;

3. transition-timing-function:
 Controls the speed curve of the transition.
  Same values as in animations.
 Example:-
transition-timing-function: ease-in;

4. transition-delay :
 Adds a delay before the transition starts.
 Example:-
transition-delay: 0.3s;

5. transition :
 Shorthand to combine all the above properties.
 Example:-

transition: all 0.5s ease-in-out 0s;

Responsive website
 What is responsive website?
A responsive website is a website that automatically adjusts its layout, content, and designs to
look good on any screen size — big desktop monitors, laptops, tablets, or tiny phones. It is
about using HTML and CSS to automatically resize a website. This approach ensures that your
website looks good and is easy to use no matter how people access it. In this article, we will
explore what responsive web design is, why it's important, and how you can create websites
that adapt to different screen sizes and devices. Whether you're new to web design or looking
to improve your skills, understanding responsive web design is essential for creating modern,
user-friendly websites.

 How we create responsive website

Some ways to create a responsive website

1. Set the Viewport

The viewport is the user's visible area of a web page.The viewport varies with the device, and
will be smaller on a mobile phone than on a computer screen.

In your html document include the following <meta> viewport element in the <head> section of
all your web pages

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 2. Use Relative Units (instead of fixed pixels)

Use %, em, rem, or vw/vh instead of fixed px

width: 100%; /* Good */

font-size: 1.2rem; /* Scales better */
Example:

3. Responsive Images

Images should scale, not break the layout

Example

img {
max-width: 100%;
height: auto;
}

At the last there are so many other ways to handle the responsiveness of the web.
 References
Retrieved Thursday May 22, 2025, from

Search Engine Optimization Tutorial (SEO Tutorial) | GeeksforGeeks

animation - CSS: Cascading Style Sheets | MDN

animation | CSS-Tricks

CSS Animation

transform - CSS: Cascading Style Sheets | MDN

CSS transform Property | GeeksforGeeks

What is Responsive|w3schools

Responsive Web Design Viewport|w3schools

Responsive Web Design | GeeksforGeeks

SEO Basics Explained|chatgpt (open ai)