I'm pretty new to web development and am still learning HTML, CSS and JS. I work for Anvil, a platform that allows you to build and deploy full-stack web apps with only Python. It's great for someone like me with an ML background and no web dev experience.

I'm learning HTML and CSS by styling Anvil apps, so I built a fake online shop using Anvil and tried to make it as pretty as possible with my limited CSS knowledge. Check it out and let me know what you think!

Styling Python Components

Anvil is a drag-and-drop web app builder where every UI component is a Python object. I styled some of these components with CSS by applying a role to them.

For example, the header images in the app are ColumnPanels styled with a CSS role.

.anvil-role-header-photo {
  background: url(_/theme/header.jpg);
  min-height: 700px;
  background-attachment: fixed;
  background-size: cover;
}

TextBoxes and TextAreas have a solid blue border and items in the Cart have a top and bottom border added.

But for someone who has little experience with CSS, it wasn't too difficult to make an Anvil app look unique!

Built-in Integrations

Purchases in my app are made through Stripe which is already integrated in Anvil, so I didn't have to do much work there. I just added this to my client-side Python:

charge = stripe.checkout.charge(amount=self.subtotal*100,
                                      currency="USD",
                                      shipping_address=True,
                                      title="Cupcakes & Co.",
                                      icon_url="_/theme/cupcake_logo.png")

Google services are also already built-in to Anvil, so I added a Google map to the Contact page with a marker to match the theme.

    self.map_1.center = GoogleMap.LatLng(40.7128, -74.0060)
    self.map_1.zoom = 15
    icon = GoogleMap.Icon(url="_/theme/maps-icon.png")
    self.marker = GoogleMap.Marker(animation=GoogleMap.Animation.DROP, 
                              position=GoogleMap.LatLng(40.7128, -74.0060),
                              icon = icon)
    self.map_1.add_component(self.marker)

You can check out the source code here!