valeria20-meet / y2l-flask-routing

The Online Shop - Lab (Part 1); Flask Routing

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

Don't forget to Fork first and then Clone

Part 1: Home

1. Create your first app route and link it to "home.html" in app.py.
2. Give home.html some life by adding a title and a link to your store page.
3. Create a link that leads to your about page as well.
   (Don't link anything yet, keep the href empty. Like: href="#" or href=" ")

Part 2: Store

1. Create an another app route in app.py and link it to "store.html".
2. Update the "Store" link in home.html according to the new app route.
3. Give store.html some life by adding a title and a link linking back to your homepage.
4. Add some products in store.html (link for reference: https://www.w3schools.com/howto/howto_css_product_card.asp )
5. Create a new app route and link it to "cart.html" (Without editing cart.html)
6. 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.

Part 3: About

1. Create an another app route in app.py and link it to the template "about.html"
2. Update the "About" link in "home.html" according to the new app route.
3. 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)

Bonus:

• 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