Today, we are creating an awesome online shop! This is where I want to see the creativity kick in.
Firstly, Come up with a name for your shop and an idea about what you are going to sell. It can be a pizza shop, a memes shop (?), even a fake Gucci shop. Whatever you can think of!
In our project folder, we have a 'static' folder which will be used for css and js files, and a 'templates' folder where you'll find all of our templates (html files) that we are/will be using.
In today's lab, you'll only work with and edit 3 templates: home.html, about.html and store.html.
This lab is our mini-project for Flask and Databases, in the next 2 sessions we'll keep building on top of it using new material that we'll learn every time :D
- Create your first app route and link it to "home.html" in app.py.
- Give home.html some life by adding a title and a link to your store page.
- Create a link that leads to your about page as well.
(Don't link anything yet, keep the href empty. Like: href="#" or href=" ")
- Create an another app route in app.py and link it to "store.html".
- Update the "Store" link in home.html according to the new app route.
- Give store.html some life by adding a title and a link linking back to your homepage.
- Add some products in store.html (link for reference: https://www.w3schools.com/howto/howto_css_product_card.asp )
- Create a new app route and link it to "cart.html" (Without editing cart.html)
- Modify the products elements in store.html and link the "Add to Cart" button to the new route that you just created.
- We will not be creating the "Add to Cart" function today, but this will help us set it up for the upcoming sessions.
- Create an another app route in app.py and link it to the template "about.html"
- Update the "About" link in "home.html" according to the new app route.
- Fill in the about us page with information about your company, you can even include yourself as a founder!
(links for reference: https://www.w3schools.com/howto/howto_css_team.asp OR https://www.w3schools.com/howto/howto_css_profile_card.asp)
- Add a navigation bar to all pages - and link all tabs.
- Add a carousel in your homepage.
- Add a design theme to your website:
- Font
- Colors scheme
- And make your website look beautiful