Module Overview

This practical module focuses on enhancing web pages using more advanced visual design and styling techniques. Learners will improve the appearance and interactivity of their web pages using CSS features such as styling effects and basic animations.

The goal is to create visually engaging and modern web pages.

Module Outcomes

After completing this module, learners will be able to:

• Apply advanced CSS styling techniques
• Enhance webpages using visual effects
• Use basic CSS animations
• Improve layout and design
• Create more engaging user interfaces

Practical Activities

Activity 1: Advanced Text and Colour Styling

Task:

Enhance your webpage by applying:

• Custom font styles
• Text colour combinations
• Background colours

Expected Outcome:

• Learner improves visual design

Activity 2: Styling with Borders and Shadows

Task:

Apply:

• Borders to elements
• Box shadows or text shadows

Example:

.box {
  border: 2px solid black;
  box-shadow: 2px 2px 5px gray;
}

Expected Outcome:

• Learner adds depth and visual effects

Activity 3: Basic CSS Animations

Task:

Create a simple animation using CSS.

Example:

@keyframes example {
  from { background-color: red; }
  to { background-color: yellow; }
}

.box {
  animation: example 3s infinite;
}

Expected Outcome:

• Learner demonstrates basic animation

Activity 4: Hover Effects

Task:

Add hover effects to elements such as:

• Buttons
• Links

Example:

button:hover {
  background-color: blue;
}

Expected Outcome:

• Learner creates interactive styling

Activity 5: Layout Improvements

Task:

Improve layout using:

• Spacing (margin, padding)
• Alignment

Expected Outcome:

• Learner enhances page structure

Activity 6: Combine All Features

Task:

Create a visually enhanced webpage that includes:

• Styled text and backgrounds
• Borders and shadows
• At least one animation
• Hover effects

Expected Outcome:

• Learner integrates advanced styling techniques