Я довольно новичок в веб -разработке и все еще изучаю HTML, CSS и JS. Я работаю на Наковальня , платформа, которая позволяет вам создавать и развернуть веб-приложения с полным стеком только с Python. Это отлично подходит для кого -то вроде меня, с ML Faine и без опыта Web Dev.
Я изучаю HTML и CSS с помощью приложений на наковальнике, поэтому я построил фальшивый интернет -магазин, используя наковальню и попытался сделать его как можно более красивым с моими ограниченными знаниями CSS. Проверьте это И дайте мне знать, что вы думаете!
Стилирование компонентов Python
Наковальня – это перетаскивать Строитель веб -приложений, где каждый компонент пользовательского интерфейса является объектом Python. Я стилизовал некоторые из этих компонентов с CSS, применяя роль им.
Например, образы заголовка в приложении представляют собой колонки, стилизованные с роли CSS.
.anvil-role-header-photo {
background: url(_/theme/header.jpg);
min-height: 700px;
background-attachment: fixed;
background-size: cover;
}
Текстовые поля и Textareas имеют сплошную синюю границу, а предметы в корзине добавляют верхнюю и нижнюю границу.
Но для того, у кого есть небольшой опыт работы с CSS, было не так сложно, что приложение наковальницы выглядело уникальным!
Встроенные интеграции
Покупки в моем приложении сделаны через Полоса который уже интегрирован в наковальню, поэтому мне не нужно было много работать там. Я только что добавил это к своему клиентскому 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 Также уже встроены на наковальню, поэтому я добавил карту Google на страницу контакта с маркером, чтобы соответствовать теме.
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)
Вы можете проверить исходный код Здесь !
Оригинал: “https://dev.to/bcm628/i-built-a-cute-e-shop-entirely-in-python-28j0”