Practical 1: HTML List items

Instructions:
Create a new HTML file named lists_practice.html using a text editor or integrated development environment (IDE).
Begin with the basic HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Headings Practice</title>
</head>
<body>
    <!-- Your content will go here -->
</body>
</html>

Create a folder named “images” in the same directory as your HTML file. You can leave it empty for now.

Inside the

element, create the following sections:

Introduction:

Include an <h1> heading with the text "Welcome to Lists Practice."
Write a brief paragraph introducing the purpose of the webpage.

Unordered Lists::

Create an <h2> heading with the text "Types of Fruits."
Below the heading, create an unordered list (<ul>) with at least five fruit items (<li>).
Apply basic CSS properties to style the unordered list, such as changing the list marker style (list-style-type: circle;), adjusting margins(margin-left: 20px;), and setting a background color (background-color: #f0f0f0;).

Nested Lists:

Create an <h2> heading with the text "Countries and Their Cities."
Below the heading, create a nested unordered list that includes at least three countries and their respective cities.
Use CSS to style the nested list, adjusting padding (padding: 10px;) and list marker styles (list-style-type: square;).

Save the HTML file.

Create an external CSS file named styles.css to style your HTML content. Apply CSS styles to enhance the visual appeal of your unordered lists, list items, and any other elements you want to style.

Test your webpage in a web browser to ensure that the unordered lists are styled according to your CSS rules and the content is displayed correctly.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Unordered Lists and Basic CSS Practice</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>Welcome to Lists Practice</h1>
    <p>This is a practice assignment to work with unordered lists (ul) in HTML and apply basic CSS styling.</p>

    <h2>Types of Fruits</h2>
    <ul class="fruit-list">
        <li>Apple</li>
        <li>Banana</li>
        <li>Orange</li>
        <li>Grape</li>
        <li>Strawberry</li>
    </ul>

    <h2>Countries and Their Cities</h2>
    <ul class="country-list">
        <li>USA
            <ul>
                <li>New York</li>
                <li>Los Angeles</li>
                <li>Chicago</li>
            </ul>
        </li>
        <li>Canada
            <ul>
                <li>Toronto</li>
                <li>Vancouver</li>
                <li>Montreal</li>
            </ul>
        </li>
        <li>UK
            <ul>
                <li>London</li>
                <li>Manchester</li>
                <li>Birmingham</li>
            </ul>
        </li>
    </ul>

    <h2>Summary</h2>
    <p>In this practice assignment, we learned how to create and style unordered lists in HTML. We also created nested lists to represent countries and their cities. The lists were styled using CSS.</p>
</body>
</html>

/* Add CSS styles here to enhance the visual appeal of the webpage */

/* Style for the fruit list */
.fruit-list {
    list-style-type: circle;
    margin-left: 20px;
    background-color: #f0f0f0;
    padding: 10px;
}

/* Style for the country list */
.country-list {
    list-style-type: square;
    margin-left: 20px;
    padding: 10px;
}

/* Style for nested lists */
.country-list ul {
    list-style-type: disc;
    margin-left: 20px;
}

practical - Week 2

Practical 1: HTML List items