Scribd
Upload
6 views4 pages

Web Development Assignment

The document explains Search Engine Optimization (SEO) as a method to enhance website visibility on search engines, emphasizing its importance for attracting visitors. It also describes CSS properties related to animations, transforms, and transitions, providing examples and explanations for each. Additionally, it outlines the principles of creating a responsive website that adapts to various devices, highlighting the use of flexible layouts and media queries.

Uploaded by

denekemihret
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views4 pages

Web Development Assignment

The document explains Search Engine Optimization (SEO) as a method to enhance website visibility on search engines, emphasizing its importance for attracting visitors. It also describes CSS properties related to animations, transforms, and transitions, providing examples and explanations for each. Additionally, it outlines the principles of creating a responsive website that adapts to various devices, highlighting the use of flexible layouts and media queries.

Uploaded by

denekemihret
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Web Development Assignment

1. What is Search Engine Optimization (SEO)?


Search Engine Optimization (SEO) is the practice of improving a website’s visibility on
search engines like Google, Bing, or Yahoo. The main goal is to make your website appear
higher in search results when users type certain keywords.

SEO is important because most people click on one of the top results on a search page. If
your website ranks higher, more people will visit it, and that can help you get more sales,
readers, or followers.

Types of SEO:
1. On-page SEO – using proper titles, headings, images, keywords, and internal links.
2. Off-page SEO – building backlinks (links from other websites) to your site.
3. Technical SEO – improving site speed, mobile-friendliness, and security.

Example: If your website sells handmade shoes, using keywords like “custom leather shoes”
or “handmade Ethiopian shoes” in your content will help it appear when someone searches
for those terms.

2. Describe 5 CSS Properties in Each Category

A. Animation Properties
CSS animation allows elements to change styles over time. Animations help create engaging
effects on websites.

Example: Slide-In Animation

@keyframes slideIn {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}

.box {
animation-name: slideIn;
animation-duration: 2s;
animation-delay: 1s;
animation-iteration-count: infinite;
}

Animation Properties Explained:


1. @keyframes – Defines the animation sequence.
2. animation-name – Refers to the name of the keyframe animation.
3. animation-duration – Sets how long the animation takes.
4. animation-delay – Delays the start of the animation.
5. animation-iteration-count – Number of times the animation runs (e.g., infinite).

B. Transform Properties
The transform property lets you change the shape, size, and position of elements.

Example: Transform Effects

.box {
transform: rotate(45deg) scale(1.2) translateX(50px) skew(15deg);
}

Transform Properties Explained:


1. transform – Applies all transformations.
2. rotate() – Rotates the element (e.g., 45 degrees).
3. scale() – Enlarges or shrinks the element.
4. translateX() / translateY() – Moves the element in the X or Y direction.
5. skew() – Tilts the element in a direction.

C. Transition Properties
CSS transitions allow you to smoothly change property values (like color, size) over time.

Example: Button Hover Effect

.button {
background-color: red;
transition: background-color 0.5s ease, transform 0.3s;
}

.button:hover {
background-color: blue;
transform: scale(1.2);
}

Transition Properties Explained:


1. transition – Shorthand for all transition properties.
2. transition-property – Specifies which property to animate.
3. transition-duration – Duration of the animation.
4. transition-timing-function – Speed curve (e.g., ease, linear).
5. transition-delay – Delay before the transition starts.
3. What is a Responsive Website?
A responsive website adjusts its layout and design to look good on all devices: mobile
phones, tablets, laptops, and desktops. It makes sure that content is readable and usable no
matter the screen size.

How to Create a Responsive Website:

1. Use the <meta> viewport tag


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

2. Use Flexible Layouts:


.container {
width: 80%;
margin: auto;
}

3. Use Media Queries:


@media (max-width: 600px) {
.box {
background-color: lightblue;
font-size: 18px;
}
}

4. Make Images Responsive:


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

5. Use CSS Frameworks (Optional):


Frameworks like Bootstrap provide pre-built responsive layouts using grid systems and
ready-made classes.

Complete Responsive Example:


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
width: 80%;
margin: auto;
}
.box {
background-color: orange;
padding: 20px;
text-align: center;
font-size: 24px;
}
@media (max-width: 600px) {
.box {
background-color: lightgreen;
font-size: 18px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="box">This is a Responsive Box</div>
</div>
</body>
</html>

Conclusion
- SEO helps your website become visible on search engines.
- CSS animation, transform, and transition properties add dynamic and smooth effects.
- A responsive website ensures accessibility and readability across all devices using flexible
layouts, media queries, and proper tags.

You might also like