Use case: style the e-commerce app

Now we will continue with our use case we started in the previous chapter: our e-commerce store. We will focus on the basket page and leave the remaining pages for you to implement.

Basket page

To style our basket HTML page, we create a basket.css file and then we observe what CSS classes we introduced in basket.html file. Let’s take a look at a representative snippet:

<div class="container">
        <div class="basket">
            <h1>Basket</h1>
            <div class="basket-item">
                <div>
                    <h2>Product 2</h2>
                    <p>Price: 200</p>
                    <p>Quantity: 2</p>
                    <p>Sum: 400</p>
                </div>

In the preceding code, we see classes basket and basket-item, lets create CSS classes for those in basket.css:

Start with a blank basket.css and start...