Exercise 4: CSS
Activity: Styling a Basic Webpage with CSS
Duration: 70 minutes
Upload one file named USPnumber1.USPnumber2.html (Add the file late.USPnumber1.USPnumber2.html if late).
Objective: Students will apply CSS selectors, properties, and values to enhance the design of a given basic HTML webpage.
Instructions:
Page Structure:
- Download the provided basic HTML webpage which includes a header, a few paragraphs, an image, and a list. You can also use the HTML file you developed to present yourself.
- Begin by adding a general style:
- Set a background color for the entire page.
- Define a maximum width for the content and center it.
Typography and Color:
- Modify the text:
- Set a base font size and line-height for the entire page.
- Choose a font family for headers and another for body text.
- Adjust the color and weight of the headers.
- Add hover color changes for links.
- Modify the text:
Styling Images and Lists:
- For the image:
- Add a border.
- Add some shadow for a lifting effect.
- Ensure it's responsive, shrinking with the page width.
- For the list:
- Add custom bullet points or numbers.
- Adjust margins and padding for proper spacing.
- For the image:
Feedback and Review:
- Pair up with another student and review each other's work.
- Offer feedback on their design choices and any improvements that could be made.
These activities are structured to ensure that students not only practice the technicalities of CSS but also think about design decisions and get feedback. By the end, they should have a good grasp on how to effectively design and layout a webpage using CSS.
HTML FILE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styling with CSS Activity</title>
<!--
<style>
Put your CSS here. For now, it's commented out.
</style>
-->
</head>
<body>
<header>
<h1>Welcome to My Page</h1>
<p>This is a brief introduction about the page.</p>
</header>
<main>
<section>
<h2>About Me</h2>
<p>My name is Jane Doe and I'm a web developer from New York. I love creating responsive and interactive websites. In my free time, I enjoy hiking, reading, and exploring new cafes in the city.</p>
<img src="https://via.placeholder.com/350x150" alt="A placeholder image of Jane Doe">
</section>
<section>
<h2>My Favorite Books</h2>
<ul>
<li><a href="https://en.wikipedia.org/wiki/The_Great_Gatsby">The Great Gatsby</a> by F. Scott Fitzgerald</li>
<li><a href="https://en.wikipedia.org/wiki/To_Kill_a_Mockingbird">To Kill a Mockingbird</a> by Harper Lee</li>
<li><a href="https://en.wikipedia.org/wiki/Nineteen_Eighty-Four">1984</a> by George Orwell</li>
<li><a href="https://en.wikipedia.org/wiki/Pride_and_Prejudice">Pride and Prejudice</a> by Jane Austen</li>
</ul>
</section>
</main>
<footer>
<p>© 2023 by Jane Doe. All Rights Reserved.</p>
</footer>
</body>
</html>
This page contains:
- A header with a main title and introduction.
- A main content area with two sections:
- An "About Me" section with a small biography and an image.
- A section listing favorite books.
- A footer with a copyright notice.
The students are expected to style this using CSS as outlined in the activity. The image link is a placeholder and can be replaced by any image the students wish to use.